CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-glmapbox-marker
Gnik
Gnik

Reputation: 7426

How can I show popup fit to the screen size of the mobile device in mapboxgl?

I want to make my mapboxgl popup fit to my mobile device screen size. 

  new mapboxgl.Popup()
      .setLngLat(e.features[0].geometry.coordinates)
      .setHTML("htmlString")
      .addTo(map);

I used the above code, but to see the entire content of the popup i need to move right/left.

Also I want to show popup on the center of the marker. Not it appears left/right side

Upvotes: 0

Views: 2167

Answers (1)

iH8
iH8

Reputation: 28668

You can staticly position the popup using the anchor option:

A string indicating the popup's location relative to the coordinate set via Popup#setLngLat . Options are 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.

Reference: https://www.mapbox.com/mapbox-gl-js/api/#popup

As for scaling the popup is supposed to do that automaticly according to the content you provide. But if you really need to you can fiddle with it's styling, 

<div class="mapboxgl-popup">
     <div class="mapboxgl-popup-tip"></div>
     <div class="mapboxgl-popup-content">
         <button class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</button>
         <h1>Hello World!</h1>
     </div>
</div>

But i'de really advise against that. If you need a specific size or so i'de enclose the content in a container element and style that.

Upvotes: 1

Related Questions