How can i display modal information with image hotspots on a map?

Hey guys, I need help. My client have real estate bussiness. He has house plot layout photo. Now he want me to show detail when user click on particular house layout. so how can i pull this off?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Screenshot 2023-09-05 190820

There are a two main parts needed to set that up.

You need your image to be clickable. That could mean converting it to an SVG with links, or you might overlay links elements on top of your map image element. Those are generally the two most popular ways today.

Make sure to pick an approach that will work well on phones. I’m tempted to suggest that you recreate and rotate your image 90 deg clockwise so that it is taller and narrower, making the lots more fingertip sized.

Then you need a CMS driven collection of modals that you can invoke when those links are clicked. This part is a bit trickier, but the CMS-driven modal setup is the part where most people get confused.

Here’s a guide to help you get started on that;

For the click invocation, you’ll write some custom js to handle your click and find and click a hidden modal-trigger button that is also in the collection list.

1 Like

Thanks but i want to create pop up for showing house. is it possible?

It doesn’t matter what content you are showing.

1 Like