Я хочу, чтобы всплывающее окно на маркере mapbox реагировало при просмотре на мобильных устройствах

Я делаю карту на мапбоксе с маркерами, импортированными из набора данных. У маркеров есть всплывающее окно, которое отлично работает на рабочем столе, но при просмотре на мобильном телефоне оно выходит за края экрана. Ниже приведен код, который я использовал для создания этого всплывающего окна. как я могу изменить размер этого всплывающего окна при переключении на мобильное устройство или настроить размер в зависимости от экрана дисплея?

map.on('click', function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ['American Eats'] // replace this with the name of the layer
      });
      if (!features.length) {
        return;
      }
      var feature = features[0];
      var popup = new mapboxgl.Popup({ offset: [0, -15] })
        .setLngLat(feature.geometry.coordinates)
        .setHTML('<h3>' + feature.properties.Title + '</h3><h4>' + feature.properties.Adress + '</h4><p>' + feature.properties.Description + '</p>')
        .setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });

mapbox mapbox-gl-js popup
person Emad Khan    schedule 08.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это легко сделать с помощью CSS. Что-то в этом роде:

@media only screen and (max-width: 480px) {
    .mapboxgl-popup-content {
        max-width: 250px;
    }
    .mapboxgl-popup-content div {
        padding:0em;
    }
    .mapboxgl-popup-content p {
        margin: 0.5em 0.5em;
    }
}

Отрегулируйте любые настройки, которые вам нужны, чтобы всплывающее окно оставалось маленьким. Я использую этот подход на Hipster Map of Melbourne - попробуйте его с очень маленьким окном браузера и посмотрите, как уменьшаются всплывающие окна.

person Steve Bennett    schedule 08.03.2017