Leaflet.js - Fit geoJSON co-ordinates on map view

javascript geojson
James picture James · Apr 20, 2012 · Viewed 15.7k times · Source

I have a leaflet.js map that has points and linestrings on it that come from an external JSON file.

If I add: map.setView(new L.LatLng(0,0), 10);

It will centre the map on the latitude and longitude 0,0. How can I set it so the map centre and zoom fit all of the points from the JSON on it?

Answer

Jason picture Jason · Apr 20, 2012

You could add all of your layers to a FeatureGroup which has a getBounds method. So you should be able to just say myMap.fitBounds(myFeatureGroup.getBounds());

The getBounds method for L.FeatureGroup is only available in the master branch (not the latest version, 0.3.1), for now at least.

Related questions

How to interact with leaflet marker layer from outside the map?

I have a leaflet map showing points for public art pieces, rendered from GeoJSON. Next to the map, I created a list of the pieces from the same GeoJSON data and want to be able to click on an item …

Read More
Creating a GeoJson in php from MySql to use with MapBox javascript API

What I'm trying to do is very simple; get marker's data from a Mysql table with my PHP code, convert that that to a geoJson ( used by MapBox ), send that geoJson to javascript and then populate those marker into my …

Read More
Draw lines between markers in leaflet

I'm trying to insert lines between markers (which are generated from JSON data) in leaflet. I saw an example, but it doesn't work with JSON data. I can see the markers, but no lines appear. var style = { color: 'red', fillColor: "#…

Read More