3

I have an image, which is a custom map for a fantasy world, and would like to be able to create a zoomable, interactive map with that image as the base, and the ability to add markers on the map.

Something like this: https://genshin-impact-map.appsample.com/#/

I have tried Zoomable, but it is great in terms of making an interactive map, but it doesn't allow adding markers, which is the feature I need (to see information about certain points in the map). I have also read this answer, but it doesn't ask about the interactive part of the map.

I am also not talking about generating a map, as I already have one. I want to make it interactive, and would really like to have that image to be hosted by them as well, if possible.

Is there any such tool?

| improve this question | |
  • Can you code ? .. – Mawg says reinstate Monica Oct 20 at 12:24
  • 1
    Hmm, we can use custom image with Google Maps? – justhalf Oct 22 at 2:49
  • 1
    Now Leaflet is an answer! You could put that as an answer =) And that SO question is exactly my question. Thanks for the links – justhalf Oct 23 at 7:39
  • 1
    Yes, I'm still waiting for other people to notice this question, though. And I am still trying to make it work first, hehe. Don't worry about the reps, I will accept it once I confirm it works for my purpose. – justhalf Oct 26 at 10:08
  • 1
    No problems. I saw form your rep on this site that you are new here. I was too lazy to check your other rep, but see that you certainly know how things work on S.E ;-) As you can see from my rep, I don't need the points; I just don't like unanswered questions :-) Good luck – Mawg says reinstate Monica Oct 26 at 10:13
2

You could do it with Open Street Maps and JavaScript and Leaflet. Leaflet is easy to learn and has extensive documentation. S.O has over 4k questions with the Leaflet tag, so you know that you can get good help there (I have).

The Leaflet layer providers may help.

And read Creating an Interactive World Map with Leaflet.js. It draws this map, and adds markers and tooltips. It also provides full source code to study and adapt.

enter image description here

enter image description here

The S.O question Leaflet js fictional map has an accepted and upvoted answer which will also help you. To save you reading it, it links to this (which seems to be broken, but ymmv) and to this part of the official Leaflet docuemtnation.

| improve this answer | |
  • 1
    Ok, the combination of the first (for tileLayer) and second (for CRS.Simple) tutorial work nicely! I had to add a few more plugins for my needs, but this is the right answer! The tutorial on interactive map requires photoshop plugin for creating the tiles, but I don't have Photoshop. Fortunately I made the map myself so I could also cut the maps myself. Hopefully in the future there will be scripts to help people cut their maps without Photoshop. – justhalf Oct 29 at 10:25
  • 1
    I am glad to hear that you managed it. Have fun :-) – Mawg says reinstate Monica Oct 29 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.