javascript - Adding GeoJSON layer on leaflet?

i'm trying to load a geojson file on a leaflet map. here is the code :

body :

javascript :

var map = L.map('map',{

center:[5,28],
zoom: 3,
minZoom: 2,
maxZoom: 18,
});

L.tileLayer('http://{s}.tiles.mapbox.com/v3/ianmule.bg2v5cdi/{z}/{x}/{y}.png',{attribution: "Mapbox"}).addTo(map);

function basement (feature,layer){
layer.bindPopup("SURPRISE")

}

    var c2 = L.geoJson(loc_infra, {
            style:
            {
                weight: 4, 
                color: "red", 
                opacity: 1,
                fillColor: "red", 
                fillOpacity: 0.5

            }, 
            onEachFeature: basement


        }).addTo(map);

and a little CSS :

html, body, #map {
height: 100%;
width:100%;

font-family:  : sans-serif;
}

and the geojson i'm trying to launch :

var loc_infra = 
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [........

but my layer is not visible on the map, and i can't understand why !

Answer

I suspect that the JavaScript code that you provide is within the index.js file?

In that case, you just have to re-order your



Demo: http://jsfiddle.net/3v7hd2vx/263/

When programming and debugging for the Web, make sure to use the browser console / DevTools (this describes for Chrome, but all browsers have something similar). In your case, it should report the error that loc_infra variable is undefined.

Later on, you can clean your architecture by actually loading a GeoJSON file (i.e. JSON format) instead of a JS file, typically using jQuery's getJSON or through the leaflet-ajax plugin.