ImageMapster: USA Map Demo

Shows how to use different area options, and handling special events

by Barry Schnell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.6.0/jquery.imagemapster.min.js"></script>
<div class="demo-container">
  <img id="usa-img" alt="USA Map" src="https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/usa_map_720.png" usemap="#usa-map" />
  <map name="usa-map">
    <area href="#" data-state="NH" data-full="New Hampshire" shape="rect" coords="512,29,586,44" />
    <area href="#" data-state="VT" data-full="Vermont" shape="rect" coords="543,49,586,62" />
    <area href="#" data-state="MA" data-full="Massachusetts" shape="rect" coords="515,68,585,80" />
    <area href="#" data-state="RI" data-full="Rhode Island" shape="rect" coords="650,149,711,161" />
    <area href="#" data-state="CT" data-full="Connecticut" shape="rect" coords="655,167,711,179" />
    <area href="#" data-state="NJ" data-full="New Jersey" shape="rect" coords="656,185,711,198" />
    <area href="#" data-state="DE" data-full="Delaware" shape="rect" coords="665,204,711,216" />
    <area href="#" data-state="MD" data-full="Maryland" shape="rect" coords="667,223,711,235" />
    <area href="#" data-state="DC" data-full="District of Columbia" shape="rect" coords="654,239,711,252" />
    <area href="#" data-state="WV" data-full="West Virginia" shape="rect" coords="649,257,711,270" />
    <area href="#" data-state="SC" data-full="South Carolina" shape="poly" coords="551,314,551,314,548,314,548,312,547,310,545,308,544,308,542,304,540,299,537,299,536,297,535,295,533,293,532,293,530,290,528,289,524,287,524,287,523,284,522,284,520,280,518,280,515,278,513,277,513,276,514,275,515,274,515,272,520,270,526,267,531,266,543,266,545,267,546,270,549,269,559,269,560,269,570,275,577,281,573,284,572,289,571,293,569,294,569,296,567,296,566,299,563,301,562,303,561,304,558,306,556,307,557,309,553,313,551,314" />
    <area href="#" data-state="HI" data-full="Hawaii" shape="poly"...

CSS

.demo-container {
  max-width: 500px;
  width: 100%;
  margin: 1rem;
}

.demo-container img {
  display: block;
  width: 100%;
  height: auto;
}

JavaScript

$(function() {
  var $image = $('#usa-img'),
    opts = {
      enableAutoResizeSupport: true,
      autoResize: true,
      configTimeout: 30000,
      fillOpacity: 0.5,
      render_highlight: {
        fillColor: '2aff00',
        stroke: true,
        altImage: `https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/usa_map_720_alt_4.jpg`
      },
      render_select: {
        fillColor: 'ff000c',
        stroke: false,
        altImage: `https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/usa_map_720_alt_5.jpg`
      },
      fadeInterval: 50,
      mapKey: 'data-state',
      areas: [{
          key: 'TX',
          selected: true
        },
        {
          key: 'ME',
          selected: true
        },
        {
          key: 'WA',
          staticState: false
        },
        {
          key: 'OR',
          isSelectable: false
        }
      ]
    };

  $image.mapster(opts);
});