Customizable SVG Image Maps With jQuery - Mapify.js

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.

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
});

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

  • Publication date: 15.11.2017
  • Source