CODEWITHSUNDEEP
leafletmapbox
kelsheikh
kelsheikh

Reputation: 1338

Using minZoom with map.fitBounds without getting error

I have a Leaflet map that I am trying to plot multiple points using map.fitbounds() but I would like the set a minZoom so the user cant zoom all the way out past a zoom level of 9. I currently use the below to add pins to a map except sometimes when a map as multiple points where the map would need to fitbounds at a wider zoom it causes the map to fail. When the map fitbounds is set higher than 9 then it works fine but below 9 it doesnt plot.

I was wondering if someone would know how to both safeguard a map from failing with a minZoom and using fitBounds in certain instances and to also stop a user from zooming so far out.

map.options.minZoom = 9;
map.options.maxZoom = 15;
var fg = L.featureGroup().addTo(map);
for ( var i=0; i < markersArray.length; ++i )
{
  var linkid = (markersArray[i]['linkid']);
  var linkurl = (markersArray[i]['linkurl']);
 L.marker( [markersArray[i].lat, markersArray[i].lng], {icon: myIcon} )
  .bindPopup( '<div id="mapPinDetails"><h3>' + markersArray[i].name + '</h3>' + markersArray[i].address + '<br /></div>' )
  .addTo(fg);
}
  map.fitBounds(fg.getBounds());

Upvotes: 0

Views: 1829

Answers (1)

ghybs
ghybs

Reputation: 53215

below 9 it doesnt plot

It does, but since you do not allow your map to zoom out below 9, it remains at zoom level 9 and you may not see your outer markers. But if you pan you can see them. The view center is the same that would have been achieved with a lower zoom:

var map = L.map('map', {
  minZoom: 9,
  maxZoom: 15,
}).setView([48.86, 2.35], 11);

var fg = L.featureGroup().addTo(map);

L.marker([49, 2.35]).addTo(fg);
L.marker([48.5, 2.35]).addTo(fg);

map.fitBounds(fg.getBounds());

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

If you need further help, you will have to explain what you mean by "it causes the map to fail" and if possible share a reproducible example.

Upvotes: 0

Related Questions