How can I add a map of my premises with different areas that people can click and learn more about the different services I offer in my premises

So, I want to add a map like this one: https://www.childrensplayvillage.co.uk/play-areas/ labelled 'village map' whereby people can click on different areas of my premises which takes them to another page telling them about that particular area. Thanks very much for any help!

Edited August 19, 2019 by oscarhunt
Initial Revision

What you'll want to do is generate what is called an Image Map. This is essentially an image that has areas that are clickable and will redirect a user to a URL/address.

You should be able to use a service like this: https://www.image-map.net/ ... to upload an image and define the image map. This will output some HTML (or code) that you can then embed into the website.

I hope this helps!

Thanks,AndrewDCODE GROUP

Thanks! Is this compatible with Squarespace?Thanks, Luca

It should be - it should simply output HTML that you can add to a code block. But see how you go - happy to help if you get stuck.

Thanks, Andrew DCODE GROUP

Ok, thanks so much. So do I have to just copy the html into a code block or will I have to add a photo?

Thanks so much

Sorry for my late response!

Add the code; but the image will need to be uploaded via Squarespace to ensure its visible online/

Thanks, Andrew DCODE GROUP

Hello! I've been researching this issue and have had some trouble myself. This thread seemed like the one closest to what I needed. 

When I go to imbed my image mapped code, the image appears, but the links don't. The image is uploaded and sourced on my site and uploaded to the image-map.net to create the map. 

Here's the code I'm using. 

<img src="http://allisontheresa.com/s/harry-styles-mandala.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="link 1" title="link 1" href="https://hstyles.co.uk/" coords="1326,1331,1410,1419" shape="rect">
    <area target="_blank" alt="butterflies" title="butterflies" href="https://hstyles.co.uk/" coords="748,706,54" shape="circle">
</map>

 

And here's the live page

 

Hoping for some help! Thanks!

Edited January 31, 2020 by allisontheresa

I used www.image-map.net to generate the map code. This took a lot of figuring out to get this to work in Squarespace but I finally discovered how to do it. You must put the code in an Embed block (not a Code block). Click Edit Embed block then click the </> option to the right so you can paste your code into it. My code looks like this:

<div>
    <img class="marginauto" src="https://static1.squarespace.com/static/5d0bcba6c62d2d000161a2dd/t/5e6f936314ecd33f62bb2bfb/1584370534064/LGMLogo.png 1000w" usemap="#image-map" />

</div>

<style>
.marginauto {
    margin: 0px auto 0px;
    display: block;
}
</style>

<map name="image-map">
    <area target="" alt="" title="" href="https://www.link1.com" coords="192,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link2.com" coords="387,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link3.com" coords="600,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link4.com" coords="805,399,75" shape="circle">
</map>

 

This defines 4 circular areas that are clickable on the image (the URLs above are dummy urls for this illustration - replace with your own)

It works fine, but the image is mostly fixed in size and position. You can adjust it a little with a spacer block.

Hope this helps.

 

Edited March 18, 2020 by JohnWorsham

This was a great first start - especially the knowledge about using Embed and putting your code into the </> block. As a brand-new Squarespace user, just figuring out where to start a custom one-off - that was golden.

Unfortunately as soon as any scaling was applied to my image map (which can happen a surprising number of ways), the tediously built hotspots were not scaled. My map hotspots became non-sensical. Hence it was pretty fragile.

I stumbled across a solution recommended by one respondent on StackOverflow using an SVG wrapper around an image, with embedded anchor tags, themselves with embedded rectangles. This worked pretty well, turns out, and it scales for every reason I could throw at it in tests.

My code looks approximately like this:

<style>
    div.mymap {
        /* style the bounding box */
        padding: 25px;
        border-style: solid;
        border-width: 3px;
        border-color: #2A2829;
        background-color: #E0E0DB;
    }
</style>
<div class="mymap">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 817 536">
        <image width="817" height="536" xlink:href="https://images.squarespace-cdn.com/content/v1/myimagehere.jpg"></image>
        <style>
        /* style the link behavior */
        @namespace svg url(http://www.w3.org/2000/svg);
            svg|a:hover {
              outline: solid 5px #adadad;
            }
            svg|a:active {
              outline: solid 5px #2A2829;
            }
        </style>
        <a xlink:href="https://link1.html" target="_blank">
            <rect x="0" y="95" fill="#fff" opacity="0" width="126" height="172"></rect>
        </a>
        <a xlink:href="https://link2.html" target="_blank">
            <rect x="142" y="55" fill="#fff" opacity="0" width="125" height="174"></rect>
        </a>
        <a xlink:href="https://link3.html" target="_blank">
            <rect x="421" y="0" fill="#fff" opacity="0" width="115" height="170"></rect>
        </a>
      	<!-- etc -->
     </svg>
</div>

You replace the <image xlink:href="foo"> attribute with your image URL, and I used the trick mentioned elsewhere in Squarespace support to find an image on my site and use my browser to copy the image address to their cdn hosted location.

Works like a charm. That said:

• With the SVG standard you have to accept you're locking out a bunch of older browsers (don't know the cut-off, but imagine the usual IE chestnuts, etc). I personally don't mind the tradeoff for the 21st century and easier maintenance.
• The location of the image into Squarespace CDN feels fragile - I don't have any guarantee that Squarespace wouldn't move my image to another location, but so far, the link is stable
• Creating the list of anchors can be tedious - but I found (at the SO question page) https://imagemapper.noc.io/ to do the bulk of the work.
• By experimentation I learned that a click is mapped to a target rectangle by traversing your list from bottom-to-top - so you should be sure that any overlapping elements of your map are ordered so that an element appearing in front of another follows the element it overlaps, in the list. This is the reverse of how typical image editors and even HTML <map> elements operate (their precedence order is typically top-to-bottom, like looking down at a stack of pancakes) and is probably reverse of how you might think about it.
• I never figured out how to manage a bounded rectangle following my pointer, applied as a .hover rule, to hint the current target underneath the pointer. Tried CSS on rect, on a, and on cascades from svg, but no luck. I'm beginning to think this would require special SVG, and if anyone knows the answer, I'd appreciate a post here.
  • Figured it out - it was all here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a - The <a> anchor in <svg> namespace is not the exact same thing as the <a> anchor in HTML, although conceptually it does the same thing. You need to define the namespace, then build CSS using the namespace to identify the anchor type you wish to style. Added to example above.

