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);
asked Jun 23, 2016 at 16:07
-
What does kc-tracts.js look like?jmfolds– jmfolds2016年06月27日 16:10:13 +00:00Commented Jun 27, 2016 at 16:10
-
It is a geojson file (polygons) with a global variable assigned to it.user65031– user650312016年06月27日 17:46:55 +00:00Commented Jun 27, 2016 at 17:46
2 Answers 2
<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.
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.
answered Jun 27, 2016 at 17:53
lang-js