2

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);
  • What does kc-tracts.js look like? – jmfolds Jun 27 '16 at 16:10
  • It is a geojson file (polygons) with a global variable assigned to it. – user65031 Jun 27 '16 at 17:46
0

If you're geojson file has something like:

var kcTracts = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -109.3359375,
              42.032974332441405
            ],
            [
              -110.390625,
              38.272688535980976
            ],
            [
              -97.734375,
              31.05293398570514
            ],
            [
              -87.5390625,
              38.8225909761771
            ],
            [
              -109.3359375,
              42.032974332441405
            ]
          ]
        ]
      }
    }
  ]
};

You should be able to then:

var layer = L.geoJson(kcTracts, {
    style: myStyle
}).addTo(map);

*NOTE: Ensure that kc-tracts.js is included in your page before your code.

1
<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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.