Jump to content

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

Recommended Posts

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

Link to comment
  • 5 months later...

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 by allisontheresa
Link to comment
  • 1 month later...

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 by JohnWorsham
Link to comment
  • 1 month later...

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 by Duglessxott
Link to comment

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:

teardrop_insertion_point_example.jpg.d6d2cd1cea9f8dc62dc18df74846f099.jpg

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:

embed_block_example.jpg.6b99f3c3797e6c355750b8e94654b1ed.jpg

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:

brackets_example.jpg.4dc62d7c13372287ef0457329d1174b8.jpg

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

code_edit_control_example.jpg.e52a6833b9a522eab096ab1460f0e77b.jpg

That's where I pasted my SVG code.

Hope that clarifies things.

Link to comment
  • 11 months later...
  • 8 months later...

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.

Link to comment
  • 3 months later...

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. 

image.png.4d40381c1b2aed2be2d3273ff1596afc.png

image.png.3d0f60458a1fc5ac367aff8f3e06e60f.png

image.png.bc58d5aa8025ffad3dcc7372af1f096a.png

image.png.c50acbd5ece337483b528bcf02be968f.png

 

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)

image.png.0db56f67544b26e741dfc2060dc1adf0.png

 

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).

image.png.844176f75208cf9c104de22585e0df92.png

 

image.png.00e1a2337d65999cd8becb0ae6331620.png

Code: 

image.png.cdf687b71e1d127a8f12a229d0aa634a.png

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. 

image.png.82b38aaacf9ea6fc2957e5445bd961b9.png

image.png.9f591518550ed4645078c96af5c38845.png

image.png.95cb51b3bfc608c122812f2764741291.png

 

 

 

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

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

image.png.6abc0eb906266e981c1e99b21cc52060.png

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.

image.png.7d7671a39ca5dc71714a33cb5a0a6762.png

 

Best,

Matt

Link to comment
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.