CODEWITHSUNDEEP
javascriptleafletmapping
goran_bl
goran_bl

Reputation: 69

How to zoom all markers in Leaflet

This is the code I have to show the markers on the map:

var coordinates = data;

for (var i = 0; i < coordinates.length; i++) {
    if (coordinates[i].x && coordinates[i].y) {
        var marker = L.marker([coordinates[i].x, coordinates[i].y])
                                .bindPopup("Device: " + coordinates[i].device_type + '<br>' + "Time: " + coordinates[i].datetime)
                                .addTo(map);
    }
}

It's working, but I can't zoom to view all markers in the window when I refresh the page.

I tried:

map.fitBounds(coordinates.getBounds());

But it's not working.

Upvotes: 0

Views: 61

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Update your code to:

var fg = L.featureGroup();
fg.addTo(map)
var coordinates = data;
                for (var i = 0; i < coordinates.length; i++) {
                    if (coordinates[i].x && coordinates[i].y) {
                        var marker = L.marker([coordinates[i].x, coordinates[i].y])
                            .bindPopup("Device: " + coordinates[i].device_type + '<br>' + "Time: " + coordinates[i].datetime)
                            .addTo(fg);
                    }
                }



map.fitBounds(fg.getBounds());

Upvotes: 1

Related Questions