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>
<script src='leaflet-ajax.js'></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> | <a href="#" onclick="return getFailOutput(); return false;"> test failure</a>
<div id="map"></div>
<div id="info">
<h2>Waiting for the Ajax Callback...</h2>
</div>
Leaflet validate and get external GeoJSON File with ajax
<p>Validation-Response: <span id="antwort"></span></p>
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);
function processSuccess(data) {
if (data.status === 'ok') {
$("#antwort").html('You just posted some valid GeoJSON!. Data Status is: <b>'+data.status+'</b>' );
} else if (data.status === 'error') {
alert('There was a problem with your GeoJSON: ' + data.message);
}
}
function processError(e) {
alert('There was a problem with your ajax.');
console.log(e);
}
function getSuccessOutput() {
$.ajax({
type: "GET",
url: 'http://geojsonlint.com/validate?url=https://gist.githubusercontent.com/anonymous/d63b83bf134aa3185f53/raw/1f988fd8476780b56c737f2060c19d5926369402/map.geojson',
dataType: 'json',
success: function (response) {
geojsonLayer = L.geoJson(response).addTo(map);
map.fitBounds(geojsonLayer.getBounds());
$("#info").fadeOut(50000);
}
});
return false;
}