1

I'm new to mapbox and trying to put one on my website. How can we ensure that it doesn't zoom out smaller than the div containing the map itself. Currently, it zooms out to level 1, leaving white spaces on all the sides.

I have used the following code

<style>
    #map {
        position: relative;
        padding-bottom: 50%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
</style>

<section id="content">
    <div id="map"></div>
</section>

I'm also attaching a snapshot to illustrate the problem... enter image description here

Mobashyr Mohammad
  • 93
  • 1
  • 1
  • 9

1 Answers1

2

According to the documentation for Mapbox.js you can set the minZoom (Map State Options):

minZoom: Minimum zoom level of the map. Overrides any minZoom set on map layers.

If you were using Mapbox GL JS, you could use the options.minZoom parameter:

options.minZoom (default 0) The minimum zoom level of the map (1-20).

antonio
  • 18,044
  • 4
  • 45
  • 61
  • Great. Option.minZoom indeed solved the problem. I'm however still able to drag the map around which shows the white background again. Is there a way to stop dragging beyond the container? – Mobashyr Mohammad Oct 17 '16 at 14:21
  • 1
    You can use the `maxBounds` option that restricts the view to the given bounds – antonio Oct 17 '16 at 14:23
  • Indeed! Not sure if I did correct though. I set the bound extremes as [-85, -180],[85,180]. On dragging, the map springs back to the original container bounds. – Mobashyr Mohammad Oct 17 '16 at 14:29
  • Is there a way to change viscocity of dragging beyond the container for Mapbox? There is an option for Maps, but cannot find a way out for L.mapbox.map. – Mobashyr Mohammad Oct 18 '16 at 02:22
  • [link](http://stackoverflow.com/questions/22155017/can-i-prevent-panning-leaflet-map-out-of-the-world-edge) shows an example for L.map, but not sure how to use for L.mapbox.mapSorry, but a newbie here :( – Mobashyr Mohammad Oct 18 '16 at 02:24