Towns In Connecticut – Highlighting Mapped Regions Of An Image With jQuery

Having lived most of my adult life in another part of the country, I am often at a loss when towns/cities are mentioned (say, for instance, in a job posting). Until recently, the only solution was to google or mapquest it. I finally decided this was a personal project that needed doing. So, a couple minutes of research lead me to David Lynch’s Blog About maphilight.

Fast forward a couple days and here is my answer to not knowing where the cities and towns of Connecticut are located, Click Here To See An Example Of Connecticut Towns. I’ve modified the jQuery maphilight example to meet my needs and removed what I considered unnecessary script.

Hovering over a section of the map will highlight and outline a city/town. Clicking on a city/town will lock it as highlighted. Clicking again will return the city area to its regular view. Hovering over a link will highlight the corresponding city/town. Meriden, being special, has a different outline thickness and color.

The process for generating a map being:

  1. Map an image in ‘poly’ area(s) – I used Dreamweaver in an html document
  2. Place mapping in PHP heredoc, so that it can be parsed for link information
  3. Replace image (if necessary) that approximates the *original image in size and shape

* The original image is an image showing the outlines of the towns of Connecticut (but nothing else). The image I ended up using is one that displays some road and water information. Although I photoshopped the second image to virtually align with the first image, they are not an exact match. So, the mapping (outlines) will be slightly off, in some locations more so than others.

Code for above example (Connecticut Towns) here:

PHP code saved as connecticut.php

<?php
/**
 * connecticut.php
 * a php and jQuery script that utilizes maphilight.js and a mapped image to highlight towns in Connecticut
 * @author Robert Newton <lektrikpukeAtYahooDotCom>
 * if you use/reuse my code, please give a mention to my site/blog--Thanks!
 * maphilight.js (and the original example) found at http://davidlynch.org/projects/maphilight/docs/
 */
$map = file_get_contents('images/connecticut.html'); // get file contents here of mapped html here

// ************************************* Generate Town Average Points (under ideal conditions yielding a center point) ***********************

$matches = explode("\n", $map); // on-line server is nix based, so \n only
asort($matches);

foreach ($matches as $key => $value) {
    $xAndYarr = '';
    $xArr = '';
    $yArr = '';
    $xAverage = 0;
    $yAverage = 0;
    $useHardCodedCenters = TRUE; // toggle using hardcoded town centers on and off - off meaning mapped town centers are calculated

    if (preg_match_all("/(?<=id=\")(.*?)(?=\")/s", $value, $townNameResult)) {
        $townName = $townNameResult[1][0];
        $pertinentDataArr[$townName]['name'] = ucwords(str_replace('_', ' ', $townName));

        if (preg_match_all("/(?<=center=\")(.*?)(?=\")/s", $value, $centerResult) && $centerResult[1][0] !== '' && $useHardCodedCenters) {
            $separateXYarr = explode(',', $centerResult[1][0]);
            $pertinentDataArr[$townName]['xAv'] = $separateXYarr[0];
            $pertinentDataArr[$townName]['yAv'] = $separateXYarr[1];
        }
        else if (preg_match_all("/(?<=coords=\")(.*?)(?=\")/s", $value, $result)) { // find all the ids (between the quotes) and add them to result
            $idArr = $result[1];
            foreach ($idArr as $k => $v) {
                $xAndYarr = explode(',', $v);
                foreach ($xAndYarr as $ki => $vi) { // split array into x and y arrays based on even or odd (x's even)
                    if ($ki % 2 === 0) {
                        $xArr[] = $vi;
                    }
                    else {
                        $yArr[] = $vi;
                    }
                } // end foreach $xAndYarr

                foreach ($xArr as $kii => $vii) {
                    $xAverage += $vii;
                }
                $xAverage /= count($xArr);

                foreach ($yArr as $kyi => $vyi) {
                    $yAverage += $vyi;
                }
                $yAverage /= count($yArr);
            } // end foreach idArr

            $pertinentDataArr[$townName]['xAv'] = round($xAverage, 2);
            $pertinentDataArr[$townName]['yAv'] = round($yAverage, 2);
        } // end pregmatch coords
    } // end pregmatch id
}
$jsonEnc = json_encode($pertinentDataArr);
?><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Connecticut Cities & Towns</title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.maphilight.js"></script>
        <script type="text/javascript">
            var obj = jQuery.parseJSON('<?php echo $jsonEnc; ?>');
        </script>
        <script type="text/javascript" src="js/connecticut.js"></script>
        <link href="css/connecticut.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div style="float:left;">
            <?php echo $map . "\n"; ?>
        </div>
        <div style="float:left; padding-top:70px;">
            <?php
            // let's make the links
            if (preg_match_all("/(?<=id=\")(.*?)(?=\")/s", $map, $result)) { // find all the ids (between the quotes) and add them to result
                $idArr = $result[1]; // copy result of 1 to idArr
                asort($idArr); // sort array alphabetically
                $counter = 1;
                $linkText = '<ul>' . "\n";
                foreach ($idArr as $k => $v) {
                    if ($v != 'Map') { // we don't want the image id itself to show up
                        $linkText .= '<li><a id="' . $v . '" href="#' . $v . '">' . ucwords(str_replace('_', ' ', $v)) . '</a></li>' . "\n";
                        if ($counter % 57 == 0) { // chose this number so 3 columns would fit alongside image
                            $linkText .= '</ul>
                            </div>
                            <div style="float:left; padding:70px 0 0 15px;">
                            <ul>
                            ';
                        }
                        $counter += 1;
                    }
                }
                $linkText .= '</ul>' . "\n";
            }
            echo $linkText;
            ?>
        </div>
    </body>
</html>

jQuery code saved as connecticut.js

$(function () {
    $('body').append('<div id="tooltip"></div>');
    $('#tooltip').hide();
    var $tooltip = $('#tooltip');

    var refY = 581;
    var refX = 772;
    var refName = "Meriden";
    var compassDir = "Unknown";
    var $title = "Error";

    var conversionFactor = (90 / 1242);

    var xySign = function (angle, ySign, xSign) {
        if (ySign === true && xSign === true) {
            angle = Math.round((90 - angle) * 10) / 10;
        }
        else if (ySign === false && xSign === true) {
            angle = Math.round((90 + angle) * 10) / 10;
        }
        else if (ySign === false && xSign === false) {
            angle = Math.round((270 - angle) * 10) / 10;
        }
        else {
            angle = Math.round((270 + angle) * 10) / 10;
        }
        return angle;
    };

    var calcAngle = function (angle) {
        var compassDir = '';
        switch (true) {
            case (angle > 348.75 || angle <= 11.25) :
                compassDir = "N";
                break;
            case (angle > 11.25 && angle <= 33.75) :
                compassDir = "NNE";
                break;
            case (angle > 33.75 && angle <= 56.25) :
                compassDir = "NE";
                break;
            case (angle > 56.25 && angle <= 78.75) :
                compassDir = "ENE";
                break;
            case (angle > 78.75 && angle <= 101.25) :
                compassDir = "E";
                break;
            case (angle > 101.25 && angle <= 123.75) :
                compassDir = "ESE";
                break;
            case (angle > 123.75 && angle <= 146.25) :
                compassDir = "SE";
                break;
            case (angle > 146.25 && angle <= 168.75) :
                compassDir = "SSE";
                break;
            case (angle > 168.75 && angle <= 191.25) :
                compassDir = "S";
                break;
            case (angle > 191.25 && angle <= 213.75) :
                compassDir = "SSW";
                break;
            case (angle > 213.75 && angle <= 236.25) :
                compassDir = "SW";
                break;
            case (angle > 236.25 && angle <= 258.75) :
                compassDir = "WSW";
                break;
            case (angle > 258.75 && angle <= 281.25) :
                compassDir = "W";
                break;
            case (angle > 281.25 && angle <= 303.75) :
                compassDir = "WNW";
                break;
            case (angle > 303.75 && angle <= 326.25) :
                compassDir = "NW";
                break;
            case (angle > 326.25 && angle <= 348.75) :
                compassDir = "NNW";
                break;
            default:
                compassDir = "Unknown";
        }
        return compassDir;
    } // end function containing switch statement

    $('.map').maphilight({
        fillColor: '008800'
    });

    $('a').mouseover(function (e) {
        $("#" + this.id).mouseover();
    }).mouseout(function (e) {
        $("#" + this.id).mouseout();
    });

    $('area').mouseover(function (e) {
        ySign = Math.abs(obj[this.id]['yAv']) < Math.abs(refY) ? true : false; // inverse logic because pix count from upper left corner
        xSign = Math.abs(obj[this.id]['xAv']) > Math.abs(refX) ? true : false;
        yDiff = Math.abs(refY - obj[this.id]['yAv']);
        xDiff = Math.abs(refX - obj[this.id]['xAv']);
        slope = yDiff / xDiff;
        distance = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));
        miles = Math.round(distance * conversionFactor * 10) / 10;
        
        angle = Math.round((Math.atan(slope)) * 57.29577951471); // arctangent of the slope * rad = angle
        angle = xySign(angle, ySign, xSign); // call function to determine quadrant and calculate correct angle
        compassDir = calcAngle(angle); // determine compass heading

        $title = obj[this.id]['name'] + " is " + miles + " miles " + compassDir + " of " + refName + " at approximately " + angle + " degrees (as the penguin flies)";
        $('#tooltip').title = $title;
        $tooltip.text($title).show();

        $('area').mousemove(function (e) {
            $tooltip.css({
                top: e.pageY - 10,
                left: e.pageX + 150
            });
        });

        $('a').mousemove(function (e) {
            $tooltip.css({
                top: e.pageY - 95,
                left: e.pageX - 100
            });
        });
    }); // end mouseover area

    $('area').mouseout(function (e) {
        $tooltip.text('').hide();
    });

    $('area').click(// or you could use 'a' instead of 'area', which would work by clicking on a link
            function () {
                refY = obj[this.id]['yAv']; // set the global var to the clicked on y coordinate - make this the new reference point
                refX = obj[this.id]['xAv']; // set the global var to the clicked on x coordinate - make this the new reference point
                refName = obj[this.id]['name']; // set the global var to the clicked on town name - make this the new reference point
                var data = $("#" + this.id).mouseout().data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn; // allows for toggling 'highlight always on' on and off
                $("#" + this.id).data('maphilight', data).trigger('alwaysOn.maphilight');
            }
    );
});

