How do I get a list of POI’s that are on a map that’s being displayed? Which should consider the lat/lon bounds of the viewport, and very importantly: the zoom level.
Basically what I want is a list of lat/lon pairs and basic information for all the little icons that I see being drawn in the map tiles, so I can give them a hover effect (like a hand-cursor that screams “click me” :)) and a popup.
(then I can finally build a not-Google My Maps application that actually works)
Hello Thanatica to the world of OSM based maps!
Some questions to give you a better help:
Are your POIs really a “private” list of coordinates etc, or do you use objects that are already in the main OSM database?
and:
Do you want a general map and POI display in a web browser, or a special solution for mobile devices, maybe with offline usage?
Generally see some example sites:
http://osm24.eu … (zoom in and wait to see many POIs)
https://www.openstreetmap.org/user/marczoutendijk/diary/28316
http://www.openlinkmap.org
to name but a few … see the OSM wiki about http://wiki.openstreetmap.org/wiki/List_of_OSM-based_services to have more examples.
Finally you have to choose a framework to display both: the OSM based map tiles and your POIs as an overlay.
See the OSM wiki about OpenLayers and Leaflet … on their own websites there are dozens of examples, also how to display own POIs, I think.
First things first, I want to display POI’s from the general OSM database.
All POi’s that are drawn in the map tiles, I want to make them interactive. So I’ll need to be able to retrieve a list, telling a service “give me all POI’s for bounds X1,X2,Y1,Y2 at zoom level Z” and I’ll take care of a script that handles them. I’m not exactly novice at this, so don’t worry about the actual implementation.
So, at this time at least, no special solution for mobile, no offline support needed. Just a map in a browser that’s online: user navigates to an area, map becomes idle: I retrieve whatever POI’s are drawn in the tiles as a JSON array or something and work my magic.
As for OpenLayers or Leaflet: no worries. I have some experience with OpenLayers, so I think I’ll go with that. I’m not actually as new as my forum registration date would lead to expect 
final note: when I say POI’s, I mean things like hotels, shops, hospitals, train stations, banks, restaurants, etc. Basically anything that is (or can be) an icon. Maybe even fountains and toilets, because why not 
So take a look that the second link that stephan75 provided. The solution of Marc Zoutendijk uses overpass queries to retrieve POIs within the current bbox.
This solution works when you do not want to set up a server on your own.
Interesting idea to use Overpass. The thing is, as with all things I have tried so far (which even includes Google Places API), these services make no distinction between being zoomed in or out. In other words, it looks as though Overpass too, is incapable of returning fewer POI’s at a lower zoom level. The result is an incredible amount of data being pulled, and incredble POI density, both of which are nothing but a burden to my visitors.
As for OSM24.eu, it doesn’t work. I’m getting erroneous requests being performed to Overpass. Too bad.
As for Openlinkmap, the same problem. It draws the “clickable circles” perfectly fine, but it does so at every zoom level. So when the map tiles show no POI icon, a clickable circle is still there, and I need the tiles and POI data to match up perfectly somehow.
Then you should include a condition in your used framework that NO POIs are displayed if zoomlevel is to low.
No, that’s not what I mean. All or nothing is not really an option.
Sure, below zoom=7 or so, no POI’s would be visible. But at a medium zoom level, some POI’s are visible, and some are not. More POI’s become visible the further you zoom in (just try it anywhere in any city).
Now, something must determine, or must have determined, when to draw which POI’s, possibly similar to the decision when to draw which roads. I need that too. But I can’t just pull in all possible POI’s for what might be a radius of 10 kilometers in a densily facilitated city - the number of POI’s might be in the thousands and sifting them out takes way too much resources, let alone downloading all that data. I need some sort of “filter by zoom level” to be done at the server side. Clearly this is possible, as proven by how map tiles are enriched more and more the further you zoom in.
So, exactly like on the Google Maps website.
Perhaps it’s worth having a look at some of the “vector tile” presentations from previous SOTMs? That might provide some of what you want (though I’m not sure how mature the various options are yet).
The “thing” that decides this on osm.org, is the style, see OpenStreetMap Carto Github
But are you sure you want to follow the same rules ?
I created a simple map with umap for dog-related stuff. Some of the features (garbage cans) only become visible when you zoom in more. But I decided what to show from which zoom level on. You might have different needs.
So you can do different Overpass queries depending on the zoom level, but that’s something your app has to do.
Some websites (e.g. Check the monuments show counters of POIs on high level, the individual POIs only become visible/selectable when you zoom in. This is a feature of the JavaScript library (Leaflet or OpenLayers).
If I am not wrong, this feature is calles POI clustering or Marker clustering … at least yo can have this in leaflet.
I know what clustering is. I’ve done it in Google Maps a few times, but it’s not what I want.
Please just go to any map and navigate to any sizable city in the world. Doesn’t even have to be OSM. Now zoom in and out. POI’s will dissppear on zooming out and reappear when zooming in. The are not being clustered. Only the more important ones (supposedly) remain when zooming out. If a POI service would also return a “priority” kind of field for each POI, then all I need is for it to sort by priority and limit to a certin priority based on the currect zoom level.
For the uninitiated: clustering is “grouping” points together into a single one. Usually a cluster shows a number on it that corresponds to the number of points contained within it. When clicking one, it zooms in to display the points separately.
So okay, I control what’s displayed using a form of CSS. That’s great. But by having done that, I still don’t know how to retrieve which POI’s have actually been drawn on a particular set of tiles.
I’ve found vector tiles to be waaaaaay too slow to work with. Google has done it too, making their My Maps between 20 and 30 times slower than the classic maps. I seriously don’t want OSM to become slow like that.
On the flip side, yes, SVG tiles might actually provide meaningful information in them. That is, as long as they are somehow machine-recognizable as such in the tiles. An interesting idea, but I’d first like to explore a solution that involved PNG tiles and a JSON-based service for POI’s.