ImageMapster: Fill areas from external data

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>
<!-- the script block below can be rendered by the server when the page loads,
  it's contents telling the client what to do -->

<script type="application/json" id="map-data">
  ["AZ", "AK", "CT", "ID", "DE", "KY"]

</script>


<!-- below here is just a big old image map of the USA, imagine this is hotel rooms -->

<img src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/usa_map_720.png" style="width:100%" usemap="#usa">
<map id="usa_image_map" name="usa">
  <area href="#" state="NH" full="New Hampshire" shape="rect" coords="512,29,586,44">
  <area href="#" state="VT" full="Vermont" shape="rect" coords="543,49,586,62">
  <area href="#" state="MA" full="Massachusetts" shape="rect" coords="515,68,585,80">
  <area href="#" state="RI" full="Rhode Island" shape="rect" coords="650,149,711,161">
  <area href="#" state="CT" full="Connecticut" shape="rect" coords="655,167,711,179">
  <area href="#" state="NJ" full="New Jersey" shape="rect" coords="656,185,711,198">
  <area href="#" state="DE" full="Delaware" shape="rect" coords="665,204,711,216">
  <area href="#" state="MD" full="Maryland" shape="rect" coords="667,223,711,235">
  <area href="#" state="DC" full="District of Columbia" shape="rect" coords="654,239,711,252">
  <area href="#" state="WV" full="West Virginia" shape="rect" coords="649,257,711,270">
  <area href="#" state="SC" full="South Carolina" shape="poly"...

JavaScript

var data = $.parseJSON($('#map-data').text());

$('img').mapster({
  mapKey: 'state',
  onConfigured: function() {
    // make the array into a comma-sparated list
    var csv = data.join(',');

    // the 'set' activates the areas
    // 'snapshot' captures the current state 
    // 'unbind(true)' disables the imagemap so users can't highlgiht & select things
    // the 'true' parameter says "don't remove the effects, just disable it"
    $('img').mapster('set', true, csv)
      .mapster('snapshot')
      .mapster('unbind', true);

  }
});