I’m making a Google Maps-like application for a course at my Uni (not something complex, it should load the map of a city for example, not the whole world). The map can have many layers, including markers (restaurants, hospitals, etc.)
The problem is that when you have many points and you zoom out the map it doesn’t look right. At this zoom level only some points need to be visible (and at the maximum map size, all points).
The question is: how can you determine which points should be visible for a specified zoom level?
Because I have implemented a PR Quadtree to speed up rendering I thought that I could define some “high-priority” markers (that are always visible, defined in the map editor) and put them in a queue. At each step a marker is removed from the queue and all it’s neighbors that are at least D units away (D depends on the zoom levels) are chosen and inserted in the queue, and so on.
Is there any better way than the algorithm I thought of?
Thanks in advance!
I had a similar problem and you cannot avoid having overlapped icons regardless the method to mark some icons as high-priority.
What I did(it might not be easy to apply in your case – in my case the map was rendered in a desktop application, with much more control above the rendering process) was to sort based on priority, and paint only markers which are not overlapping – showing also a message like “XXX overlapping markers removed”. This way the user doesn’t become overwhelmed with information and he still sees the most important information.
I hope this helps.