I am trying to getBounds of dynamically added markers to the map. My goal is to dynamically add markers to a map and have the view automatically zoom to fit the bounds of all the markers on the map. Below is my current code and what I have tried so far:

The starting point is an array of lat & lng:

The web page offers a list of addresses and checkboxes that a user can select and deselect. When the desired addresses are selected the user can click view on map and the makrers will appear on the map (this is working perfectly, I just can't get the view to zoom to the bounds of these markers)

I have a loop that pulls the lat and lng for each checked address and pushes it into an array like this:

latLng.push(42.9570316,-86.04564429999999);
latLng.push(43.009381,-85.890041);

...this is in a loop so it always contains the desired amount of values and outputs this:

latLng = [42.9570316,-86.04564429999999,43.009381,-85.890041,43.11996200000001,-85.42854699999998,43.153376,-85.4730639,42.8976947,-85.88893200000001];

var thisLatLng = L.latLng(latLng);

console.log(thisLatLng); // this returns Null

mymap.fitBounds(group); //  returns Error: Bounds are not Valid

mymap.fitBounds(group.getBounds()); // returns group.getBounds() is not a function

I have also tried this as a starting point:

latlng.push(L.marker([42.9570316,-86.04564429999999]));
latlng.push(L.marker([43.009381,-85.890041]));

...this is contained in a loop that results in the output below

latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];

console.log(latLng); // this returns makrers with the correct lat & lng above

var group = new L.featureGroup(latLng);

console.log(group); //this returns a Null featureGroup

mymap.fitBounds(group); // returns Error: Bounds are not valid

mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid

I am at a loss on how to make this work I have tried several answers posted on stackoverflow and attempted to try and follow the documentation but nothing seems to give the desired oute.

Update

I removed latLng.push(L.marker([42.9570316,-86.04564429999999])); loop and replaced with the following:

I created a featuregroup with var group = new L.featureGroup(); then added markers to it in the loop by using marker.addTo(group); this pushed all of the markers into the featuregroup as I would expect but was unable to get bounds.

mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid

here is what console.log(group); outputs:

I am trying to getBounds of dynamically added markers to the map. My goal is to dynamically add markers to a map and have the view automatically zoom to fit the bounds of all the markers on the map. Below is my current code and what I have tried so far:

The starting point is an array of lat & lng:

The web page offers a list of addresses and checkboxes that a user can select and deselect. When the desired addresses are selected the user can click view on map and the makrers will appear on the map (this is working perfectly, I just can't get the view to zoom to the bounds of these markers)

I have a loop that pulls the lat and lng for each checked address and pushes it into an array like this:

latLng.push(42.9570316,-86.04564429999999);
latLng.push(43.009381,-85.890041);

...this is in a loop so it always contains the desired amount of values and outputs this:

latLng = [42.9570316,-86.04564429999999,43.009381,-85.890041,43.11996200000001,-85.42854699999998,43.153376,-85.4730639,42.8976947,-85.88893200000001];

var thisLatLng = L.latLng(latLng);

console.log(thisLatLng); // this returns Null

mymap.fitBounds(group); //  returns Error: Bounds are not Valid

mymap.fitBounds(group.getBounds()); // returns group.getBounds() is not a function

I have also tried this as a starting point:

latlng.push(L.marker([42.9570316,-86.04564429999999]));
latlng.push(L.marker([43.009381,-85.890041]));

...this is contained in a loop that results in the output below

latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];

console.log(latLng); // this returns makrers with the correct lat & lng above

var group = new L.featureGroup(latLng);

console.log(group); //this returns a Null featureGroup

mymap.fitBounds(group); // returns Error: Bounds are not valid

mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid

I am at a loss on how to make this work I have tried several answers posted on stackoverflow and attempted to try and follow the documentation but nothing seems to give the desired oute.

Update

I removed latLng.push(L.marker([42.9570316,-86.04564429999999])); loop and replaced with the following:

I created a featuregroup with var group = new L.featureGroup(); then added markers to it in the loop by using marker.addTo(group); this pushed all of the markers into the featuregroup as I would expect but was unable to get bounds.

mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid

here is what console.log(group); outputs:

• javascript
• leaflet

Share Improve this question Follow edited Sep 28, 2017 at 13:00 Craig Howell asked Sep 28, 2017 at 1:43 Craig HowellCraig Howell 1,19433 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I don't think at all that

latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];

Can work. In leaflet you can't just create a variable and say that it's a marker object. You need to use method like L.marker()

What you need to do is create a single marker and add it to a featureGroup

var group = new L.featureGroup();
for (var i = 0; i < yourMarkers.length; i++) {
    L.marker([51.5, -0.09]).addTo(group);
}
map.fitBounds(group.getBounds());

group will now contains multiple markers.

And you can also try this :

var coordinates = new Array();
for (var i = 0; i < yourMarkers.length; i++) {
    var marker = L.marker([51.5, -0.09]);
    coordinates.push(marker);
}
var group = new L.featureGroup(coordinates);
map.fitBounds(group.getBounds());

UPDATE

The concerned function was this one :

function showResult(lat, lng) { 
    var marker = L.marker([lat, lng]) 
    .bindPopup('yourPopup').on("popupopen", onPopupOpen).addTo(group); 
    map.addLayer(group); 
    map.fitBounds(group.getBounds()); 
}

You only need to add the fitBounds() inside it.