CODEWITHSUNDEEP
popupmapboxmapbox-gl-js
Emad Khan
Emad Khan

Reputation: 53

I want to make a pop-up on a mapbox marker responsive when veiwing on mobile devices

I am making a map on mapbox which has markers imported from a data set. THe markers have a pop up which works perfectly on desktop but when viewing on mobile it bleeds off the edges of the screen. Below is the code I used to create this pop-up. how can I make this pop up change size when switching to mobile or adapt the size depending on the display screen? 

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);
    });

Upvotes: 1

Views: 1444

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126425

It's easy to do this using CSS. Something along these lines:

@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;
    }
}

Adjust whatever settings you need in order to keep the popup small. I use this approach at the Hipster Map of Melbourne - try it with a very small browser window and see how the popups shrink.

Upvotes: 1

Related Questions