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 / ?!

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

});

FULL EXAMPLE:

var attr_osm = 'Map data &copy; <a href="/">OpenStreetMap</a> contributors',
attr_overpass = 'POI via <a href="/">Overpass API</a>';
var osm = new L.TileLayer('http://{s}.tile.openstreetmap/{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);

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/">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/{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);

• javascript
• leaflet
• openstreetmap
• geojson
• overpass-api

• Can you see any HTTP requests being made to Overpass in your browser console? What is the response? – kes Commented Sep 7, 2016 at 13:20
• Are you able to publish a full code sample @Khan that we could use to recreate your issue? For example are you adding the opl to the map using map.addLayer(opl) after creating the new layer? – kes Commented Sep 7, 2016 at 13:30
• please make question self contained, avoidmusing links called this and that. – Martijn Scheffer Commented Apr 22, 2023 at 18:34

2 Answers 2

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 remended 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}}).

I solved my problem with another plugin .

I can use the overpass-turbo query:

var attr_osm = 'Map data &copy; <a href="http://openstreetmap/">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/{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.