Interactive map problems

Hi all,

I am in desperate need of help or at least some thoughts on a design problem that I’m trying to solve with an interactive map…in as few words as I can manage:

  • I have to create an interactive map using software (the name of which I do not want to disclose in case coworkers see this thread – something that’s happened before!) similar to what Webflow allows content creators to do…basically I have to manually create the thing.

  • There are no alternatives to the above parameter. No Google map integration, no alternative UI pattern…nada.

  • The map is slated to have over a hundred location markers featured on in…each of which has to be clickable (to allow corresponding pop-up/s)

  • THE PROBLEM I’M HAVING MOST TROUBLE WITH: A lot of the location markers are slated to be in very very close proximity to one another, making it pretty much impossible to select as desired.

If convenient, please spare a moment to give your thoughts on the short little gif-based demo of the solution that I have in mind


Basically, the interaction is as follows:
Hover over one of the grid squares long enough, and a lightbox-like enlargement of the section of the map in the hovered-square, with the featured cluster of map markers, appears…hover off and the lightbox disappears again until the user hovers over it again.

What happens to the lightbox’ed enlargement when the user clicks one of the location markers featured within is beside the point for now.

Any help will be huuuugely appreciated!

Many thanks in advance!

…one thing missing from the mocked up demo is visual feedback that shows how long it takes before the enlarged lightbox to get triggered…i was thinking about having the thick black border change color gradually from the time that a square is first hovered until the lightbox is triggered.

How do you do this on touch device?

Similar pattern I’ve seen around opens a dialog from the side with a list, while also zooming closer to the tapped/selected area. I think GMaps does this in a way, while showing just the list if the screen is too small.

Don’t forget to test even this simple prototype with real users if you can!

Funny enough, on mobile, we were going to try something similar to what you mentioned with a plain list in a dialogue.

Thanks for the helping thoughts!