Leaflet – How to Load External GeoJSON File

geojsonjavascriptleaflet

I want to load an external geojson file into leaflet map. I created a global variable (i.e. tracts) for json file and referenced this variable in the script file. But i receive an error message that variable is not defined. Please check the below html and JS code.

I also tried using L.GeoJSON.AJAX call, but still the geojson external file is not loading up on the leaflet map and i get an error message that 'L.GeoJSON.AJAX is not a constructor'. 

 <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
 </head>
 <body>

 <div id="mapid"></div> 

 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

 <script src="Lscript.js"></script>
 <script src="/files_leaflet/kc-tracts.js" type = "text/javascript"> 
   </script>

## JavaScript

var map = L.map('mapid', {
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);

L.geoJson(tracts, {

style: style,
onEachFeature: onEachFeature
}).addTo(map); 

# Using Ajax call.
 var mystyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65 
 };


var geoJsonLayer = new L.GeoJSON.AJAX("kc-tracts.js", {
style: mystyle });
geoJsonLayer.addTo(map);

Best Answer

<html>
<head>
<meta charset=utf-8 />
<title>PipeGeoJSON Demo</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
table, th, td {
    border: 1px solid black;
}
</style>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = 'apikey';

var map = L.mapbox.map('map', 'mapbox.streets',{
    zoom: 5
    });

function add1() { 

    function addDataToMap1(data, map) {
            var dataLayer = L.geoJson(data);
            var map = L.mapbox.map('map', 'mapbox.streets',{
                zoom: 5
                }).fitBounds(dataLayer.getBounds());
            dataLayer.addTo(map)
        }
    $.getJSON('http://localhost:8000/a.geojson',function(data) { addDataToMap1(data,map); });
    function addDataToMap1(data, map) {
        var dataLayer = L.geoJson(data, {
            onEachFeature: function(feature, layer) {            var popupText = "<table><tr><th>COUNT: </th><td>" + feature.properties['COUNT']+"</td></tr>";             var popupText = popupText+ "<tr><th>LAT4: </th><td>" + feature.properties['LAT4']+"</td></tr>";             var popupText = popupText+ "<tr><th>LAT1: </th><td>" + feature.properties['LAT1']+"</td></tr>";             var popupText = popupText+ "<tr><th>LAT3: </th><td>" + feature.properties['LAT3']+"</td></tr>";             var popupText = popupText+ "<tr><th>LAT2: </th><td>" + feature.properties['LAT2']+"</td></tr>";             var popupText = popupText+ "<tr><th>LONG3: </th><td>" + feature.properties['LONG3']+"</td></tr>";             var popupText = popupText+ "<tr><th>LONG2: </th><td>" + feature.properties['LONG2']+"</td></tr>";             var popupText = popupText+ "<tr><th>LONG1: </th><td>" + feature.properties['LONG1']+"</td></tr>";             var popupText = popupText+ "<tr><th>LONG4: </th><td>" + feature.properties['LONG4']+"</td></tr>";             var popupText = popupText+ "<tr><th>HASH: </th><td>" + feature.properties['HASH']+"</td></tr>"; 
                layer.setStyle({color: '#1766B5', weight: 3, opacity: 1});
                        layer.bindPopup(popupText, {autoPan:false, maxHeight:500, maxWidth:350} ); }
                });
            dataLayer.addTo(map);
        console.log(map.fitBounds(dataLayer.getBounds()))};
    };
add1();

</script>

</body>
</html>

AJAX is tricky at first the code above should show a general approach to implementing a geojson file source in the url. If you were to have say string of a geojson simply insert that string where the url is currently at in the AJAX function.

Related Question