|
Hi, I want to create a web app that has a form to search amenities/places by tags, and after entering a tag it would show on map one random place with that tag. I was told I could use for that leaflet.js and OpenStreetMap API, but as I am completely new to that, I have no idea where I should start. I've searched for tutorials but I couldn't find anything, except overpass seems to have the tags I am looking for. I have successfully added a leaflet map to my page and now I have no idea what to do next. Can anyone please point me to some tutorials or documents that would help me with getting started? |
|
Hi Firstly, your project is much more complicated that it looks like, there is a lot of data to process. And I don't really see the point, but anyway. To get the list of tags to choose from, I would ask Taginfo. Either through the API, or through downloads. Read carefully the limits of the API. If you limit yourself the amenity and place keys, you can do requests like these to find the associated values (doc) : Please handle the pagination, there is already 1417 results for this request (about place) and amenity is worse ! Once you have a specific tag selected comes the biggest problem, finding one random object with this tag. With Overpass you can limit the results set to 1, but only after having fully computed it. If you try to search for common tags in the whole world, you'll get timeouts. One solution could be to compute random (not too big) bounding boxes, and then use this kind of request. nwr means looks for node or ways or relations. You'll need to replace {{bbox}} by your computed bounding box (try not to look in the water). "out center" means to output a node, even if the result was a way or a relation. And 1 limits to the first result. You might want to get the full results, and randomize there. Be gentle with the overpass server, if you want to retry another bounding box when no results, wait a little between requests, or you'll get blocked. To display the results of your overpass query, have a look at this leaflet plugin (not tested myself). Hope this helps, good luck with your project. Thank you so much for your answer, I'll definitely look into this stuff :) After I've started to look into how to do that I had a feeling it would be really complicated but I can't really back out now, so I'm stuck with this project... But I have been thinking about how to make it a bit easier without changing the concept too much, so I've been wondering- would limiting the number of searchable tags and the area to just one town be possible and if yes would it make the task easier or just even more complicated? Thanks again :)
(23 Mar '20, 15:24)
Monilus98
Sure, a hand-curated list of tags (from the wiki for example, or from the top list of taginfo) will be easier to manage than 10000+ results, with some tags used only once in the whole world ! ;-) And if you limit your Overpass queries to a town, it should be okay for the server. See this request for the query in one town (Berlin). As before, you can limit the resulting set to 1, but it seems it will always be the same one, probably not what you want. I think that with the mentioned leaflet plugin, you can use the onSuccess callback to randomize and filter the results before display. I see that by default this plugin use the bbox to limit the query, you could use that instead of limiting to a town. For example you limit the minimum zoom of your map, so the displayed area will never be too big, and you run your request on the visible area. Thus users can change area themselves. Remember that sometimes there will be no results, you should not fail silently IMHO. I'd be curious to see the result of your work, if possible ! ;-) Regards.
(23 Mar '20, 18:18)
H_mlet
Thanks again! If I'll be able to finish it I'll show you as soon as it's done :)
(24 Mar '20, 19:29)
Monilus98
Hi again, this is a bit embarrassing after all this time, but as much as I understand the logic behind what I have to do, I actually have no idea how to use the overpass api. I get that I can run queries and get results in overpass turbo, but how do I do that on my own website? Do I install it on my server or somehow call in in the javascript file? I really am a total newbie to this so I'm sorry for this kind of silly question, but for some reason I can't find any tutorial that shows how to do it...
(25 Mar '20, 19:56)
Monilus98
1
Well, running an overpass query is just loading a specific URL. Overpass Turbo provides a web interfaces to test your queries and see the results. Once your query does what you want, you don't need it anymore. Just use the "Export -> Query -> compact" menu to get the corresponding URL. You said you used leaflet to display a map. As said before, you can use this plugin to load an Overpass query's result and display it on top of your map. Have a look at the onSuccess callback code, to rewrite it for your needs, namely selecting a random result. The doc says to use complicated thing like bower or npm to install the plugin, but I think that you just need to load the js and css for the dist folder on your page ! Digging into the leaflet doc, to understand how layers and plugins work, should prove useful. Good luck.
(25 Mar '20, 20:33)
H_mlet
|
