根据地图缩放级别在传单地图上设置边界

Question

I am working on a forked OSM/leaflet/overpass API application which has its own max bounds declared. That way, any request to Overpass API is restricted to bounds declared

var mapBounds = { south: 50.8025, west: 0.3724, north: 50.8785, east: 0.5290 };
var LBounds = L.latLngBounds([mapBounds.south, mapBounds.west], [mapBounds.north, mapBounds.east]);

The query to Overpass API is done

...
    else queryBbox += '[bbox:' + [mapBounds.south, mapBounds.west, mapBounds.north, mapBounds.east].join(',') + ']';
...

Need to change the bounding box (mapBounds) to allow to navigate worldwide, and set them as bbox, so requests to Overpass API are for that map area only.

so i've done

else queryBbox += '[bbox:' + map.getBounds().toBBoxString() + ']';

But I can't make it work .. Overpass returns no results

addition:

meanwhile i got closer, i tried to see what happens onMoveEnd

onMoveEnd: function () {
    console.log(queryBbox);

console record seems to return coordinates:

[out:json][bbox:0.38512229919433594,50.82990293001779,0.549917221069336,50.86404449323755];(nwr[tourism=museum];);out tags center qt 250;

But they are reversed

for comparison: this is how the original query looks like

[out:json][bbox:50.8025,0.3724,50.8785,0.529];(nwr[tourism=museum];);out tags center qt 250;

Answer 1

Your url is wrong, it should look like that: https://overpass-api.de/api/interpreter?data=[out:json];out%20skel%20qt;node[tourism=attraction];&bbox=0.427393913269043,50.84410451978967,0.5097913742065431,50.85710981721644 ;

Do you build the url by your self or over a library? If you use a library, look into if you have defined some wrong.

To create a own request create the url and then make a http request:

function getOverpassData(){
    var bbox = map.getBounds().toBBoxString();
    var _url = "https://overpass-api.de/api/interpreter?data=[out:json];out%20skel%20qt;node[tourism=attraction];";

    var bboxurl = _url+"&bbox="+bbox;
    console.log(bboxurl);
    // And then use $.ajax(bboxurl) or the normal js http request to get data.
}

Answer 2

i was able to fix my issue while reading (closer) to Leaflet's documentation.

toBBoxString() Returns a string with bounding box coordinates in a 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' format. Useful for sending requests to web services that return geo data.

https://leafletjs.com/reference-1.6.0.html#latlngbounds-tobboxstring

But the fact is, that Overpass API does not return responses in GeoJSON format ... so my hack with toBBoxString() was not suitable , aka that's why i got false responses. Instead, this one worked fine, all requests are now successful

else queryBbox += '[bbox:' + map.getBounds().getSouth() +',' + map.getBounds().getWest() +',' + map.getBounds().getNorth() +',' + map.getBounds().getEast() + ']';

I hope that someone might have a more elegant solution before i vote for mine