'Add padding to map area in MapBox

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.

enter image description here

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>
mapboxmapbox-gl-jsmapbox-glmapbox-marker


Solution 1:[1]

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)

Solution 2:[2]

Check out this page in the Mapbox Documentation: https://docs.mapbox.com/mapbox-gl-js/example/offset-vanishing-point-with-padding/

The example uses the easeTo method, but if you don't want a transition, you can use jumpTo:

map.jumpTo({
  padding: {
    top: 100
  }
});

Solution 3:[3]

I was facing same issue and i resolve in this way: 

map.flyTo({
   center: [lng, lat + (window.innerHeight / 1000000.0)], //800 px / 100000
   zoom: 17
});

when user click on map i adding a marker and zoom to that location with little padding form top by

(window.innerHeight / 1000000.0).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peeke Kuepers
Solution 2 krummens
Solution 3 Khurshid Ansari

Related Questions