Building an interactive image-based map

Hi all,

I'd like to build a pretty simple image-based map, with information layers that can be turned on and off, as you would in a Photoshop doc, or interactive PDF. I don't want to do this with a Google map, because the map is for a fictionalized place. Example attached to this post: just imagine turning off the blue stars and turning on the orange ones.

I have the base map layer as a PSD. I'd like to be able to toggle layers (with place-names) on top of it.

I'm looking at different ways to do it. Flash seems like a waste of time, and I'm hoping it can be done just with CSS, and no JS, as the latter's a bit beyond me.

Looking around, this seems like it might be a good working model.

An example of what I'm NOT trying to do. This would muddy the information, rather than clarify it.

Can anyone recommend a tutorial? Thanks!

Adam

  • Patrick

    Hey there @Adam

    I hope you had a great weekend!

    If your images are used as background images, you can cause a different image to appear when hovering over the container with the mouse, like so:

    div.your-class { background-image: url("image1.png");
    div.your-class:hover { background-image: url("image2.png");

    If you want to change the image only when clicked however, you'd want to use jquery. But it's really not that complicated. Here's a working example:
    http://jsfiddle.net/8hGWZ/2/

    Simply add the code to the template where you have your image map, and wrap it in script tags like so:

    <script type="text/javascript">
    ...code here...
    </script>

    I hope this helps! And thanks for being a member :slight_smile:

  • Adam

    Hey @Patrick Cohen. Good to hear from you, I think it's been a while. These are both examples of what I don't want, unfortunately.

    Let me know if this clarifies what I'm after:

    Imagine a PSD with the top image above (with the blue stars). Each star represents a chapter in a book, which takes place in a location on the map.

    The blue stars are on a layer, which can be toggled on and off. On another layer are orange stars, in other locations, which can also be toggled on and off. I'd like to make as many as 5 layers, which can all be toggled on and off, so the viewer can see how different chapters overlap one another—without the whole thing getting outrageously over-populated.

    That a better description? Thanks!

    (Also, I just fixed the links in my original post, which were inexplicably without "http" at the start.)

  • Patrick

    Hi again @Adam

    I hope you are well today!

    Yep, that much clearer now, thanks. :slight_smile:

    I guess the easiest way would be to ensure that your images have transparent backgrounds, then layer them with a jquery toggle as in this example:
    http://jsfiddle.net/EGNLz/3/

    To add as many layers as you need, simply copy/paste this part of the toggle function, and edit the IDs:

    $("#button1").click(function(){
        $("#dot1").toggle();
      });
  • Patrick

    Hi again @Adam

    Just wanted to let you know that I had a bit of fun this evening playing around with your idea. :slight_smile:

    I was thinking that maybe your book is gonna be online somewhere. So I took the toggle idea from my post above and gave it a more subtle fade effect on the toggle. Then combined it with sliced overlays and image mapping so each star can be linked to the corresponding book chapters.

    I've linked all the stars to the same page just to give you an idea of how it works. Here's a demo of the result:
    http://rockysroad.info/book-map/

    I also found a really cool little online tool for creating image maps, making that just too easy:
    http://www.maschek.hu/imagemap/

    Here's the amended code to add to functions.php or a custom template. You'll notice that I've coded this snippet in noConflict mode to avoid, well, conflicts. :slight_smile:

    <script>
    jQuery.noConflict()
    jQuery(document).ready(function(){
        (function($){
      $("#mapbutton1").click(function(){
        $("#slice1").fadeToggle();
      });
      $("#mapbutton2").click(function(){
        $("#slice2").fadeToggle();
      });
    })(jQuery);
    });
    </script>

    This is the CSS used for the maps & buttons:

    #maps { position:relative; }
    #slice1, #slice2 { display:none; position:absolute; top:0; }
    #slice1 { left:0; }
    #slice2 { left: 245px; }
    #mapbutton1, #mapbutton2 { padding:20px; font-size:20px; }

    And this is the HTML added to the page editor in WP:

    <button id="mapbutton1">Toggle the places in Group "A"</button> <button id="mapbutton2">Toggle the places in Group "B"</button>
    
    <div id="maps">
    <img src="http://rockysroad.info/wp-content/uploads/2014/05/DredgeMapColorsExample.png" alt="DredgeMapColorsExample" width="1000" height="692" class="alignleft size-full wp-image-548"/>
    <img src="http://rockysroad.info/wp-content/uploads/2014/05/DredgeMapColorsExample2-slice1.png" alt="DredgeMapColorsExample2-slice1" width="245" height="378" class="alignnone size-full wp-image-565" id="slice1" USEMAP="#slice1map"/>
    <img src="http://rockysroad.info/wp-content/uploads/2014/05/DredgeMapColorsExample2-slice2.png" alt="DredgeMapColorsExample2-slice2" width="117" height="412" class="alignnone size-full wp-image-568" id="slice2" USEMAP="#slice2map"/>
    </div>
    
    <map id="slice1map" name="slice1map"><area shape="poly" alt="" title="This could be a brief chapter description that appears in a tooltip." coords="175,250,184,260,179,276,157,273,155,259" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="230,305,242,318,235,330,217,327,213,315" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="210,294,218,303,213,317,194,316,190,305" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="217,337,192,335,191,321,207,317,216,327" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="183,327,191,336,186,350,168,348,165,334" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="219,341,207,360,192,354,192,340,204,336" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="196,372,171,373,174,358,189,352,199,361" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" />
    
    <map id="slice2map" name="slice2map"><area shape="poly" alt="" title="" coords="53,277,61,288,56,304,36,300,32,288" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="86,317,96,331,90,344,72,342,68,328" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="62,352,68,365,63,376,43,376,41,363" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="54,333,61,343,58,354,41,355,38,340" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="31,343,36,350,34,364,16,364,13,349" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="30,380,38,389,34,403,16,403,12,388" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" /><area shape="poly" alt="" title="" coords="88,346,97,354,92,369,73,368,70,353" href="http://rockysroad.info/you-clicked-a-star/" target="_blank" />

    I think the end result is pretty cool. Let me know what you think. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.