Image a map that shows city information on rollover/click

Design help General
1

I’d like to put an image of a map of a prefecture with each city clickable, that then shows the correct information for that city. And if there’s more than one club per prefecture, listing them.

This is what I am hoping to create:

Map 兵庫県なぎなた連盟練習会場
Map 兵庫県なぎなた連盟練習会場595×842 106 KB

Thanks for taking the time to read this.
Stay safe and enjoy!

2

That’s a fairly complex bit of UI. But the way I prefer to build it is;

  • Store the individual items in the CMS
  • Build CMS-driven modals or an information display panel
  • ID’d trigger button inside of each modal setup to trigger the adjacent modal
  • On hover/click on your map pin, your JS clicks the corresponding modal trigger to invoke it. This gives you a nice design separation and makes life much easier.

If your popups are simple, more like tooltips, and you want them to appear at the mouse position, you might need a different approach; I’d try TippyJS lib with its HTML content feature. You may be able to code dynamic tooltips that way, which contain your nested list of multiple clubs.

1 Like
3

Thank you for the detailed reply. I appreciate it very much.
As I expected, this is way beyond anything I am capable of doing.

How would a static version be created?

4

The same, you just wouldn’t have the benefit of the CMS for content admin.
At the core it’s just interactions, button triggers, and some form of popup.

1 Like
5

OK. I understand. Still out of my ability range but something to try for in the distant future.
Thanks for taking the time to reply to my questions. I appreciate all your help.
Stay safe and enjoy!