How to query Overpass area through leaflet?

Question

I have a OpenstreetMap with leaflet. I'm using this Plugin for leaflet to query with Overpass.

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


});

But my Map is showing nothing when used with the Plugin.

What is wrong?

Note: My query is working based on this.

EDIT:

This query is working with Plugin but not on 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);

Answer 1

Your zoom level is much too low, you're basically retrieving data for a large part of the earth. As a consequence your Overpass query times out and you won't get any result.

Change

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

to

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

In addition I recommended to:

• add a [timeout:x] parameter to limit the runtime of your query
• add a maximum number of object you want to query, e.g. out 100; for max. 100 nodes.

Also, you cannot use (BBOX) in overpass turbo. The correct syntax for overpass turbo would be ({{bbox}}).

Answer 2

I solved my problem with another plugin .

I can use the overpass-turbo query:

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 custom circle on 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 with this to GeoJson. It is possible to draw ways and area directly.