Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
oscarhunt

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

Question

11 answers to this question

Recommended Posts

  • 1
Posted (edited)

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

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...