Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html Secret

Last active November 16, 2016 02:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/4478ed6529636219b8375343825fb201 to your computer and use it in GitHub Desktop.
Save ThomasG77/4478ed6529636219b8375343825fb201 to your computer and use it in GitHub Desktop.
Download ZIP
Overpass to GeoJSON using Leaflet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>OSM Overpass to GeoJSON demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src='http://tyrasd.github.io/osmtogeojson/osmtogeojson.js'></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize Leaflet
var map = L.map('map').setView({lat: 49.44491456001265, lon: 11.25274658203125}, 9);
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// show the scale bar on the lower left corner
L.control.scale().addTo(map);
var url = 'http://overpass-api.de/api/interpreter?data=%2F*%0AThis%20has%20been%20generated%20by%20the%20overpass-turbo%20wizard.%0AThe%20original%20search%20was%3A%0A%E2%80%9Crelation%3D62780%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F%20gather%20results%0A%28%0A%20%20rel%2862780%29%3B%0A%29%3B%0A%2F%2F%20print%20results%0Aout%20body%3B%0A%3E%3B%0Aout%20skel%20qt%3B';
fetch(url).then(function(response) {
return response.json().then(function(json) {
var geojsonCollection = osmtogeojson(json);
console.log('Copy the string after in a static file and you have your geojson: ', JSON.stringify(geojsonCollection));
L.geoJSON(geojsonCollection).addTo(map);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment