I currently have a travel/photo website where I have a world map with pins. The user clicks on a pin and it loads a local map below the world map with additional pins that take the user to the trip page. Unfortunately many people don’t scroll down and, to be honest, it isn’t optimal for smaller screens especially horizontal ones. Here is the link to the main page showing this:
https://jdhs-place.com
I would like to change the behavior to instead zoom in the local map on top of the world map so the user doesn’t have to search for it. Here is a link to a short video showing the behavior I am looking to create.
Currently I am using Foundry and the pin capability is with Points 2. The local maps are drawn with Peek-a-boo but I don’t think that it can be used this way. What I do need is a way to zoom in the local map and have the user be able to click on a pin on the local map to take them to the requested travel page. If clicking outside of the local map, it should close the local map and return to the normal world map.
Any suggestions of stacks/methods to use (will also want to update to the upcoming new version of Rapid Weaver so it would be a plus for any solution to have a future looking roadmap with that in mind.
I would like to clarify this request. My maps are all pre-rendored images so I don’t need any mapping/cartography capabilities.
What I am looking for specifically is the ability to overlay a new image on top of a prior image. The new image should be clickable supporting other stack functionality (such as Points 2).
Unfortunately the suggestion of the stack cartographer had some excellent map functionality which I don’t need.
Thanks for those who attempted to help me find a solution. While none of the suggestions worked, they did get me thinking about the Points 2 stack that I am already using for pins on my map image. Turns out that Points 2 can trigger several different stack options upon a point click. Going through all of them (unfortunately I could not try the Foundation optoins as I am using Foundry), I did find just one that it turns out works perfectly. It is PopDrop.
PopDrop has a modal display option that opens a modal box. How this works for me is that I can put any stack within the modal box so I am able to populate it with another map image within another Points 2 stack. On top of that, it has options to allow it to fade the background (making it front and center in the user’s eyes) and has a fade timer that allows it to fade in gracefully.
I will be updating my website to use it on the world view home page once I also get an update to another great stack that will allow me to preload images that will smooth out the transistions from one to another without the annoying internet loading delays.
