Leaflet external GeoJSON File ajax

by Thomas B.

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: 'https://gist.githubusercontent.com/anonymous/0fc097d2845387ab2ce0/raw/a981ff77eaca3873bcef705f5241eeab5a55b84b/bundeslaender_geojson.js',
    dataType: 'json',
    success: function (response) {
        geojsonLayer = L.geoJson(response).addTo(map);
        map.fitBounds(geojsonLayer.getBounds());
        $("#info").fadeOut(500);
    }
});