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: '© <a href="http://osm.org/copyright">openstreetmap</a> contributors, points © 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
Post a Comment