JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<map name="map">
  <area shape="rect" group="rect" alt="" coords="25,38,102,104" href="#" /-->
  <area shape="circle" group="circle" alt="" coords="185,160,30" href="#" /-->
  <area shape="poly" group="poly" alt="" coords="230,62,237,25,276,20,291,55,264,80,230,62" href="#" /-->
</map> 

<h1>MAP1</h1>
<img src='http://www.placekitten.com/320/240' width='320' height='240' id='map_full' usemap="#map">
<h1>MAP2</h1>
<img src='http://www.placekitten.com/320/240' width='320' height='240' id='map_mini' usemap="#map">

JavaScript

$(document).ready(function() {
    var map = $('map[name="map"]'),
        clone = map.clone().attr('name', 'map2'),
        image2 = $('#map_mini');

    map.after(clone);
    image2.attr('usemap', '#map2');

    function state_change(data) {
        
            
        if (data.state=='highlight')
        {
            if (data.selected) {
                image2.mapster(data.state,data.key,true);
            } else {
                image2.mapster(data.state,false);
            }
        } else if (data.state=='select') {
             image2.mapster('set', 
                       data.selected,
                           data.key);
        }
    }

    var options = {
        singleSelect: true,
        isDeselectable: false,

        fill: true,
        fillColor: 'ff0000',
        fillOpacity: 0.5
    };
    $('#map_mini').mapster(options);
    $("#map_full").mapster(
    $.extend({}, options, {
        onStateChange: state_change
    }));
});