leaflet - Automatically Zoom the map to fit all markers -


following example, can see plunker http://plnkr.co/edit/ljhyp3dht3v8ahvdt3d3?p=preview

regardless of whatever zoom value provided while initializitng map, want zoom map automatically markers inside view. here code

var tiles = l.tilelayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {         maxzoom: 18,         attribution: '&copy; <a href="http://osm.org/copyright">openstreetmap</a> contributors, points &copy 2012 linz'     }),     latlng = l.latlng(-37.82, 175.24);  var map = l.map('map', {center: latlng, zoom: 10, layers: [tiles]});  var markers = l.markerclustergroup();  (var = 0; < addresspoints.length; i++) {     var = addresspoints[i];     var title = a[2];     var marker = l.marker(new l.latlng(a[0], a[1]), { title: title });     marker.bindpopup(title);     markers.addlayer(marker); }  map.addlayer(markers);  var group = new l.featuregroup(markers);  map.fitbounds(group.getbounds()); 

you need

  • create array

  • push markers in array

  • once markers added array, create featuregroup
  • add markers array featuregroup , zoom bounds.

below modified code

var markerarray = []; //create new markers array  (var = 0; < addresspoints.length; i++) {     var = addresspoints[i];     var title = a[2];     var marker = l.marker(new l.latlng(a[0], a[1]), { title: title });     marker.bindpopup(title);     markers.addlayer(marker);      markerarray.push(marker); //add each markers array      if(i==addresspoints.length-1){//this case when markers added array         var group = l.featuregroup(markerarray); //add markers array featuregroup         map.fitbounds(group.getbounds());        } } 

here working plunk


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -