Adding GeoJSON layer on leaflet?

Question

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

body :

<!DOCTYPE html>
<html>
<head>
    <title>map</title>
    <link href="leaflet.css" type="text/css" rel="stylesheet">
    <link href="index.css" type="text/css" rel="stylesheet">

</head>

<body>
    <div id="map"></div>

    <script src="jquery-3.2.1.min.js"></script>
    <script src="leaflet.js"></script>
    <script src="index.js"></script>
    <script src="loc_infra.js"></script>

</body>
</html>

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 !

Would you mind uploading this to https://jsfiddle.net along with all your dependencies? — GISHuman, Apr 26 '17 at 23:30
no problem : https://jsfiddle.net/NanBlanc/hxb3hoeu/#&togetherjs=navkRmVPeH PS: for the "loc_infra file, i upload it via "cjoint", because it's kind of huge file. here it is : http://www.cjoint.com/c/GDBhqkOuItG — NanBlanc, Apr 27 '17 at 07:31
@NanBlanc Please be careful with possible rude comments when you post publicly, even within your code… — ghybs, Apr 27 '17 at 07:58

score 6 · Accepted Answer · answered Apr 27 '17 at 08:15

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 <script> tags to make sure your loc_infra variable is defined and assigned before you try to use it:

<script src="loc_infra.js"></script> <!-- define and assign first -->
<script src="index.js"></script> <!-- now you can use it -->

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.

THXXXX you're a genuis <3 this is it ! i didn't know that script calling order was so important ! and you guess it right, i'm a begginer who always forget about web console :)
and by your last sentence, you mean that by calling the geojson directly in the js script with "getJSON", the script calling line in the html isn't needed anymore ? — NanBlanc, Apr 27 '17 at 09:04
Yes, and you also do not need to wrap your GeoJSON data with var loc_infra = … ;, so that it becomes really (Geo)JSON compliant. — ghybs, Apr 27 '17 at 09:16

Adding GeoJSON layer on leaflet?

1 Answers1

Linked