Customizable SVG Image Maps With jQuery - Mapify.js

Mapify.js is a jQuery plugin for responsive image maps that enhances the image maps with custom CSS styles, SVG based clickable areas, and animated popover contents.

How to use it:

1. To get started, make sure jQuery library and the jQuery Mapify.js plugin are loaded properly in the document.

<link rel="stylesheet" href="jquery.mapify.css"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.mapify.js"></script>

2. Insert an image into the document.

<img src="example.svg" usemap="#Map">

3. Add custom clickable area to the image.

• data-hover-class: custom hover class
• data-group-id: for grouped areas
• data-pop-over-class: custom popover class

<map name="Map" id="Map">

  <area data-nbmembre="1" alt="Saint-Louis" title="Saint-Louis" href="#" shape="poly" coords="92.394,40.738,
  218.265,178.666,228.589,153.08,225.747,144.878,241.33,128.802,210.934,99.067,211.084,95.177,214.824,86.499,215.273,79.616,
  220.809,70.04,194.924,60.165,196.72,53.881,172.331,48.494,173.229,44.903,150.637,40.738,147.195,52.534,133.878,39.068,
  137.32,28.445,122.657,13.483,92.394,40.738" />

  <area data-nbmembre="2" id="dynamicClassChange" data-hover-class="customHover" alt="Saint-Marcel-de-Richelieu" title="Saint-Marcel-de-Richelieu" href="#" shape="poly" coords="210.934,99.067,
  286.767,173.25,301.339,117.99,315.759,103.126,318.187,103.376,318.817,102.376,321.18,102.778,328.744,94.577,312.025,77.45,
  316.25,61.097,264.438,9.869,252.62,51.902,230.878,42.352,230.829,49.813,227.568,57.111,226.606,62.517,222.036,70.161,
  220.809,70.04,215.273,79.616,214.824,86.499,211.084,95.177" />

  <area data-nbmembre="3" data-group-id="group-1" alt="Saint-Hugues" title="Saint-Hugues" href="#" shape="poly" coords="328.744,94.577,
  321.18,102.778,318.817,102.376,318.187,103.376,315.759,103.126,301.339,117.99,286.767,173.25,241.33,128.802,225.747,144.878,
  228.589,153.08,218.265,178.666,222.718,183.316,229.492,167.493,267.202,195.057,256.996,220.479,275.698,240.283,278.8,225.621,
  287.392,217.841,288.525,209.25,292.416,202.767,367.625,275.533,400.255,241.712,375.581,216.026,413.172,178.666" />

  <area data-nbmembre="4" data-pop-over-class="custom-popover" alt="Saint-Dominique" title="Saint-Dominique" href="#" shape="poly" coords="265.85,518.051,
  364.091,619.145,373.192,576.105,394.408,491.211,367.606,464.853,381.174,430.486,345.658,398.081,307.889,493.557,
  298.983,483.555" />

  ...
  
</map>

4. Initialize the plugin and activate the popover feature:

$("img[usemap]").mapify({
  popOver: {
    content: function(zone){
      return "<strong>"+zone.attr("data-title")+"</strong>"+zone.attr("data-nbmembre")+" Members";
    },
    delay: 0.7,
    margin: "15px",
    height: "130px",
    width: "260px"
  }
});

5. Apply your own CSS styles to the image map.

/* Mapify custom popOver example */
  

.mapify-popOver strong {
  font-weight: 400;
  font-size: 24px;
  line-height: 1em;
  display: block;
  margin-bottom: 10px;
  color: #000;
}

.mapify-popOver {
  color: #999;
  font-size: 16px;
  height: 130px;
}

.mapify-popOver-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.mapify-popOver.customPopOver { background: #09f; }

/* Custom hovering style */

.mapify-hover {
  fill: rgba(0,0,0,0.15);
  stroke: #fff;
  stroke-width: 2;
}

.customHover {
  fill: #09f;
  stroke: #fff;
  stroke-width: 2;
}

6. All available options an callback functions for the plugin.

$("img[usemap]").mapify({
  hoverClass: false,
  popOver: {
      content: function (zone, imageMap) {
          return '';
      },
      customPopOver: {
          selector: false,
          contentSelector: '.mapify-popOver-content',
          visibleClass: 'mapify-visible',
          alwaysVisible: false
      },
      delay: 0.8,
      margin: '10px',
      width: false,
      height: false
  },

  onAreaHighlight: false,
  onMapClear: false,

  instantClickOnMobile: false
});

Change log:

2018-01-24

• Fixed 'data-group-id' not working

---

This awesome jQuery plugin is developed by etienne-martin. For more Advanced Usages, please check the demo page or visit the official website.