CSS code saved as connecticut.css

a:visited {
    color: #00C;
}
a:hover {
    color: #F00;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
#tooltip {
    padding: 10px 15px;
    position: absolute;
    font-size: 14px;
    color: #eee;
    background: #777;
    z-index: 10;
}
#clickTown{
    padding: 5px;
    border: 1px solid #00f;
    position: absolute;
    font-family: sans-serif;
    font-size: 10px;
    color: #333;
    background-color: #ccc;
}

HTML (image mapping) code saved as connecticut.html

<!--<img src="images/Connecticut cities towns map.gif" alt="connecticut cities" width="1569" height="1141" border="0" class="map" usemap="#features" />-->
<img src="images/ctRoadsMap.jpg" alt="connecticut cities" width="1569" height="1141" border="0" class="map" usemap="#features" />
<!--<img src="images/connFreeways.jpg" alt="connecticut cities" width="1569" height="1141" border="0" class="map" usemap="#features" />-->
<!--<img src="images/Connecticut cities towns map with dots.jpg" alt="connecticut cities" width="1569" height="1141" border="0" class="map" usemap="#features" />-->
<map name="features" id="Map">
    <area id="salisbury" shape="poly" coords="363,183,267,181,274,58,377,60,354,116" center="322,130" alt="salisbury" href="#salisbury" />
    <area id="sharon" shape="poly" coords="254,306,322,308,352,278,347,267,361,214,361,185,266,180" center="313,267" alt="sharon" href="#sharon" />
    <area id="new_fairfield" shape="poly" coords="232,638,310,618,301,607,303,593,293,548,237,562" center="274,626" alt="new fairfield" href="#new_fairfield" />
    <area id="danbury" shape="poly" coords="227,700,232,639,310,617,317,644,326,651,328,671,314,696,304,700,312,739,280,750,268,714,258,714,252,700" center="290,709" alt="danbury" href="#danbury" />
    <area id="ridgefield" shape="poly" coords="254,834,301,808,293,788,293,773,291,766,283,764,280,749,268,715,258,716,252,700,228,701,220,776" center="265,798" alt="ridgefield" href="#ridgefield" />
    <area id="meriden" shape="poly" coords="800,587,794,509,760,515,749,532,743,532,740,517,726,520,729,540,722,540,722,551,719,551,717,557,722,561,724,570,763,579,778,587" center="772,581" alt="meriden" href="#meriden" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}' />
    <area id="berlin" shape="poly" coords="794,509,795,497,810,493,811,487,820,485,824,472,820,466,822,461,821,440,813,439,813,442,797,444,796,440,749,445,749,449,742,459,743,462,747,462,745,469,747,477,747,481,743,484,742,496,734,509,732,518,740,517,742,523,742,529,745,531,749,531,753,526,760,515,793,508" center="787,507" alt="berlin" href="#berlin" />
    <area id="wallingford" shape="poly" coords="740,682,741,656,733,653,727,653,724,652,724,647,699,633,706,621,707,617,720,592,728,581,724,570,760,579,778,586,800,587,801,600,808,599,804,642,799,657" center="770,648" alt="wallingford" href="#wallingford" />
    <area id="cheshire" shape="poly" coords="698,634,677,622,658,618,653,618,653,611,654,606,657,602,658,591,662,585,663,578,662,574,653,562,639,555,648,532,697,523,703,523,706,526,712,536,723,540,722,550,718,552,717,557,722,559,727,577,728,582,719,592" center="697,601" alt="cheshire" href="#cheshire" />
    <area id="southington" shape="poly" coords="656,530,665,481,662,446,668,446,669,451,673,451,673,446,744,435,746,445,750,445,748,451,743,457,743,462,747,462,746,467,745,472,747,476,748,482,744,484,742,497,735,509,732,518,726,520,729,541,716,538,709,532,709,530,702,523" href="#southington" center="710,515" alt="southington">
    <area id="cromwell" shape="poly" coords="821,485,833,488,843,488,848,492,852,489,851,494,856,499,854,504,863,510,864,515,869,512,876,497,885,489,891,482,891,476,885,468,881,460,883,454,884,451,857,455,822,462,820,466,824,471,822,479" href="#cromwell" center="870,507" alt="cromwell">
    <area id="wolcott" shape="poly" coords="631,533,608,504,602,462,612,461,616,461,629,450,661,447,665,480,656,530" href="#wolcott" center="649,518" alt="wolcott">
    <area id="new_britain" shape="poly" coords="796,440,788,378,772,381,749,404,746,411,744,425,744,435,746,445" href="#new_britain" center="781,445" alt="new britain">
    <area id="plainville" shape="poly" coords="700,442,694,397,705,394,749,405,745,417,744,426,745,435" href="#plainville" center="730,449" alt="plainville">
    <area id="bristol" shape="poly" coords="630,450,619,381,690,372,700,442,673,446,673,451,669,451,668,446" href="#bristol" center="671,438" alt="bristol">
    <area id="plymouth" shape="poly" coords="578,385,571,445,571,448,581,479,589,475,599,474,604,476,602,462,613,462,629,449,619,381,616,379" href="#plymouth" center="610,456" alt="plymouth">
    <area id="middlefield" shape="poly" coords="849,589,846,563,844,555,837,541,836,538,817,538,807,541,797,542,801,600" href="#middlefield" center="834,599" alt="middlefield">
    <area id="middletown" shape="poly" coords="849,589,936,574,936,561,938,554,939,539,935,534,931,532,920,530,916,529,913,528,904,528,901,523,893,522,877,526,871,521,871,509,866,515,863,512,854,503,855,498,843,487,824,487,819,485,811,487,810,493,795,496,797,541,810,540,825,538,836,537,845,554" href="#middletown" center="872,568" alt="middletown">
    <area id="portland" shape="poly" coords="933,533,931,528,933,523,934,510,944,492,946,484,944,473,955,471,944,448,882,457,882,462,891,476,891,481,880,493,871,506,871,520,876,526,884,525,888,523,893,522,900,522,903,526,918,530" href="#portland" center="925,520" alt="portland">
    <area id="wilton" shape="poly" coords="267,858,268,853,255,834,300,806,343,882,337,897,330,896,315,906,293,913,290,907,281,905,280,890,274,885,277,878" href="#wilton" center="311,896" alt="wilton">
    <area id="new_canaan" shape="poly" coords="274,949,240,949,230,914,232,911,219,896,217,893,217,886,267,857,277,878,274,885,280,890,281,904,289,906,293,913" href="#new_canaan" center="267,936" alt="new canaan">
    <area id="stamford" shape="poly" coords="218,886,159,919,206,1002,209,1019,215,1030,215,1035,222,1036,223,1030,231,1025,234,1041,239,1039,243,1033,242,1029,240,1021,250,1021,254,1011,253,1003,247,991,242,985,246,964,247,956,253,950,241,949,229,914,233,912,219,896" href="#stamford" center="222,987" alt="stamford">
    <area id="greenwich" shape="poly" coords="159,919,91,960,142,1046,139,1057,141,1067,150,1056,153,1047,155,1054,164,1054,167,1043,173,1047,178,1045,182,1040,182,1031,188,1028,187,1034,191,1036,186,1041,187,1046,203,1036,206,1041,203,1043,203,1048,199,1054,195,1052,191,1055,195,1058,204,1055,217,1037,208,1018,206,1002" href="#greenwich" center="163,1019" alt="greenwich">
    <area id="darien" shape="poly" coords="275,949,289,970,288,974,293,979,293,991,296,991,294,1002,290,1007,284,1007,288,1000,279,1002,276,1005,279,1006,279,1010,271,1021,267,1015,264,1019,258,1010,261,1008,257,1004,253,1004,246,990,242,984,248,956,254,950" href="#darien" center="276,1008" alt="darien">
    <area id="norwalk" shape="poly" coords="338,897,335,917,341,924,340,940,339,955,339,961,340,966,337,970,332,981,328,978,323,966,319,967,322,979,321,989,313,983,310,995,304,1003,294,1002,296,992,293,991,293,979,289,974,289,970,275,949,293,913,319,903,330,897" href="#norwalk" center="321,975" alt="norwalk">
    <area id="westport" shape="poly" coords="373,873,401,923,402,944,397,949,385,948,379,954,371,952,370,950,375,945,371,943,367,954,362,962,351,956,350,950,346,950,343,959,352,963,351,967,340,967,338,958,341,925,335,915,338,897,343,883,349,892" href="#westport" center="376,949" alt="westport">
    <area id="north_canaan" shape="poly" coords="377,60,453,65,445,112,364,104,363,93,368,90,367,82" href="#north_canaan" center="419,114" alt="north canaan">
    <area id="norfolk" shape="poly" coords="453,64,528,67,500,190,431,187" href="#norfolk" center="487,158" alt="norfolk">
    <area id="colebrook" shape="poly" coords="528,67,612,70,597,138,594,140,511,145" href="#colebrook" center="571,137" alt="colebrook">
    <area id="hartland" shape="poly" coords="612,70,715,72,699,133,597,140" href="#hartland" center="664,134" alt="hartland">
    <area id="granby" shape="poly" coords="715,72,751,72,749,109,779,105,776,117,787,120,771,185,685,182" href="#granby" center="746,174" alt="granby">
    <area id="suffield" shape="poly" coords="897,78,835,72,818,73,791,73,790,76,795,78,792,88,786,86,785,89,790,93,786,95,788,99,784,105,779,105,776,117,825,133,821,155,893,161,894,147,901,123,901,118,898,111,900,94" href="#suffield" center="859,143" alt="suffield">
    <area id="enfield" shape="poly" coords="898,84,916,84,922,78,929,77,945,75,967,75,980,158,887,170,894,160,895,145,901,122,901,117,898,110,900,96" href="#enfield" center="949,155" alt="enfield">
    <area id="somers" shape="poly" coords="968,75,1048,76,1040,148,980,158" href="#somers" center="1018,145" alt="somers">
    <area id="stafford" shape="poly" coords="1047,76,1183,77,1177,103,1163,146,1162,165,1040,163" href="#stafford" center="1117,149" alt="stafford">
    <area id="union" shape="poly" coords="1184,77,1258,78,1259,145,1186,146,1171,147,1162,148" href="#union" center="1228,141" alt="union">
    <area id="woodstock" shape="poly" coords="1258,79,1356,80,1383,184,1333,187,1262,187" href="#woodstock" center="1326,165" alt="woodstock">
    <area id="thompson" shape="poly" coords="1356,80,1472,81,1474,168,1379,171" href="#thompson" center="1432,154" alt="thompson">
    <area id="putnam" shape="poly" coords="1474,168,1475,195,1403,219,1397,225,1396,228,1388,229,1385,225,1385,214,1386,210,1383,199,1378,193,1379,184,1383,184,1380,170" href="#putnam" center="1433,221" alt="putnam">
    <area id="killingly" shape="poly" coords="1476,195,1481,319,1392,333,1394,328,1400,320,1400,315,1407,312,1412,310,1411,302,1413,300,1411,293,1405,291,1407,284,1402,279,1397,280,1398,271,1401,267,1386,247,1383,248,1386,235,1389,229,1396,229,1404,218" href="#killingly" center="1450,295" alt="killingly">
    <area id="sterling" shape="poly" coords="1481,319,1486,448,1435,443,1448,325" href="#sterling" center="1474,414" alt="sterling">
    <area id="voluntown" shape="poly" coords="1415,446,1432,566,1482,576,1485,448,1456,445,1436,443" href="#voluntown" center="1462,539" alt="voluntown">
    <area id="north_stonington" shape="poly" coords="1357,554,1483,576,1480,659,1477,660,1472,660,1470,657,1465,658,1462,660,1455,666,1449,664,1448,669,1376,646,1375,638,1371,631,1373,621,1366,593" href="#north_stonington" center="1432,643" alt="north stonington">
    <area id="stonington" shape="poly" coords="1376,645,1375,650,1371,650,1365,666,1361,666,1363,677,1364,688,1360,701,1358,707,1359,715,1359,719,1356,722,1358,726,1354,732,1355,736,1354,739,1358,750,1362,747,1362,735,1367,733,1370,739,1374,736,1384,735,1393,744,1395,742,1397,730,1402,733,1400,738,1404,744,1407,738,1411,739,1413,735,1418,732,1421,726,1423,735,1435,738,1429,742,1434,744,1437,750,1443,743,1447,743,1458,732,1457,722,1453,719,1452,711,1456,705,1457,696,1455,688,1449,679,1449,674,1448,668" href="#stongington" center="1416,728" alt="stonington">
    <area id="groton" shape="poly" coords="1363,678,1266,677,1266,682,1272,690,1270,693,1272,712,1275,714,1277,728,1279,745,1283,751,1281,755,1288,753,1289,757,1294,754,1297,757,1302,754,1310,760,1314,761,1320,753,1322,748,1325,753,1323,758,1328,766,1331,764,1332,756,1342,750,1343,757,1347,750,1352,741,1355,733,1358,726,1356,723,1360,717,1358,712,1359,707,1365,686" href="#groton" center="1324,743" alt="groton">
    <area id="new_london" shape="poly" coords="1261,769,1269,764,1269,759,1273,756,1273,748,1268,742,1265,737,1269,733,1269,730,1267,727,1272,713,1271,699,1271,694,1272,690,1257,693,1243,711,1244,718,1248,723,1255,732,1261,757,1262,758,1263,762" href="#new_london" center="1268,751" alt="new london">
    <area id="waterford" shape="poly" coords="1178,667,1255,652,1263,651,1265,654,1269,661,1269,664,1265,671,1266,681,1272,690,1257,693,1244,711,1244,719,1253,729,1259,750,1261,756,1263,759,1262,767,1257,771,1252,773,1244,771,1236,771,1231,770,1229,759,1224,756,1219,763,1220,767,1217,769,1211,762,1212,758,1208,754,1205,746,1207,734,1204,732,1200,725,1200,716,1197,709,1197,701" href="#waterford" center="1234,739" alt="waterford">
    <area id="east_lyme" shape="poly" coords="1135,640,1162,637,1195,698,1198,701,1197,707,1197,711,1200,714,1200,724,1203,730,1207,734,1207,740,1205,747,1209,752,1200,751,1192,757,1189,762,1188,774,1191,780,1189,787,1184,786,1179,778,1177,774,1179,767,1170,776,1161,773,1156,775,1151,756,1151,748,1138,721,1136,709,1132,674" href="#east_lyme" center="1176,739" alt="east lyme">
    <area id="old_lyme" shape="poly" coords="1071,734,1082,726,1136,710,1138,720,1151,747,1150,753,1156,771,1157,782,1153,783,1149,789,1138,789,1131,792,1113,795,1102,796,1094,788,1090,774,1089,767,1085,762,1085,752,1080,743" href="#old_lyme" center="1123,784" alt="old lyme">
    <area id="old_saybrook" shape="poly" coords="1074,733,1069,733,1068,738,1060,744,1045,745,1029,752,1025,760,1029,777,1032,789,1036,795,1043,797,1051,794,1056,812,1062,809,1072,809,1079,803,1090,805,1087,796,1072,801,1068,797,1070,792,1085,791,1083,785,1078,785,1072,789,1072,779,1079,782,1082,764,1086,763,1085,752,1082,745" href="#old_saybrook" center="1065,799" alt="old saybrook">
    <area id="westbrook" shape="poly" coords="986,802,966,729,978,729,993,742,1020,744,1024,745,1029,751,1025,759,1029,778,1033,789,1036,794,1034,798,1028,799,1024,796,1019,794,1007,794,1000,805" href="#westbrook" center="1010,799" alt="westbrook">
    <area id="clinton" shape="poly" coords="967,735,954,739,915,764,915,768,929,783,936,794,942,793,944,799,943,802,943,810,950,805,961,802,963,814,972,817,975,807,986,802" href="#clinton" center="965,805" alt="clinton">
    <area id="madison" shape="poly" coords="864,808,872,792,870,786,880,777,881,766,868,747,860,744,849,727,846,715,847,667,848,647,864,642,873,651,868,661,871,665,882,669,895,693,898,707,896,732,896,748,914,754,914,761,915,768,937,793,943,793,943,800,943,809,944,813,951,817,947,823,941,818,928,805,920,801,899,803,893,802" href="#madison" center="885,756" alt="madison">
    <area id="guilford" shape="poly" coords="817,654,815,662,812,662,798,681,802,754,800,765,800,772,812,804,807,810,808,817,820,811,826,820,823,823,827,827,838,826,844,822,844,814,849,819,850,808,855,807,857,803,861,808,865,807,872,792,871,784,880,776,881,765,872,752,862,747,856,740,846,718,846,679,848,647" href="#guilford" center="838,771" alt="guilford">
    <area id="branford" shape="poly" coords="762,752,741,758,733,764,732,771,727,779,719,785,716,790,718,797,715,801,715,806,722,809,722,818,732,815,733,819,735,824,739,817,739,813,742,809,745,812,751,808,756,809,751,814,745,814,745,818,752,822,759,816,769,812,781,808,794,805,797,813,804,810,807,813,812,805,802,776,800,769,800,763,784,770" href="#branford" center="772,813" alt="branford">
    <area id="east_haven" shape="poly" coords="689,825,696,822,699,819,697,809,697,787,709,765,716,740,740,734,740,717,747,714,747,739,743,757,735,761,732,765,732,771,726,780,717,786,718,795,714,804,721,809,722,817,717,826,703,830,693,829" href="#east_haven" center="726,803" alt="east haven">
    <area id="new_haven" shape="poly" coords="619,761,619,752,628,743,629,738,638,734,635,729,650,727,651,731,647,735,648,739,680,743,686,749,694,747,697,744,716,741,708,767,698,786,699,818,696,821,691,825,685,825,687,819,693,814,691,809,685,803,687,793,685,788,684,783,686,774,679,778,675,780,672,787,668,792,662,792,658,786,647,772,647,768,648,764" href="#new_haven" center="680,789" alt="new haven">
    <area id="west_haven" shape="poly" coords="625,762,628,772,626,788,625,793,630,794,623,804,622,823,624,826,620,829,621,836,635,838,645,825,644,820,651,817,659,814,668,810,669,805,661,792,659,786,647,771,647,765" href="#west_haven" center="654,829" alt="west haven">
    <area id="orange" shape="poly" coords="555,796,556,790,567,786,570,776,568,773,573,763,589,760,608,766,618,760,624,761,628,771,627,780,625,790,630,795,623,804,622,821,624,824,621,827,586,817,577,813" href="#orange" center="608,821" alt="orange">
    <area id="milford" shape="poly" coords="555,796,554,822,542,832,537,841,537,854,537,867,537,877,532,880,529,884,531,891,540,897,548,891,563,872,570,873,575,863,579,860,585,860,589,868,596,863,603,865,607,864,614,852,615,848,625,846,627,836,621,837,621,826,599,821,578,814" href="#milford" center="582,870" alt="milford">
    <area id="stratford" shape="poly" coords="510,815,514,833,502,843,499,847,499,853,504,857,504,871,506,886,501,895,498,909,522,920,533,916,543,914,538,910,539,899,530,894,528,894,529,885,528,879,537,868,538,840,541,834,554,823,553,817,543,812,538,803" href="#stratford" center="529,894" alt="stratford">
    <area id="bridgeport" shape="poly" coords="441,844,458,870,458,888,453,894,453,898,457,898,445,912,448,917,446,920,448,924,454,923,460,909,470,901,460,914,460,925,462,924,463,915,473,907,479,906,482,909,485,901,484,892,494,901,499,896,506,885,504,871,505,858,500,853,500,848,502,843,493,848,482,851,476,844,470,841" href="#bridgeport" center="490,901" alt="bridgeport">
    <area id="fairfield" shape="poly" coords="380,856,372,874,401,923,402,939,408,938,420,929,411,937,418,944,427,947,436,940,443,937,444,930,447,924,446,920,448,917,444,913,457,898,452,897,455,892,459,887,458,871,436,838,427,857,414,838,400,857" href="#fairfield" center="429,920" alt="fairfield">
    <area id="pomfret" shape="poly" coords="1299,187,1299,266,1310,266,1317,270,1322,292,1338,289,1338,278,1347,278,1349,270,1398,270,1400,267,1387,248,1383,248,1384,243,1386,235,1390,230,1385,225,1385,216,1387,212,1383,200,1378,193,1378,184" href="#pomfret" center="1350,263" alt="pomfret">
    <area id="eastford" shape="poly" coords="1250,266,1250,241,1251,222,1234,187,1232,186,1232,181,1227,173,1227,163,1224,157,1222,145,1260,145,1262,187,1299,187,1300,266" href="#eastford" center="1280,239" alt="eastford">
    <area id="ashford" shape="poly" coords="1176,146,1176,263,1215,265,1240,264,1246,266,1250,266,1250,235,1251,222,1234,188,1232,187,1232,184,1232,181,1228,173,1227,165,1223,157,1223,146" href="#ashford" center="1219,240" alt="ashford">
    <area id="willington" shape="poly" coords="1110,262,1111,253,1114,248,1112,243,1112,238,1110,229,1111,222,1118,214,1116,209,1122,206,1123,197,1119,189,1118,184,1114,179,1110,173,1112,164,1140,162,1142,165,1163,164,1162,147,1177,147,1176,263" href="#willington" center="1159,240" alt="willington">
    <area id="tolland" shape="poly" coords="1030,275,1025,227,1024,188,1111,173,1118,183,1119,188,1123,196,1123,205,1116,209,1117,213,1111,223,1109,227,1112,239,1114,248,1110,252,1111,263" href="#tolland" center="1080,255" alt="tolland">
    <area id="ellington" shape="poly" coords="961,244,964,160,1041,147,1041,163,1112,164,1111,173,1104,174,1024,188,1025,227,990,233,980,234,977,240" href="#ellington" center="1017,218" alt="ellington">
    <area id="canaan" shape="poly" coords="362,184,431,187,445,112,365,103,359,106,356,115,357,121,353,124,357,137,353,142" href="#canaan" center="408,175" alt="canaan">
    <area id="cornwall" shape="poly" coords="403,317,431,186,361,183,362,212,358,216,357,222,358,229,352,237,352,245,350,256,348,263,344,265,345,269,352,276,352,279,326,306,323,312,341,315" href="#cornwall" center="395,277" alt="cornwall">
    <area id="goshen" shape="poly" coords="474,306,500,190,430,187,403,317" href="#goshen" center="459,281" alt="goshen">
    <area id="warren" shape="poly" coords="347,393,365,396,375,395,407,384,407,381,409,378,409,372,407,368,407,362,408,358,407,357,404,318,398,317,342,315,331,342,332,356" href="#warren" center="383,385" alt="warren">
    <area id="winchester" shape="poly" coords="580,215,594,140,511,145,496,208,505,210,510,218,508,228" href="#winchester" center="555,211" alt="winchester">
    <area id="torrington" shape="poly" coords="474,307,502,303,504,313,532,322,534,317,538,316,537,313,543,303,543,299,564,299,580,215,509,228,510,220,505,211,496,208" href="#torrington" center="538,299" alt="torrington">
    <area id="barkhamsted" shape="poly" coords="580,215,678,206,699,133,594,139" href="#barkhamsted" center="648,204" alt="barkhamsted">
    <area id="new_hartford" shape="poly" coords="564,299,607,301,655,291,663,262,662,258,655,256,651,255,651,250,660,207,580,215" href="#new_hartford" center="620,287" alt="new hartford">
    <area id="litchfield" shape="poly" coords="405,317,501,303,504,311,507,314,531,321,534,326,535,340,537,343,538,346,535,348,535,355,542,359,544,363,548,364,550,368,556,377,567,383,567,387,517,419,506,380,502,378,420,384,420,397,407,384" href="#litchfield" center="484,380" alt="litchfield">
    <area id="thomaston" shape="poly" coords="581,479,571,448,571,443,579,386,567,386,517,419,517,422,524,429,526,426,529,430,533,428,536,433,542,434,547,435,554,442,559,442,559,449,561,458,567,461,576,471,575,483" href="#thomaston" center="565,447" alt="thomaston">
    <area id="durham" shape="poly" coords="799,658,804,644,808,599,848,589,880,583,884,598,877,618,898,639,863,643" href="#durham" center="852,647" alt="durham">
    <area id="north_branford" shape="poly" coords="743,757,747,740,747,680,798,657,799,658,819,653,815,661,798,681,801,732,802,745,802,756,800,763,785,770,781,770,774,762,764,752,757,752" href="#north_branford" center="786,745" alt="north branford">
    <area id="north_haven" shape="poly" coords="696,744,698,733,702,733,703,730,707,729,705,724,700,723,702,718,682,711,686,699,692,694,695,686,697,685,700,658,706,654,716,654,724,646,725,653,734,653,735,656,741,656,740,682,747,680,747,714,740,716,740,734" href="#north_haven" center="731,726" alt="north haven">
    <area id="weston" shape="poly" coords="348,892,372,875,383,847,380,840,352,797,307,816" href="#weston" center="357,870" alt="weston">
    <area id="redding" shape="poly" coords="306,817,293,788,293,773,292,767,287,765,283,764,280,746,367,726,377,756,383,752,397,775" href="#redding" center="343,798" alt="redding">
    <area id="easton" shape="poly" coords="352,796,380,839,383,846,380,856,401,857,414,838,427,856,436,838,437,839,446,833,418,789,418,779,417,775,418,772,421,770,421,757,397,742,383,752,397,774" href="#easton" center="407,837" alt="easton">
    <area id="bethel" shape="poly" coords="367,727,344,655,325,650,328,667,328,675,324,682,315,693,315,695,306,698,304,701,311,739" href="#bethel" center="345,730" alt="bethel">
    <area id="washington" shape="poly" coords="435,484,430,426,431,420,431,408,407,384,376,394,367,395,346,392,344,408,347,429,361,443,368,492" href="#washington" center="405,475" alt="washington">
    <area id="morris" shape="poly" coords="430,426,495,422,517,419,505,378,420,384,420,397,431,408" href="#morris" center="467,427" alt="morris">
    <area id="bethlehem" shape="poly" coords="435,483,504,476,495,422,430,426" href="#bethlehem" center="475,483" alt="bethlehem">
    <area id="roxbury" shape="poly" coords="434,572,426,485,368,492,379,579" href="#roxbury" center="411,560" alt="roxbury">
    <area id="woodbury" shape="poly" coords="506,570,499,529,512,529,512,522,504,476,426,484,434,572,446,570,470,575" href="#woodbury" center="477,566" alt="woodbury">
    <area id="east_windsor" shape="poly" coords="887,169,887,197,891,228,889,233,962,232,964,160" href="#east_windsor" center="934,226" alt="east windsor">
    <area id="windsor_locks" shape="poly" coords="834,182,840,157,893,161,887,168,888,198,878,199,876,204,854,192,847,186" href="#windsor_locks" center="872,207" alt="windsor locks">
    <area id="east_granby" shape="poly" coords="834,182,823,178,814,176,805,211,799,206,795,205,789,201,789,195,784,187,771,185,787,121,825,133,821,155,840,157" href="#east_granby" center="813,193" alt="east granby">
    <area id="haddam" shape="poly" coords="881,583,884,598,877,618,925,666,958,655,1009,647,1006,642,998,621,998,614,995,609,993,608,992,595,986,592,984,585,987,574,987,566" href="#haddam" center="953,645" alt="haddam">
    <area id="east_haddam" shape="poly" coords="987,566,1005,546,1011,562,1016,562,1095,551,1102,551,1102,567,1108,603,1111,607,1115,644,1027,658,1024,657,1020,652,1014,648,1009,647,1005,640,998,622,998,615,996,612,993,607,992,595,989,593,986,590,984,584,987,578" href="#east_haddam" center="1062,633" alt="east haddam">
    <area id="killingworth" shape="poly" coords="948,658,967,735,954,739,916,764,914,761,914,753,908,752,907,748,904,750,896,748,898,708,896,695,882,669,868,661,872,652,865,642,898,639,925,666" href="#killingworth" center="935,733" alt="killingworth">
    <area id="prospect" shape="poly" coords="615,613,652,618,653,607,657,602,658,591,662,586,663,578,661,573,654,564,650,560,635,553,632,552,604,565" href="#prospect" center="644,614" alt="prospect">
    <area id="trumbull" shape="poly" coords="418,779,470,775,490,804,505,803,511,816,514,833,501,844,493,848,486,849,481,850,477,845,472,841,440,843,437,839,446,834,445,830,439,821,429,806,418,787" href="#trumbull" center="474,838" alt="trumbull">
    <area id="shelton" shape="poly" coords="470,775,489,740,493,722,495,716,503,700,506,703,509,709,511,709,516,715,518,724,526,729,530,738,531,741,560,762,560,766,570,775,569,782,565,787,558,790,554,796,553,802,554,816,550,815,544,812,540,807,537,803,511,815,506,803,490,805" href="#shelton" center="526,798" alt="shelton">
    <area id="monroe" shape="poly" coords="398,742,451,706,452,710,456,712,460,712,462,709,465,710,471,706,471,699,476,694,476,689,483,689,485,686,490,694,503,694,502,700,494,720,490,735,488,741,470,775,418,779,417,773,421,769,421,757" href="#monroe" center="465,768" alt="monroe">
    <area id="newtown" shape="poly" coords="376,754,345,657,378,609,382,612,386,612,390,614,393,614,397,610,401,610,403,612,401,619,401,627,402,631,406,634,410,630,414,628,420,628,423,633,425,640,428,646,433,646,438,641,442,641,444,652,448,653,452,650,459,651,467,658,474,667,480,669,483,671,484,677,481,681,485,686,481,690,477,689,476,693,471,699,471,705,467,709,463,709,459,712,455,712,451,708,448,708" href="#newtown" center="412,709" alt="newtown">
    <area id="colchester" shape="poly" coords="1102,567,1176,546,1165,533,1153,524,1150,518,1137,503,1131,496,1116,482,1112,477,1109,478,1101,470,1099,482,1089,489,1078,490,1074,487,1066,488,1060,493,1058,500,1049,493,1045,493,1040,486,1034,498,998,504,1025,560,1101,551,1102,553" href="#colchester" center="1095,553" alt="colchester">
    <area id="east_hampton" shape="poly" coords="971,444,944,448,956,472,943,473,946,482,946,484,944,491,935,508,933,524,930,529,937,536,939,539,938,554,936,561,936,574,988,566,1005,546,1010,562,1025,560" href="#east_hampton" center="977,549" alt="east hampton">
    <area id="chester" shape="poly" coords="959,702,948,659,958,655,1008,646,1020,650,1024,658,1029,667,1029,678,1022,678,1020,684,1015,688,1005,692,1008,696" href="#chester" center="998,701" alt="chester">
    <area id="deep_river" shape="poly" coords="959,702,966,729,979,729,994,742,996,742,998,731,1030,713,1039,703,1052,700,1060,696,1058,693,1047,691,1035,689,1030,686,1028,683,1029,678,1022,678,1020,684,1013,689,1006,692,1008,696" href="#deep_river" center="1015,740" alt="deep river">
    <area id="salem" shape="poly" coords="1176,547,1170,561,1172,571,1175,576,1177,580,1182,621,1181,624,1175,624,1175,634,1163,637,1133,641,1129,642,1116,648,1111,607,1108,601,1103,567" href="#salem" center="1154,627" alt="salem">
    <area id="lyme" shape="poly" coords="1136,710,1082,725,1075,731,1071,733,1066,732,1062,726,1065,707,1065,702,1059,694,1052,691,1033,689,1029,684,1029,680,1029,667,1026,661,1023,655,1028,658,1115,644,1116,648,1129,641,1135,641,1132,670" href="#lyme" center="1102,716" alt="lyme">
    <area id="essex" shape="poly" coords="997,742,998,733,1002,729,1029,714,1039,704,1050,701,1059,695,1065,700,1065,709,1063,726,1063,729,1070,734,1067,738,1060,744,1045,746,1029,753,1022,745" href="#essex" center="1039,752" alt="essex">
    <area id="montville" shape="poly" coords="1264,652,1178,667,1162,637,1175,634,1175,624,1181,623,1182,619,1177,580,1171,565,1192,571,1196,571,1203,571,1204,567,1211,569,1215,573,1223,576,1231,578,1236,578,1239,580,1249,580,1252,582,1256,580,1259,583,1263,588,1268,585,1276,590,1278,596,1280,600,1285,616,1285,622,1281,629,1274,630,1274,638,1266,645" href="#montville" center="1234,648" alt="montville">
    <area id="ledyard" shape="poly" coords="1265,677,1265,671,1269,664,1269,661,1264,652,1266,645,1274,639,1274,631,1282,629,1285,622,1286,617,1293,606,1292,603,1295,596,1303,596,1307,598,1310,596,1317,598,1365,594,1373,619,1372,623,1371,629,1373,636,1375,638,1376,649,1371,650,1366,664,1362,665,1362,678" href="#ledyard" center="1333,668" alt="ledyard">
    <area id="hamden" shape="poly" coords="636,730,636,708,640,699,650,685,650,680,658,673,661,672,660,668,651,661,651,652,648,652,644,645,644,641,647,636,648,631,655,624,654,618,678,622,724,647,716,653,706,654,701,657,699,665,698,679,697,685,693,689,693,693,686,698,682,711,699,717,702,719,699,721,699,724,705,724,707,728,702,730,702,733,699,733,696,737,696,744,693,748,686,749,681,743,674,742,648,739,649,734,652,731,650,727,645,728" href="#hamden" center="686,711" alt="hamden">
    <area id="derby" shape="poly" coords="587,760,588,749,576,752,564,749,553,742,551,737,547,737,543,724,527,731,531,741,560,762,560,766,568,773,569,768,574,763,581,762" href="#derby" center="566,781" alt="derby">
    <area id="ansonia" shape="poly" coords="543,724,554,714,560,714,564,717,582,717,588,747,583,750,576,752,566,749,557,744,553,741,547,736" href="#ansonia" center="578,760" alt="ansonia">
    <area id="woodbridge" shape="poly" coords="582,684,582,716,588,746,588,760,607,766,610,766,619,761,618,752,628,743,628,740,638,734,634,725,635,708,649,685,612,689,596,690" href="#woodbridge" center="619,753" alt="woodbridge">
    <area id="griswold" shape="poly" coords="1432,566,1415,447,1370,454,1366,454,1350,449,1348,453,1348,464,1345,468,1345,474,1340,480,1339,483,1342,483,1344,488,1344,494,1343,498,1344,500,1341,505,1341,510,1342,511,1342,519,1361,519,1365,517,1378,531,1403,561" href="#griswold" center="1401,531" alt="griswold">
    <area id="plainfield" shape="poly" coords="1365,454,1369,415,1366,415,1364,411,1364,407,1365,404,1364,398,1361,398,1359,385,1357,378,1362,372,1362,369,1365,365,1369,369,1372,369,1372,367,1382,358,1389,359,1392,355,1394,349,1392,346,1394,342,1393,338,1392,333,1448,325,1435,443" href="#plainfield" center="1410,419" alt="plainfield">
    <area id="brooklyn" shape="poly" coords="1316,335,1321,292,1338,290,1338,278,1348,278,1349,270,1398,270,1397,280,1404,280,1407,284,1405,288,1405,292,1410,292,1412,294,1413,299,1410,301,1411,309,1400,315,1399,320,1393,329,1393,335,1394,343,1392,346,1393,350" href="#brooklyn" center="1375,377" alt="brooklyn">
    <area id="canterbury" shape="poly" coords="1316,334,1300,362,1294,361,1293,388,1293,391,1294,401,1294,407,1289,437,1365,455,1369,416,1364,413,1364,407,1365,404,1364,399,1360,398,1360,389,1357,378,1362,372,1362,369,1365,365,1371,370,1372,367,1382,358,1388,358,1392,354,1393,350" href="#canterbury" center="1336,419" alt="canterbury">
    <area id="preston" shape="poly" coords="1302,528,1308,531,1311,529,1315,529,1318,531,1322,530,1326,515,1329,517,1331,519,1361,519,1366,518,1403,561,1357,554,1365,594,1316,598,1310,597,1307,598,1303,596,1295,597,1292,601,1293,605,1290,610,1289,613,1285,616,1281,601,1278,596,1278,592,1282,590,1283,585,1285,566,1291,572,1305,553,1300,548,1301,544,1297,542,1299,538,1301,534" href="#preston" center="1342,591" alt="preston">
    <area id="vernon" shape="poly" coords="969,289,976,240,978,236,1026,226,1033,291,994,300,992,286" href="#vernon" center="1015,292" alt="vernon">
    <area id="bolton" shape="poly" coords="994,300,1003,367,1044,361,1032,291" href="#bolton" center="1029,360" alt="bolton">
    <area id="manchester" shape="poly" coords="923,361,915,298,971,279,970,289,992,285,1000,350" href="#manchester" center="967,352" alt="manchester">
    <area id="south_windsor" shape="poly" coords="915,299,871,300,870,291,874,273,876,268,881,264,885,257,887,247,889,234,961,233,962,244,976,240,971,279" href="#south_windsor" center="932,293" alt="south windsor">
    <area id="windsor" shape="poly" coords="870,292,873,279,875,272,877,267,882,263,884,258,890,233,890,226,888,201,887,198,879,199,875,203,870,201,848,187,834,183,823,179,813,176,800,224,839,235,842,296,860,291,858,295,861,297,864,292" href="#windsor" center="872,264" alt="windsor">
    <area id="canton" shape="poly" coords="710,283,706,183,685,182,678,206,660,208,651,246,650,251,652,256,657,256,663,260,662,266,654,292,672,290,672,294,677,290,679,289" href="#canton" center="695,270" alt="canton">
    <area id="simsbury" shape="poly" coords="710,283,706,183,771,184,783,186,785,188,786,191,789,194,789,198,786,199,783,207,781,217,781,224,778,225,771,245,771,252,770,255,771,260,772,272" href="#simsbury" center="753,260" alt="simsbury">
    <area id="bloomfield" shape="poly" coords="762,295,832,292,838,291,838,297,842,297,841,278,839,235,801,224,805,209,790,202,789,198,785,200,782,216,781,223,771,243,771,263,772,272,761,275" href="#bloomfield" center="814,290" alt="bloomfield">
    <area id="bozrah" shape="poly" coords="1170,564,1177,546,1194,497,1234,510,1239,519,1238,538,1233,547,1233,550,1238,571,1238,578,1224,576,1219,573,1213,571,1210,568,1204,567,1203,571,1193,572" href="#bozrah" center="1218,567" alt="bozrah">
    <area id="norwich" shape="poly" coords="1239,519,1239,528,1238,538,1233,548,1233,553,1238,570,1238,580,1243,579,1249,580,1252,583,1255,580,1257,581,1262,587,1268,586,1277,591,1282,589,1283,584,1285,566,1291,572,1304,555,1304,552,1300,547,1301,545,1297,541,1301,534,1302,528,1302,524,1301,515,1304,507,1301,500,1299,490,1294,483,1289,480,1260,486,1256,495,1245,520" href="#norwich" center="1279,565" alt="norwich">
    <area id="franklin" shape="poly" coords="1194,497,1222,425,1247,428,1260,486,1246,518,1244,519,1238,518,1236,513,1234,509" href="#franklin" center="1239,502" alt="franklin">
    <area id="lebanon" shape="poly" coords="1176,547,1220,432,1161,378,1156,382,1156,386,1158,386,1158,389,1153,389,1153,393,1149,392,1143,400,1136,399,1140,406,1142,412,1141,420,1132,420,1116,437,1094,446,1100,470,1109,479,1111,477" href="#lebanon" center="1169,493" alt="lebanon">
    <area id="lisbon" shape="poly" coords="1299,491,1302,486,1307,479,1307,472,1304,466,1304,459,1310,453,1311,442,1348,450,1348,463,1345,468,1345,474,1339,481,1339,483,1342,483,1344,487,1343,501,1342,505,1341,508,1341,511,1342,513,1342,518,1332,519,1326,515,1322,529,1319,531,1315,529,1311,530,1305,530,1302,528,1301,513,1302,509,1304,506,1301,502" href="#lisbon" center="1334,517" alt="lisbon">
    <area id="sprague" shape="poly" coords="1299,491,1307,479,1307,474,1304,467,1304,460,1310,454,1311,442,1247,427,1260,486,1285,480,1289,479,1294,482" href="#sprague" center="1289,490" alt="sprague">
    <area id="scotland" shape="poly" coords="1247,428,1289,437,1294,407,1294,397,1292,391,1292,388,1295,361,1273,358,1259,349,1251,348,1244,379,1245,385,1247,407" href="#scotland" center="1278,422" alt="scotland">
    <area id="windham" shape="poly" coords="1219,431,1222,425,1229,425,1247,428,1246,392,1244,383,1244,378,1251,348,1245,346,1220,341,1218,344,1213,344,1209,346,1205,342,1205,339,1197,339,1197,347,1193,351,1192,356,1196,361,1193,364,1189,365,1152,365,1151,368,1155,369,1160,378" href="#windham" center="1227,416" alt="windham">
    <area id="hampton" shape="poly" coords="1259,350,1265,322,1265,267,1310,266,1317,270,1321,287,1322,291,1316,334,1301,362,1273,358" href="#hampton" center="1299,341" alt="hampton">
    <area id="chaplin" shape="poly" coords="1220,342,1214,265,1227,265,1228,264,1240,263,1245,266,1265,266,1265,322,1259,350" href="#chaplin" center="1251,335" alt="chaplin">
    <area id="bethany" shape="poly" coords="650,685,651,680,657,673,661,672,659,666,650,661,651,653,647,651,644,644,644,641,647,635,647,631,654,623,653,618,615,613,614,617,613,620,598,622,599,630,599,647,596,661,586,659,582,683,586,684,594,690,601,689" href="#bethany" center="631,683" alt="bethany">
    <area id="seymour" shape="poly" coords="511,709,516,715,516,720,519,724,526,729,527,731,530,729,544,723,551,717,554,714,561,714,564,717,582,717,582,682,584,669,587,659,571,656,569,661,567,669,562,669,559,674,554,680,537,681,535,690" href="#seymour" center="566,727" alt="seymour">
    <area id="oxford" shape="poly" coords="558,676,553,680,537,681,535,690,531,694,510,709,506,703,502,700,504,694,490,694,481,681,484,676,483,671,478,668,473,667,468,659,494,638,499,631,497,630,498,623,503,619,504,594,518,594,534,595,542,594,542,601,561,617,550,663,550,667" href="#oxford" center="530,677" alt="oxford">
    <area id="watertown" shape="poly" coords="513,528,551,517,558,500,577,498,574,495,576,471,568,465,564,459,560,457,559,442,554,441,549,438,548,435,542,434,535,433,535,430,534,428,530,430,527,427,523,429,517,422,516,419,495,422" href="#watertown" center="541,501" alt="watertown">
    <area id="waterbury" shape="poly" coords="566,571,605,565,631,552,634,552,639,555,648,532,631,533,615,513,609,504,607,498,605,481,604,478,601,476,597,474,588,474,575,482,574,494,577,498,571,499,558,500,550,517,553,539,556,553" href="#waterbury" center="602,558" alt="waterbury">
    <area id="beacon_falls" shape="poly" coords="557,676,550,667,550,663,562,617,573,626,578,621,578,616,582,613,585,614,589,616,596,616,598,620,599,648,596,661,588,659,572,656,567,668,563,669" href="#beacon_falls" center="587,671" alt="beacon falls">
    <area id="naugatuck" shape="poly" coords="542,594,544,587,549,581,549,570,567,571,597,566,604,565,615,610,615,616,613,620,599,622,597,617,588,616,582,613,578,614,578,620,574,625,571,625,560,616,542,601" href="#naugatuck" center="590,621" alt="naugatuck">
    <area id="middlebury" shape="poly" coords="504,594,504,587,501,585,504,577,506,570,499,529,512,528,550,516,556,550,558,554,566,570,549,570,549,580,543,587,542,594" href="#middlebury" center="540,587" alt="middlebury">
    <area id="southbury" shape="poly" coords="394,612,402,610,403,616,402,621,402,629,406,634,410,630,415,628,420,628,424,634,426,641,429,646,433,646,439,641,442,641,443,648,445,652,451,651,459,650,467,659,471,657,499,633,497,626,498,623,504,618,503,607,505,600,504,589,501,585,504,578,505,570,472,575,465,574,447,570,439,571,386,578,387,583,382,588,384,592,383,597,387,604" href="#southbury" center="458,635" alt="southbury">
    <area id="bridgewater" shape="poly" coords="395,612,386,605,383,598,383,589,387,583,387,578,379,578,371,521,353,520,338,527,338,538,329,544,327,551,329,556,329,561,339,567,340,572,338,576,346,582,347,592,356,596,359,600,369,605,375,605,378,610,386,612,391,614" href="#bridgewater" center="369,589" alt="bridgewater">
    <area id="brookfield" shape="poly" coords="345,657,378,609,375,605,370,604,358,599,356,596,349,593,347,589,345,582,342,578,338,576,338,574,340,571,339,569,303,591,303,598,301,606,305,609,310,614,312,622,317,644,320,649" href="#brookfield" center="344,642" alt="brookfield">
    <area id="harwinton" shape="poly" coords="618,380,605,300,543,299,543,302,538,311,538,315,534,317,532,321,534,326,535,334,535,340,538,345,535,348,535,355,542,359,544,363,551,368,556,377,567,386" href="#harwinton" center="587,372" alt="harwinton">
    <area id="burlington" shape="poly" coords="691,373,683,321,676,318,671,311,671,299,669,295,674,293,672,290,649,292,639,294,606,301,619,381" href="#burlington" center="654,366" alt="burlington">
    <area id="avon" shape="poly" coords="762,337,760,321,761,307,763,301,762,292,761,288,761,275,679,289,670,295,671,298,671,310,674,316,675,318,686,320,688,324,688,328,692,332,697,331,721,334,733,336,743,338" href="#avon" center="733,336" alt="avon">
    <area id="farmington" shape="poly" coords="787,379,787,358,782,357,779,359,778,362,775,365,774,349,763,348,761,338,757,337,740,338,702,332,696,332,691,331,688,327,687,322,682,320,685,334,693,398,707,394,749,405,772,381" href="#farmington" center="741,401" alt="farmington">
    <area id="mansfield" shape="poly" coords="1214,265,1221,341,1217,343,1214,343,1212,342,1209,345,1205,342,1205,338,1198,339,1197,347,1194,349,1192,354,1193,358,1196,361,1192,364,1147,365,1143,352,1139,349,1143,346,1142,343,1138,335,1139,333,1137,324,1134,319,1131,312,1123,302,1117,300,1114,299,1113,302,1108,299,1110,294,1106,292,1107,286,1105,282,1108,279,1107,275,1108,271,1111,268,1110,262" href="#mansfield" center="1183,337" alt="mansfield">
    <area id="coventry" shape="poly" coords="1039,329,1052,332,1062,332,1073,330,1079,329,1098,356,1098,358,1105,362,1111,363,1115,366,1119,368,1129,370,1134,371,1139,373,1142,376,1147,371,1150,373,1154,370,1151,365,1146,364,1143,352,1139,348,1142,346,1138,335,1140,333,1137,325,1133,316,1130,312,1124,303,1114,299,1113,302,1108,300,1109,295,1106,290,1107,286,1105,283,1107,279,1108,270,1111,267,1110,262,1086,266,1060,269,1031,274" href="#coventry" center="1095,342" alt="coventry">
    <area id="columbia" shape="poly" coords="1094,447,1117,436,1132,420,1141,419,1142,411,1139,405,1137,402,1137,399,1141,399,1142,400,1145,397,1149,392,1152,393,1154,389,1158,389,1155,384,1160,379,1157,372,1154,369,1151,372,1148,370,1143,375,1131,372,1123,369,1117,368,1106,362,1099,360,1097,357,1078,389" href="#columbia" center="1122,427" alt="columbia">
    <area id="hebron" shape="poly" coords="1078,389,1096,452,1100,470,1099,482,1092,487,1088,489,1079,489,1073,487,1065,488,1060,494,1059,497,1052,496,1049,493,1040,488,1040,465,1041,461,1026,429,1020,425,1013,421,1011,417,1003,367,1030,363,1047,396,1053,396,1072,392,1076,393" href="#hebron" center="1065,465" alt="hebron">
    <area id="andover" shape="poly" coords="1030,363,1047,396,1077,392,1078,388,1098,357,1078,329,1064,332,1051,331,1039,330,1044,361" href="#andover" center="1074,371" alt="andover">
    <area id="marlborough" shape="poly" coords="971,444,999,505,1035,498,1041,486,1040,456,1026,429,1012,420,1010,412,1009,404,997,406,993,405,989,409,988,412,990,414,992,419,992,423,984,426,978,429,976,433" href="#marlborough" center="1017,487" alt="marlborough">
    <area id="west_hartford" shape="poly" coords="821,371,787,377,787,358,782,357,778,359,778,362,775,365,774,349,763,348,761,324,760,320,760,314,763,302,762,294,819,292,821,314,822,317,821,326" href="#west_hartford" center="806,366" alt="west hartford">
    <area id="hartford" shape="poly" coords="821,371,860,365,864,365,870,367,873,361,874,356,870,346,864,342,857,336,858,325,862,321,869,313,870,308,870,292,864,292,861,297,858,297,859,292,851,293,844,295,842,297,838,296,838,292,819,292,820,298,821,310,822,317,820,325,820,334" href="#hartford" center="851,363" alt="hartford">
    <area id="glastonbury" shape="poly" coords="971,444,978,429,981,427,990,424,992,421,992,418,988,411,993,406,996,406,1009,404,1001,350,869,371,873,380,876,381,887,381,892,385,892,388,891,391,877,395,877,403,885,403,892,405,896,408,897,414,896,419,889,422,884,425,883,428,886,439,886,447,883,453,882,457" href="#glastonbury" center="947,433" alt="glastonbury">
    <area id="rocky_hill" shape="poly" coords="822,462,821,439,829,438,828,423,839,422,844,421,849,423,853,423,857,419,858,413,866,409,877,406,887,405,893,406,896,408,897,413,896,417,894,420,887,422,883,426,884,431,886,438,886,446,884,451" href="#rocky_hill" center="868,466" alt="rocky hill">
    <area id="newington" shape="poly" coords="796,444,812,442,812,439,822,440,829,437,827,425,826,419,831,417,827,393,826,381,828,370,791,376,787,378" href="#newington" center="823,437" alt="newington">
    <area id="wethersfield" shape="poly" coords="827,423,826,419,832,418,830,411,831,406,827,394,826,386,827,379,828,370,859,365,864,365,875,370,868,371,871,375,871,377,875,380,888,381,892,386,891,390,878,393,877,402,890,404,877,406,867,408,858,413,856,419,853,423,848,422,841,421" href="#wethersfield" center="862,425" alt="wethersfield">
    <area id="east_hartford" shape="poly" coords="923,362,878,370,872,369,870,367,873,360,874,356,870,346,865,343,857,336,858,330,858,325,862,320,869,313,871,309,870,299,915,298" href="#east_hartford" center="901,363" alt="east hartford">
    <area id="kent" shape="poly" coords="247,423,255,424,257,420,339,409,345,408,343,403,343,393,346,393,344,384,337,369,332,356,331,348,331,339,336,334,342,315,321,314,325,307,254,303" href="#kent" center="305,392" alt="kent">
    <area id="sherman" shape="poly" coords="236,562,291,549,275,491,261,451,262,445,266,443,270,441,264,428,260,430,255,424,252,423,247,423,247,426" href="#sherman" center="266,531" alt="sherman">
    <area id="new_milford" shape="poly" coords="302,588,339,569,336,565,331,563,327,552,327,546,330,541,335,540,338,537,337,529,349,521,352,520,372,520,361,443,346,429,344,408,257,420,255,422,257,426,259,430,263,428,266,434,270,440,268,443,263,445,261,450,272,486" href="#new_milford" center="329,514" alt="new milford">
</map>

Follow up 2014-11-25:

  • modded the averaging algorithm – much faster now
  • json encoding data and passing to var for jQuery distance, angle, and message

Follow up 2014-11-26:

  • hardcoded town center xy coordinates into area mapping using ‘center=”xy”‘ – averaging was off center
  • Note: Using ‘center=”xy”‘ is not proper HTML and will not pass validation. However, no issues observed in any browser tested. You could move the coordinates to the alt or title sections if this is troubling to you
  • set up toggle of using hardcoded centers versus auto-averaging
  • adding additional processing of angle to display 0 to 360 degrees (as in a compass)

Follow up 2014-12-02:

  • broke code into components for easier maintenance – html(mapping), php, css, js
  • area click modded to recenter/reset origin/reference point – clicking on a town will show distance and direction to that town
This entry was posted in jQuery, PHP and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter Captcha Here : *

Reload Image