3

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

2 Answers 2

Reset to default
3 
<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.

Improve this answer
1

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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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