Image Map Spot

by Good Muyis

HTML

<script src="//d2rbro28ib85bu.cloudfront.net/scripts/jquery/1.8.1/jquery.min.js"></script>
<script src="//www.dailytrust.com.ng/js/jquery-1.8.3.min.js"></script>
<script src="https://dailytrust.com.ng/js/jquery.imagemapster.js"></script>
<div class="fleft rightline">

  <div class="cathead">
    News by states
  </div>
  <div class="fleft" style="position:relative">
    <div id="mapster_wrap_0" style="display: block; position: relative; padding: 0px; width: 300px; height: 300px;"><!--<img class="mapster_el" src="//www.dailytrust.com.ng/Image/Map-of-Nigeria-300.jpg" style="width: 300px; height: 300px; opacity: 1;">-->
      <canvas width="300" height="300" class="mapster_el" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;"></canvas>
      <canvas width="300" height="300" class="mapster_el" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 1;"></canvas><img id="myimage" src="//www.dailytrust.com.ng/Image/Map-of-Nigeria-300.jpg" usemap="#Map" alt="Nigeria" style="border: 0px; position: absolute; left: 0px; top: 0px; padding: 0px; opacity: 0;"></div>
    <map name="Map" id="Map">
      <area data-key="115" shape="poly" coords="243,40,255,27,262,27,266,22,271,23,285,36,286,57,298,60,297,72,298,78,288,86,284,85,279,94,274,94,268,97,266,105,263,109,256,106,241,111,230,122,222,114,229,106,226,103,235,95,237,86,241,82,238,78,239,70,240,65,239,58,244,50"
      href="/news/news/news-by-state/borno/" alt="Borno" title="Borno">
      <area data-key="112" shape="poly" coords="243,41,233,39,224,35,209,34,198,35,184,38,176,48,186,43,193,49,198,51,200,56,207,78,207,86,209,91,213,89,218,93,222,98,224,106,225,108,229,106,226,100,234,97,237,89,241,82,238,77,241,70,238,60,243,52,244,47" href="/news/news/news-by-state/yobe/"
      alt="Yobe" title="Yobe">
      <area data-key="94" shape="poly"...

JavaScript

//var $m = jQuery.noConflict();
    $(document).ready(function() {
      $('#myimage').mapster({
        showToolTip: true,
        singleSelect: true,
        clickNavigate: true,
        scaleMap: true,
        fillOpacity: 0.3,
        fillColor: 'd42e16',
        strokeWidth: 2,
        mapKey: 'data-key',
        areas: [{
          key: '113',
          stroke: true,
          toolTip: 'Zamfara'
        }, {
          key: '112',
          stroke: true,
          toolTip: 'Yobe'
        }, {
          key: '111',
          stroke: true,
          toolTip: 'Taraba'
        }, {
          key: '110',
          stroke: true,
          toolTip: 'Sokoto'
        }, {
          key: '109',
          stroke: true,
          toolTip: 'Rivers'
        }, {
          key: '108',
          stroke: true,
          toolTip: 'Plateau'
        }, {
          key: '107',
          stroke: true,
          toolTip: 'Oyo'
        }, {
          key: '106',
          stroke: true,
          toolTip: 'Osun'
        }, {
          key: '105',
          stroke: true,
          toolTip: 'Ondo'
        }, {
          key: '104',
          stroke: true,
          toolTip: 'Ogun'
        }, {
          key: '103',
          stroke: true,
          toolTip: 'Niger'
        }, {
          key: '102',
          stroke: true,
          toolTip: 'Nasarawa'
        }, {
          key: '101',
          stroke: true,
          toolTip: 'Lagos'
        }, {
          key: '100',
          stroke: true,
          toolTip: 'Kwara'
        }, {
          key: '99',
          stroke: true,
          toolTip: 'Kogi'
        }, {
          key: '98',
          stroke: true,
          toolTip: 'Kebbi'
        }, {
          key: '97',
          stroke: true,
          toolTip: 'Katsina'
        }, {
          key: '96',
          stroke: true,
          toolTip: 'Kano'
        }, {
          key: '95',
          stroke: true,
          toolTip: 'Kaduna'
        }, {
          key: '94',
         ...