Looking for a resource / tutorial on how to add interactive maps on website.
I am trying to add a section where if u click on a country, the map interacts, however with a simple png, i cant do much, where can i find svg or interactive maps for free to add it in my website? Something like in the image beside. Or maybe when I hover over a country name, the country should highlight.
14 Replies
Leaflet.js is really easy to use and has lots of tutorials available. I had never used it before and had a working map with interactive popups working within an hour. If you get stuck ChatGPT knows it really well so you can ask it for help
Thanks mate
So far its good and easy to use. Also theres a lot of control. I hope I achieve what I am looking for. Thanks once again. Either way I am enjoying it as its my first time adding map to a website
I found it to be really nice to work with and you’re able to get something so slick that works really well on mobile straight out of the box. Don’t forget to donate if you’re able to, as the dev behind it has put a huge amount of work into it
Sure man, will keep this in mind
You can also use image maps with your png but I'm sure there's much easier tools these days
thats what i was doing, but resizing is tough, because then i have to resize all the points/markers and adjust their position as well
Yeah it's a chore , just wanted to make sure you were aware of the option
You could also use an SVG with all the regions/countries defined as separate paths
thought of this, where can i find one such svg though?
https://simplemaps.com/resources/svg-world (for example)
Or use and image trace on your png and adjust
As needed
A map I did for to help somebody else a few months ago.
This uses an SVG and links the continents with their buttons using
:has();
https://codepen.io/cbolson/pen/MWRLoWbWell thanks for your suggestions @clevermissfox @Chris . I got what I was looking for using leaflet
@Jono Lewarne thanks once again