Here's the live site: https://wreckrc.com/press. Drag around the corner of your browser window to rescale the image, and notice the map still scales with it. This was the winner for me.

Edited May 15, 2020 by Duglessxott

@JohnWorsham how do you make an embed code block? 

@Duglessxott I am sorry but I am still having trouble. I am not understanding how to use the embed code feature. 

Hi @Frankiealch,

So, my expertise with Squarespace runs all of two weeks, just caveat emptor.

On any page in Edit mode, if you place your pointer near some existing element in a template so you get that "insertion bar" - or whatever it's called - it generally looks like a line with a teardrop on the left side, and here's an example from my page:

Click that thing, and you get a popup list of content block types. The Embed Block is one of the Basic types in the first group:

Select that, you should get a dialog that looks like the below, with an "</>" control (it turns out) in what otherwise looks like a URL configuration:

Click that "</>" and you get a place where you can paste your embedded code, looks like this:

That's where I pasted my SVG code.

Hope that clarifies things.

I've been working on this all day and finally found this site- it generated and svg for me and it works great and is responsive! https://imagemapper.noc.io

 

(Dont forget to add your image to custom files in Squarespace to generate the image url.)

Would anyone know how to do this for a Banner for a Bedford template? I'm trying to make one part clickable. Is this even possible? It looks like everyone is using the embed code block but I can't do that with a banner. Please help!

Here's our website https://www.orangefrazer.com/

I want to make the picture frame off the the left clickable but since it's a banner I'm not sure how to apply code.

I was going to use https://imagemapper.noc.io/#/  or https://zaneray.com/responsive-image-map/ to create the mapped image code but I don't have the link for it ready so I was going to create it after I made the page.

I'm hoping someone could help me figure this out how I would apply the code to the banner and if it's even possible. Thank you.

Hello, I was trying to accomplish something similar and wanted to share my steps. Hopefully this will be helpful to someone in the future. 

I was trying to build an interactive floor plan for an office space where selections of individual rooms on the full map would trigger a lightbox pop up with more room information. 

1) First I purchased and installed the lightbox anything plugin. The plugin is really worth the cost and makes lightbox popups very easy. The instructions that come with the plugin are very easy to follow. 

2) To make the final image map responsive I used some java script I downloaded on GitHub. If you hit go to file on the page you will want to download the js/imageMapResizer.js

https://github.com/davidjbradshaw/image-map-resizer

3) I then added the java script to my site. Hit the plus icon next to Not Linked in the pages section. Scroll to the bottom of the popup and select Link. Where it says create new link select the gear icon. In the link editor select file and then upload the java script you downloaded there. Be sure to make note of the exact name it is uploaded as. 

 

4) On my site I added a series of not linked pages to store the map image I wanted to use as well as all the popups. This will make more sense if you use the lightbox anything plugin as this is the typical setup to store these. For my example "Floor One Map Hold" was the image of the full floorplan I was using. Each room that I wanted to show up in the lightbox had its own page and number ex (floor 4)

 

5) To generate my html map I used the below site. It takes a little messing around with but the instructions on the site can help. 

https://image-map.weebly.com/

 

6) Below is the code that it generated for my project. I highlighted some of the key points. Please note I removed my URL and added in the text ImageURLHere

ImageURLHere - This is where you paste the url link for the full image you mapped. In my setup I had added the full floor plan image I was using in that Floor One Map Hold from the above step. So I opened that page in squarespace right clicked on the image and copied the address. You then paste that URL where I highlighted in the code.

#lightbox_floor2 - this is an example of the links that you add to the html map to get the desired pages or images to open. As I was using the lightbox anything plugin and wanted my images to show up as a lightbox I have that prefix #lightbox_(pagename). But you can use any page link from your site there. 

/s/ImageMapResizermin.js - You will need to add in the source for the javascript code that was uploaded to your site in earlier steps. To find the link to add to this highlighted section go back to where you uploaded the code as shown in step 3. Click on the javascript code and hit save on the top left. The link will then appear for you to copy (see image references below).

 

Code: 

7) Now you are ready to embed this on your site. Open your desired page and hit the plus button to add a new item and choose embed. Editing the embed box you will get the content popup, select the </> and add your code. Save and you should be all set. 

 

 

 

Here is an example of how it worked on my site. 

This is a snippet of part of my full floor plan.

If I click on the section labled 2 I get a lightbox popup with more information on that room and I can x out of the popup to select from the full map again.

 

Best,

Matt

On 4/20/2022 at 10:02 AM, Matt143 said:

Code: 

These instructions worked really well for me, but I had to adjust that last line of code to get the responsive script working. I changed it to:

<script>$('map').imageMapResize();</script>

Folks for an alternate/more modern technique, which @Duglessxott mentions, that doesn't use JavaScript please see the following discussions.

 

Edited May 25, 2022 by creedon

Thanks for the tip @creedon. I've switched over and it's good.