OpenLayers - Use Overpass Turbo API
Question
I want to display markers according to a GeoJSON file and with the code below all is working fine and now I want to use Overpass Turbo. I want to display all swimming-pools.
I use this request :
[out:json][timeout:25][bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672];
(
node["leisure"][access!="private"][sport="swimming"][name!=''];
node[access!="private"][leisure="swimming_pool"][name!=''];
way["leisure"][access!="private"][sport="swimming"][name!=''];
way[access!="private"][leisure="swimming_pool"][name!=''];
relation["leisure"][access!="private"][sport="swimming"][name!=''];
relation[access!="private"][leisure="swimming_pool"][name!=''];
);
out center;
>;
I use this server : //overpass-api.de/api/
When I want to export this request and generate raw data from Overpass API in order to generate a GeoJSON request (in my case : https://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%5Btimeout%3A25%5D%5Bbbox%3A48.64209701511677%2C6.084880828857422%2C48.743172495967094%2C6.318340301513672%5D%3B%0A%28%0A%20%20node%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20node%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%29%3B%0Aout%20center%3B %0A%3E%3B )
I want to replace my local GeoJSON file by the generated API but I'm getting this error : "Uncaught TypeError: (0 , Sq[a.type]) is not a function"
var sourceLayer = new ol.source.Vector({
url: 'generated_url',
format: new ol.format.GeoJSON()
});
Do you have any idea ?
The code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="ol/ol.css">
<link rel="stylesheet" href="ol/ol3-layerswitcher.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="ol/ol.js"></script>
<script src="ol/ol3-layerswitcher.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" />
<script src="sidebar/js/ol3-sidebar.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
//Fonds de carte
var layer1 = new ol.source.TileWMS({
url: '...',
params: {'LAYERS': '...', 'FORMAT': 'image/png'},
});
//other layers
//Pictogrammes
var piscine = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/sports-piscine.png'
}))
});
//Marqueurs
var sourceLayer = new ol.source.Vector({
url: '...piscines.json',
format: new ol.format.GeoJSON()
});
var vectorLayer = new ol.layer.Vector({
source: sourceLayer
});
var view = new ol.View({ //paramètres de la map
center: [xxx, xxx],
minZoom: 11,
maxZoom: 19,
zoom: 13
});
//Map
var map = new ol.Map({
layers: [new ol.layer.Group({
title: 'Menu1',
layers: [
new ol.layer.Tile({
title: 'layer1',
source: layer1,
type: 'base'
}),
new ol.layer.Tile({
title: 'layer2',
source: layer2,
type: 'base',
visible: false
})
]
}),
new ol.layer.Group({
title: 'Menu2',
layers: [
new ol.layer.Tile({
title: 'layer3',
source: layer3,
format: new ol.format.WFS(),
visible: false
})
]
}),
],
target: 'map',
view: view
});
map.addControl(vectorLayer);
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
map.addControl(new ol.control.LayerSwitcher());
var markers = function style(feature, resolution) {
if (feature.get('name')!=null) {
return piscine;
} else {
return null;
}
}
vectorLayer.setStyle(markers);
// Popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
autoPan: true,
offset: [0, -30]
});
map.addOverlay(popup);
var content_element = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
popup.setPosition(undefined);
closer.blur();
return false;
};
map.on('click', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
if(feature.get('name')!=null) {
var content = '<center><h2>' + feature.get('name') + '</h2></center>' + '<br>';
} else {
var content = '<h5>' + 'No informations' + '</h5>';
}
if(feature.get('addr:street')!=null) {
content += '<h5>' + '<i>Adress : </i>' + feature.get('addr:street') + '</h5>';
}
if(feature.get('phone')!=null) {
content += '<h5>' + '<i>Phone number : </i>' + feature.get('phone') + '</h5>';
}
if(feature.get('website')!=null) {
content += '<h5>' + '<i>Website : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
}
content_element.innerHTML = content;
popup.setPosition(coord);
}
});
map.on('pointermove', function(e) {
if (e.dragging) {
return;
};
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getViewport().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2018-05-11 09:26:04
The new ol.format.GeoJSON() can only fail.
It's simply because OverPass API does not return a GeoJSON but a JSON format slightly different to match more or less the OSM XML storage (details about this JSON format at http://overpass-api.de/output_formats.html#json )
You can find a demo doing the job you expect centered on the place you get the data.
You will see I've used an ol.loadingstrategy.all (where only one call is made to get the data) but I've also documented ol.loadingstrategy.bbox if you need to make call to Overpass API depending of the extent.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.