Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active April 24, 2024 13:25
Show Gist options
  • Save ThomasG77/d2e616acb4723715fb0a8d16f782eec8 to your computer and use it in GitHub Desktop.
Save ThomasG77/d2e616acb4723715fb0a8d16f782eec8 to your computer and use it in GitHub Desktop.
Download ZIP
Demo to use Overpass JSON API with OpenLayers 3 & 4
Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>Overpass JSON</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://rawgit.com/tyrasd/osmtogeojson/gh-pages/osmtogeojson.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([6.17383, 48.69662]),
zoom: 13
})
});
// If you want dynamic version
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var epsg4326Extent =
ol.proj.transformExtent(extent, projection, 'EPSG:4326');
var stringExtent = epsg4326Extent[1] + ',' + epsg4326Extent[0] + ',' +
epsg4326Extent[3] + ',' + epsg4326Extent[2];
// Usefull if you use an ol.loadingstrategy.bbox instead of ol.loadingstrategy.all
// var query = '[out:json][timeout:25];(node["amenity"="cafe"](' + stringExtent + ');way["amenity"="cafe"](' + stringExtent + ');relation["amenity"="cafe"](' + stringExtent + '););out;>;out skel qt;';
var query = '[bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672][out:json][timeout:25];(node["leisure"]["access"!="private"]["sport"="swimming"];node["access"!="private"]["leisure"="swimming_pool"];way["leisure"]["access"!="private"]["sport"="swimming"];way["access"!="private"]["leisure"="swimming_pool"];relation["leisure"]["access"!="private"]["sport"="swimming"];relation["access"!="private"]["leisure"="swimming_pool"];);out center;>;'
fetch('https://overpass-api.de/api/interpreter', {
method: "POST",
body: query
})
.then(response => response.json())
.then(json => {
const geojson = osmtogeojson(json, {
flatProperties: true
});
var features = new ol.format.GeoJSON().readFeatures(geojson, {
featureProjection: map.getView().getProjection()
});
vectorSource.addFeatures(features);
});
},
strategy: ol.loadingstrategy.all // ol.loadingstrategy.bbox
});
var vectorLayer = new ol.layer.Vector({
renderMode: 'image',
source: vectorSource
})
map.addLayer(vectorLayer);
// Code borrowed from https://openlayers.org/en/v4.6.5/examples/kml-timezones.html
// but without the popup (only logging)
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {
console.log(feature.getProperties());
} else {
console.log('Nothing around');
}
};
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment