JSFiddle - React, Tailwind, and code Playground

by morrison

HTML

<div>
    <img id="Check-City-USA" src="http://www.checkcity.com/images/largeMap.png" usemap="#Check-City-USA" border="0" width="720" height="576" alt=""/>
    <map id="_Check-City-USA" name="Check-City-USA">
        <area shape="poly" coords="47,35,67,44,59,57,70,29,132,43,123,94,57,85,55,73,45,71" href="washington-rates.aspx" alt="Washington" title="Washington"/>
        <area shape="poly" coords="133,43,145,45,141,64,154,87,149,105,166,123,187,126,181,171,110,157,116,123,114,114,127,100,122,92" href="idaho-rates.aspx" alt="Idaho" title="Idaho"/>
        <area shape="poly" coords="145,45,276,64,273,130,192,121,187,126,166,128,159,105,152,106,156,86" href="montana-rates.aspx" alt="Montana" title="Montana"/>
        <area shape="poly" coords="277,64,273,114,361,117,352,67" href="north-dakota-rates.aspx" alt="North Dakota" title="North Dakota"/>
        <area shape="poly" coords="353,67,376,66,377,60,384,72,401,71,417,80,435,81,410,101,410,113,403,122,403,138,420,148,424,157,363,158,362,128,359,124,361,118" href="https://www.checkcity.com/newmember.aspx" alt="Minnesota" title="Minnesota"/>
        <area shape="poly" coords="410,103,427,96,425,105,458,86,453,99,491,94,508,103,466,127,468,170,434,173,427,169,423,149,405,138,403,121,410,115" href="wisconsin-rates.aspx" alt="Wisconsin" title="Wisconsin"/>
        <area shape="poly" coords="481,182,490,163,482,141,486,126,494,129,496,110,515,117,518,132,512,144,526,137,531,158,521,177" href="https://www.checkcity.com/newmember.aspx" alt="Michigan" title="Michigan"/>
        <area shape="poly" coords="566,160,568,166,622,154,643,166,639,121,632,100,617,104,602,121,605,131,573,142,577,150" alt="New York - No Products Available" title="New York - No Products Available"/>
        <area shape="poly" coords="633,100,652,93,655,102,651,107,651,134,644,135" href="https://www.checkcity.com/newmember.aspx" alt="Vermont" title="Vermont"/>
        <area shape="poly" coords="655,88,670,121,664,129,651,132"...

JavaScript

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Polygon(x, y) {

    if (arguments.length == 2) {
        if (x.length != y.length) {
            throw new Error('x and y arrays must be the same size');
        }

        this.x = x;
        this.y = y;

        this.size = x.length;
    }

    this.buildFromArray = function(coordinates) {
        var length, x, y, i;
        length = coordinates.length;
        x = [];
        y = [];

        //off-by one error may occur.  Ignore for now.
        for (i = 0; i < length - 1; i++) {
            x[x.length] = coordinates[i];
            y[y.length] = coordinates[i++];
        }

        this.x = x;
        this.y = y;
    };
}

function ImageMap(img, mapid) {
    this.areas = [];
    this.img = img;
    this.map = document.getElementById(mapid);

    this.buildArraysFromMap = function() {
        var $map = $(this.map), map = this;
        this.areas = [];
        $map.children('area[shape="poly"]').each(function(i, element) {
            var $element = $(element),
                coords, polygon;

            coords = $element.attr('coords');

            polygon = new Polygon();
            polygon.buildFromArray(coords.split(','));
            map.areas[map.areas.length] = polygon;
        });

    };

    this.buildArraysFromMap();

    this.pointInPolygon = function(point, polygon) {
        var i, j, c = false,
            numberOfVertices, xArray, yArray, xTest, yTest;
        numberOfVertices = polygon.size;
        xArray = polygon.x;
        yArray = polygon.y;
        xTest = point.x;
        yTest = point.y;

        for (i = 0, j = numberOfVertices - 1; i < numberOfVertices; j = i++) {
            if (((yArray[i] > yTest) != (yArray[j] > yTest)) && (xTest < (xArray[j] - xArray[i]) * (yTest - yArray[i]) / (yArray[j] - yArray[i]) + xArray[i])) {
                c = !c;
            }
        }
        return c;
    };
    
    this.on = function($event, $fnCallback) {
       ...