Leaflet external GeoJSON File ajax
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
<div id="info">
<h2>Waiting for the Ajax Callback...</h2>
</div>
Leaflet get external GeoJSON File with ajax
CSS
#map {
height: 400px;
}
#info {
width:250px;
height:100px;
background:rgba(255, 255, 255, 0.7);
border: 1px solid #617EF6;
border-radius:5px;
position:fixed;
top:200px;
left:calc(50% - 125px);
margin:auto;
padding:10px;
color:#617EF6;
}
JavaScript
// Create the map
var map = L.map('map').setView([0, 0], 5);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
$.ajax({
type: "POST",
url: 'C:\Users\Martin\Python\TarifMapService\templates\Gzip5.geojson',
dataType: 'json',
success: function (response) {
geojsonLayer = L.geoJson(response).addTo(map);
map.fitBounds(geojsonLayer.getBounds());
$("#info").fadeOut(500);
}
});