Add padding to map area in MapBox

Question

How can I add padding to the map area?

As you can see in the screenshot there is a yellow div overlaid over the top and the popup is appearing underneath it so I'd like to give the map area 100px padding to the top so the popup drops to the side. Thanks in advance.

Code below:

        <div id="map" class="map"></div>
            <script>
                mapboxgl.accessToken = 'pk.xxxxxx';
                var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/xxxxxx/cj5jggnud0m5g2soxqalq8z3n',
                zoom: 3,
                center: [50.075,26.136]
                });

                var geojson = {
                  type: 'FeatureCollection',
                  features: [


                  {
                    type: 'Feature',
                    geometry: {
                      type: 'Point',
                      coordinates: xx.xxxxx,xx.xxxxxx }}]
                    },
                    properties: {
                      title: 'Egypt',
                      description: 'Item One Item Two Item Three'
                    }
                  }

                 ]
                };

                // add markers to map
                geojson.features.forEach(function(marker) {

                    // create a HTML element for each feature
                    var el = document.createElement('div');
                    el.className = 'marker';

                    // make a marker for each feature and add to the map
                    new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
                    .setLngLat(marker.geometry.coordinates)
                    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                    .setHTML('<div class="map-marker"><h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p></div>'))
                    .addTo(map);
                });

                // disable map zoom when using scroll
                map.scrollZoom.disable();
                // Add zoom and rotation controls to the map.
                var nav = new mapboxgl.NavigationControl();
                map.addControl(nav, 'bottom-right');

            </script>

Peeke Kuepers Peeke Kuepers · Accepted Answer · 2021-02-09T07:29:11

It's quite an old question, but maybe this helps someone Googling.

The easiest solution boils down to moving the center of your map 100px down. Since the center of your map is in lnglat format, you first have to convert this to a px value, add the 100px, then convert back to lnglat. You can do that with the project and unproject methods on the map object. project converts lnglat to px, unproject vice versa:

const [x, y] = project(map.getCenter())
map.setCenter(unproject([x, y + 100]))

This solution is useful when you have a draggable map. It might be not what you want if you have a BoundingLngLat containing a bunch of features you all want visible within the viewport. Since you're losing 100px from the bottom of your map, features may end up outside the viewport. In this case you can move the northeast lnglat of your LngLatBounds 100px up, using the same mechanism:

const [x, y] = project(bounds.getNorthEast())
bounds.setNorthEast(unproject([x, y - 100]))
map.fitBounds(bounds)

Add padding to map area in MapBox

2 Answers