Quantcast
Channel: Question and Answer » leaflet
Viewing all articles
Browse latest Browse all 198

How do you load a GeoJSON file in Leaflet?

$
0
0

I’m stumped as to how to add a GeoJSON layer to an OSM map. Through Google, I’ve found a bunch of different answers, none of which seem to work. Following the Leaflet documentation, the simplest way to do so is with this code:

var map = L.map('map').setView([51.505, -0.09], 15);

L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>contributors'
}).addTo(map);

L.geoJson(data, {
        style: function (feature) {
            return { color: feature.properties.color };
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.description);
        }
}).addTo(map);

Questions: what exactly do I enter for the “data” variable? I keep a file in the path “~/Scripts/worldmap.geojson”, but a direct URL string doesn’t work. I’m using jQuery, and it’s $.getJSON function does not seem to work.


Viewing all articles
Browse latest Browse all 198