Skip to content

Instantly share code, notes, and snippets.

@ThomasG77 ThomasG77/index.html Secret
Last active Nov 16, 2016

What would you like to do?
Overpass to GeoJSON using Leaflet
<!DOCTYPE html>
<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="" />
<script src=""></script>
<script src=''></script>
html, body {
height: 100%;
padding: 0;
margin: 0;
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
<div id="map"></div>
// initialize Leaflet
var map ='map').setView({lat: 49.44491456001265, lon: 11.25274658203125}, 9);
// add the OpenStreetMap tiles
L.tileLayer('https://{s}{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="">OpenStreetMap contributors</a>'
// show the scale bar on the lower left corner
var url = '*%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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.