Geek Answers Handbook

How to request a leaflet skip area?

I have an OpenstreetMap with a leaflet . I am using this Flyer Plugin for request using Overpass.

 var opl = new L.OverPassLayer({ query: "(area['name'='Roma']; node(area)['amenity'='drinking_water']);out;", });

But my map shows nothing when used with the plugin.

What's wrong?

Note. My query works based on this .

EDIT:

This request works with the plugin, but not at http://overpass-turbo.eu/ ?!

 var opl = new L.OverPassLayer({ query: "(node(BBOX)['amenity'='drinking_water'];);out;",

});

FULL EXAMPLE:

 var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors', attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>'; var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')}); var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(49.592041, 8.648164),2); //OverPassAPI overlay var opl = new L.OverPassLayer({ query: "(node(BBOX)['amenity'='drinking_water'];);out;", }); map.addLayer(opl);
+5
source share
2 answers

I solved the problem with another plugin .

I can use the overpass-turbo request:

 var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors', attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>'; var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')}); var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(43.592041,2.648164),14); var opl = new L.OverPassLayer({ query: "node[amenity=drinking_water]({{bbox}});out;",})", }); map.addLayer(opl);

or with a custom circle on the map

 var opl = new L.OverPassLayer({ query: "node[amenity=drinking_water]({{bbox}});out;",})", onSuccess: function(data) { for(i=0;i<data.elements.length;i++) { e = data.elements[i]; var pos = new L.LatLng(e.lat, e.lon); var color = 'green'; L.circle(pos, 5, { color: color, fillColor: '#fa3', fillOpacity: 1, }).addTo(map); } }, }); map.addLayer(opl);

You can even convert the data received from Overpass, from this to GeoJson. You can draw paths and an area directly.

0
source

The zoom level is too low, you basically retrieve data for most of the earth. As a result, your Overpass request will expire and you will not receive any result.

Edit

new L.LatLng(49.592041, 8.648164),2)

to

new L.LatLng(49.592041, 8.648164),14)

In addition, I recommended:

  • add the [timeout:x] parameter to limit the execution time of your request
  • add the maximum number of objects you want to request, for example. out 100; for max. 100 knots.

In addition, you cannot use (BBOX) in a turbocharger. The correct syntax for turbocharging will be ({{bbox}}) .

+2
source

More articles:


All Articles