I have created an interactive map on my site. It allows the user to hover over a country and then it displays the country name. Currently it is changing name using JS in the page body and a custom attribute.
Firstly I’d also like it to show the relevant countries flag next to the name as you switch between different countries. I’m not sure how to link a CMS item into this.
Second, I would like to be able to click on a country on the map and it takes me to that countries page.
I might have tried a different approach to this, where the SVGs themselves are stored in the CMS. That way everything is easily connected and aspects like country name and flag can be centrally managed.
But your approach is quite clean.
Your setup will allow both of the changes you want quite easily.
For your country flag, I’d probably;
add the image adjacent to your label
have a default image ( or make it hidden ) when no country is selected
add a custom attribute to all of your current flag images, e.g. flag-mage={{ Name }} to automatically apply your country name from the CMS. I haven’t checked, you’ll need to verify these match exactly what you have as the attribute on your maps.
modify your JS so that when the country name is changed, you also find the correct flag image in the collection list below, grab the URL and set it to your current-country flag
Since your countries are already separate SVG’s wrapped in links, you can easily set those links in the designer. Alternatively you can do that using script if you want them to pick up from the collection list below.
Alternatively you can try redesigning your maps area so that it’s collection-list-based as well, which automates the link and name-label for you.
The main trick there is that you’re EM-positioning each country on the map. You’ll need to bring that style into the CMS as a bit of custom style code .