{"id":301,"date":"2014-11-22T20:39:56","date_gmt":"2014-11-23T01:39:56","guid":{"rendered":"http:\/\/www.lektrikpuke.com\/blog\/?p=301"},"modified":"2014-12-03T10:57:56","modified_gmt":"2014-12-03T15:57:56","slug":"towns-in-connecticut-highlighting-mapped-regions-of-an-image-with-jquery","status":"publish","type":"post","link":"https:\/\/lektrikpuke.com\/blog\/2014\/11\/22\/towns-in-connecticut-highlighting-mapped-regions-of-an-image-with-jquery\/","title":{"rendered":"Towns In Connecticut &#8211; Highlighting Mapped Regions Of An Image With jQuery"},"content":{"rendered":"<p>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 <a href=\"http:\/\/davidlynch.org\/projects\/maphilight\/docs\/\" target=\"_blank\">David Lynch&#8217;s Blog About maphilight<\/a>.<\/p>\n<p>Fast forward a couple days and here is my answer to not knowing where the cities and towns of Connecticut are located, <a href=\"http:\/\/www.lektrikpuke.com\/additional-pages\/connecticut.php\" target=\"_blank\">Click Here To See An Example Of Connecticut Towns<\/a>.  I&#8217;ve modified the jQuery maphilight example to meet my needs and removed what I considered unnecessary script.<\/p>\n<p>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.<\/p>\n<p>The process for generating a map being:<\/p>\n<ol>\n<li>Map an image in &#8216;poly&#8217; area(s) &#8211; I used Dreamweaver in an html document<\/li>\n<li>Place mapping in PHP heredoc, so that it can be parsed for link information<\/li>\n<li>Replace image (if necessary) that approximates the *original image in size and shape<\/li>\n<\/ol>\n<p>* 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.<\/p>\n<p>Code for above example (Connecticut Towns) here:<\/p>\n<p><strong>PHP code<\/strong> saved as connecticut.php<\/p>\n<pre style=\"font-size:12px; line-height:1.1em; letter-spacing:.002em; word-spacing:.005em;\">\r\n&lt;?php\r\n\/**\r\n * connecticut.php\r\n * a php and jQuery script that utilizes maphilight.js and a mapped image to highlight towns in Connecticut\r\n * @author Robert Newton &lt;lektrikpukeAtYahooDotCom&gt;\r\n * if you use\/reuse my code, please give a mention to my site\/blog--Thanks!\r\n * maphilight.js (and the original example) found at http:\/\/davidlynch.org\/projects\/maphilight\/docs\/\r\n *\/\r\n$map = file_get_contents('images\/connecticut.html'); \/\/ get file contents here of mapped html here\r\n\r\n\/\/ ************************************* Generate Town Average Points (under ideal conditions yielding a center point) ***********************\r\n\r\n$matches = explode(&quot;\\n&quot;, $map); \/\/ on-line server is nix based, so \\n only\r\nasort($matches);\r\n\r\nforeach ($matches as $key =&gt; $value) {\r\n    $xAndYarr = '';\r\n    $xArr = '';\r\n    $yArr = '';\r\n    $xAverage = 0;\r\n    $yAverage = 0;\r\n    $useHardCodedCenters = TRUE; \/\/ toggle using hardcoded town centers on and off - off meaning mapped town centers are calculated\r\n\r\n    if (preg_match_all(&quot;\/(?&lt;=id=\\&quot;)(.*?)(?=\\&quot;)\/s&quot;, $value, $townNameResult)) {\r\n        $townName = $townNameResult[1][0];\r\n        $pertinentDataArr[$townName]['name'] = ucwords(str_replace('_', ' ', $townName));\r\n\r\n        if (preg_match_all(&quot;\/(?&lt;=center=\\&quot;)(.*?)(?=\\&quot;)\/s&quot;, $value, $centerResult) && $centerResult[1][0] !== '' && $useHardCodedCenters) {\r\n            $separateXYarr = explode(',', $centerResult[1][0]);\r\n            $pertinentDataArr[$townName]['xAv'] = $separateXYarr[0];\r\n            $pertinentDataArr[$townName]['yAv'] = $separateXYarr[1];\r\n        }\r\n        else if (preg_match_all(&quot;\/(?&lt;=coords=\\&quot;)(.*?)(?=\\&quot;)\/s&quot;, $value, $result)) { \/\/ find all the ids (between the quotes) and add them to result\r\n            $idArr = $result[1];\r\n            foreach ($idArr as $k =&gt; $v) {\r\n                $xAndYarr = explode(',', $v);\r\n                foreach ($xAndYarr as $ki =&gt; $vi) { \/\/ split array into x and y arrays based on even or odd (x's even)\r\n                    if ($ki % 2 === 0) {\r\n                        $xArr[] = $vi;\r\n                    }\r\n                    else {\r\n                        $yArr[] = $vi;\r\n                    }\r\n                } \/\/ end foreach $xAndYarr\r\n\r\n                foreach ($xArr as $kii =&gt; $vii) {\r\n                    $xAverage += $vii;\r\n                }\r\n                $xAverage \/= count($xArr);\r\n\r\n                foreach ($yArr as $kyi =&gt; $vyi) {\r\n                    $yAverage += $vyi;\r\n                }\r\n                $yAverage \/= count($yArr);\r\n            } \/\/ end foreach idArr\r\n\r\n            $pertinentDataArr[$townName]['xAv'] = round($xAverage, 2);\r\n            $pertinentDataArr[$townName]['yAv'] = round($yAverage, 2);\r\n        } \/\/ end pregmatch coords\r\n    } \/\/ end pregmatch id\r\n}\r\n$jsonEnc = json_encode($pertinentDataArr);\r\n?&gt;&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;meta charset=&quot;utf-8&quot;&gt;\r\n        &lt;title&gt;Connecticut Cities &amp; Towns&lt;\/title&gt;\r\n        &lt;script type=&quot;text\/javascript&quot; src=&quot;js\/jquery-1.11.1.min.js&quot;&gt;&lt;\/script&gt;\r\n        &lt;script type=&quot;text\/javascript&quot; src=&quot;js\/jquery.maphilight.js&quot;&gt;&lt;\/script&gt;\r\n        &lt;script type=&quot;text\/javascript&quot;&gt;\r\n            var obj = jQuery.parseJSON('&lt;?php echo $jsonEnc; ?&gt;');\r\n        &lt;\/script&gt;\r\n        &lt;script type=&quot;text\/javascript&quot; src=&quot;js\/connecticut.js&quot;&gt;&lt;\/script&gt;\r\n        &lt;link href=&quot;css\/connecticut.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; \/&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n        &lt;div style=&quot;float:left;&quot;&gt;\r\n            &lt;?php echo $map . &quot;\\n&quot;; ?&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div style=&quot;float:left; padding-top:70px;&quot;&gt;\r\n            &lt;?php\r\n            \/\/ let's make the links\r\n            if (preg_match_all(&quot;\/(?&lt;=id=\\&quot;)(.*?)(?=\\&quot;)\/s&quot;, $map, $result)) { \/\/ find all the ids (between the quotes) and add them to result\r\n                $idArr = $result[1]; \/\/ copy result of 1 to idArr\r\n                asort($idArr); \/\/ sort array alphabetically\r\n                $counter = 1;\r\n                $linkText = '&lt;ul&gt;' . &quot;\\n&quot;;\r\n                foreach ($idArr as $k =&gt; $v) {\r\n                    if ($v != 'Map') { \/\/ we don't want the image id itself to show up\r\n                        $linkText .= '&lt;li&gt;&lt;a id=&quot;' . $v . '&quot; href=&quot;#' . $v . '&quot;&gt;' . ucwords(str_replace('_', ' ', $v)) . '&lt;\/a&gt;&lt;\/li&gt;' . &quot;\\n&quot;;\r\n                        if ($counter % 57 == 0) { \/\/ chose this number so 3 columns would fit alongside image\r\n                            $linkText .= '&lt;\/ul&gt;\r\n                            &lt;\/div&gt;\r\n                            &lt;div style=&quot;float:left; padding:70px 0 0 15px;&quot;&gt;\r\n                            &lt;ul&gt;\r\n                            ';\r\n                        }\r\n                        $counter += 1;\r\n                    }\r\n                }\r\n                $linkText .= '&lt;\/ul&gt;' . &quot;\\n&quot;;\r\n            }\r\n            echo $linkText;\r\n            ?&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>jQuery code<\/strong> saved as connecticut.js<\/p>\n<pre style=\"font-size:12px; line-height:1.1em; letter-spacing:.002em; word-spacing:.005em;\">\r\n$(function () {\r\n    $('body').append('&lt;div id=&quot;tooltip&quot;&gt;&lt;\/div&gt;');\r\n    $('#tooltip').hide();\r\n    var $tooltip = $('#tooltip');\r\n\r\n    var refY = 581;\r\n    var refX = 772;\r\n    var refName = &quot;Meriden&quot;;\r\n    var compassDir = &quot;Unknown&quot;;\r\n    var $title = &quot;Error&quot;;\r\n\r\n    var conversionFactor = (90 \/ 1242);\r\n\r\n    var xySign = function (angle, ySign, xSign) {\r\n        if (ySign === true && xSign === true) {\r\n            angle = Math.round((90 - angle) * 10) \/ 10;\r\n        }\r\n        else if (ySign === false && xSign === true) {\r\n            angle = Math.round((90 + angle) * 10) \/ 10;\r\n        }\r\n        else if (ySign === false && xSign === false) {\r\n            angle = Math.round((270 - angle) * 10) \/ 10;\r\n        }\r\n        else {\r\n            angle = Math.round((270 + angle) * 10) \/ 10;\r\n        }\r\n        return angle;\r\n    };\r\n\r\n    var calcAngle = function (angle) {\r\n        var compassDir = '';\r\n        switch (true) {\r\n            case (angle &gt; 348.75 || angle &lt;= 11.25) :\r\n                compassDir = &quot;N&quot;;\r\n                break;\r\n            case (angle &gt; 11.25 && angle &lt;= 33.75) :\r\n                compassDir = &quot;NNE&quot;;\r\n                break;\r\n            case (angle &gt; 33.75 && angle &lt;= 56.25) :\r\n                compassDir = &quot;NE&quot;;\r\n                break;\r\n            case (angle &gt; 56.25 && angle &lt;= 78.75) :\r\n                compassDir = &quot;ENE&quot;;\r\n                break;\r\n            case (angle &gt; 78.75 && angle &lt;= 101.25) :\r\n                compassDir = &quot;E&quot;;\r\n                break;\r\n            case (angle &gt; 101.25 && angle &lt;= 123.75) :\r\n                compassDir = &quot;ESE&quot;;\r\n                break;\r\n            case (angle &gt; 123.75 && angle &lt;= 146.25) :\r\n                compassDir = &quot;SE&quot;;\r\n                break;\r\n            case (angle &gt; 146.25 && angle &lt;= 168.75) :\r\n                compassDir = &quot;SSE&quot;;\r\n                break;\r\n            case (angle &gt; 168.75 && angle &lt;= 191.25) :\r\n                compassDir = &quot;S&quot;;\r\n                break;\r\n            case (angle &gt; 191.25 && angle &lt;= 213.75) :\r\n                compassDir = &quot;SSW&quot;;\r\n                break;\r\n            case (angle &gt; 213.75 && angle &lt;= 236.25) :\r\n                compassDir = &quot;SW&quot;;\r\n                break;\r\n            case (angle &gt; 236.25 && angle &lt;= 258.75) :\r\n                compassDir = &quot;WSW&quot;;\r\n                break;\r\n            case (angle &gt; 258.75 && angle &lt;= 281.25) :\r\n                compassDir = &quot;W&quot;;\r\n                break;\r\n            case (angle &gt; 281.25 && angle &lt;= 303.75) :\r\n                compassDir = &quot;WNW&quot;;\r\n                break;\r\n            case (angle &gt; 303.75 && angle &lt;= 326.25) :\r\n                compassDir = &quot;NW&quot;;\r\n                break;\r\n            case (angle &gt; 326.25 && angle &lt;= 348.75) :\r\n                compassDir = &quot;NNW&quot;;\r\n                break;\r\n            default:\r\n                compassDir = &quot;Unknown&quot;;\r\n        }\r\n        return compassDir;\r\n    } \/\/ end function containing switch statement\r\n\r\n    $('.map').maphilight({\r\n        fillColor: '008800'\r\n    });\r\n\r\n    $('a').mouseover(function (e) {\r\n        $(&quot;#&quot; + this.id).mouseover();\r\n    }).mouseout(function (e) {\r\n        $(&quot;#&quot; + this.id).mouseout();\r\n    });\r\n\r\n    $('area').mouseover(function (e) {\r\n        ySign = Math.abs(obj[this.id]['yAv']) &lt; Math.abs(refY) ? true : false; \/\/ inverse logic because pix count from upper left corner\r\n        xSign = Math.abs(obj[this.id]['xAv']) &gt; Math.abs(refX) ? true : false;\r\n        yDiff = Math.abs(refY - obj[this.id]['yAv']);\r\n        xDiff = Math.abs(refX - obj[this.id]['xAv']);\r\n        slope = yDiff \/ xDiff;\r\n        distance = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));\r\n        miles = Math.round(distance * conversionFactor * 10) \/ 10;\r\n        \r\n        angle = Math.round((Math.atan(slope)) * 57.29577951471); \/\/ arctangent of the slope * rad = angle\r\n        angle = xySign(angle, ySign, xSign); \/\/ call function to determine quadrant and calculate correct angle\r\n        compassDir = calcAngle(angle); \/\/ determine compass heading\r\n\r\n        $title = obj[this.id]['name'] + &quot; is &quot; + miles + &quot; miles &quot; + compassDir + &quot; of &quot; + refName + &quot; at approximately &quot; + angle + &quot; degrees (as the penguin flies)&quot;;\r\n        $('#tooltip').title = $title;\r\n        $tooltip.text($title).show();\r\n\r\n        $('area').mousemove(function (e) {\r\n            $tooltip.css({\r\n                top: e.pageY - 10,\r\n                left: e.pageX + 150\r\n            });\r\n        });\r\n\r\n        $('a').mousemove(function (e) {\r\n            $tooltip.css({\r\n                top: e.pageY - 95,\r\n                left: e.pageX - 100\r\n            });\r\n        });\r\n    }); \/\/ end mouseover area\r\n\r\n    $('area').mouseout(function (e) {\r\n        $tooltip.text('').hide();\r\n    });\r\n\r\n    $('area').click(\/\/ or you could use 'a' instead of 'area', which would work by clicking on a link\r\n            function () {\r\n                refY = obj[this.id]['yAv']; \/\/ set the global var to the clicked on y coordinate - make this the new reference point\r\n                refX = obj[this.id]['xAv']; \/\/ set the global var to the clicked on x coordinate - make this the new reference point\r\n                refName = obj[this.id]['name']; \/\/ set the global var to the clicked on town name - make this the new reference point\r\n                var data = $(&quot;#&quot; + this.id).mouseout().data('maphilight') || {};\r\n                data.alwaysOn = !data.alwaysOn; \/\/ allows for toggling 'highlight always on' on and off\r\n                $(&quot;#&quot; + this.id).data('maphilight', data).trigger('alwaysOn.maphilight');\r\n            }\r\n    );\r\n});\r\n<\/pre>\n<p><strong>CSS code<\/strong> saved as connecticut.css<\/p>\n<pre style=\"font-size:12px; line-height:1.1em; letter-spacing:.002em; word-spacing:.005em;\">\r\na:visited {\r\n    color: #00C;\r\n}\r\na:hover {\r\n    color: #F00;\r\n}\r\nul {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 13px;\r\n}\r\n#tooltip {\r\n    padding: 10px 15px;\r\n    position: absolute;\r\n    font-size: 14px;\r\n    color: #eee;\r\n    background: #777;\r\n    z-index: 10;\r\n}\r\n#clickTown{\r\n    padding: 5px;\r\n    border: 1px solid #00f;\r\n    position: absolute;\r\n    font-family: sans-serif;\r\n    font-size: 10px;\r\n    color: #333;\r\n    background-color: #ccc;\r\n}\r\n<\/pre>\n<p><strong>HTML (image mapping) code<\/strong> saved as connecticut.html<\/p>\n<pre style=\"font-size:12px; line-height:1.1em; letter-spacing:.002em; word-spacing:.005em;\">\r\n&lt;!--&lt;img src=&quot;images\/Connecticut cities towns map.gif&quot; alt=&quot;connecticut cities&quot; width=&quot;1569&quot; height=&quot;1141&quot; border=&quot;0&quot; class=&quot;map&quot; usemap=&quot;#features&quot; \/&gt;--&gt;\r\n&lt;img src=&quot;images\/ctRoadsMap.jpg&quot; alt=&quot;connecticut cities&quot; width=&quot;1569&quot; height=&quot;1141&quot; border=&quot;0&quot; class=&quot;map&quot; usemap=&quot;#features&quot; \/&gt;\r\n&lt;!--&lt;img src=&quot;images\/connFreeways.jpg&quot; alt=&quot;connecticut cities&quot; width=&quot;1569&quot; height=&quot;1141&quot; border=&quot;0&quot; class=&quot;map&quot; usemap=&quot;#features&quot; \/&gt;--&gt;\r\n&lt;!--&lt;img src=&quot;images\/Connecticut cities towns map with dots.jpg&quot; alt=&quot;connecticut cities&quot; width=&quot;1569&quot; height=&quot;1141&quot; border=&quot;0&quot; class=&quot;map&quot; usemap=&quot;#features&quot; \/&gt;--&gt;\r\n&lt;map name=&quot;features&quot; id=&quot;Map&quot;&gt;\r\n    &lt;area id=&quot;salisbury&quot; shape=&quot;poly&quot; coords=&quot;363,183,267,181,274,58,377,60,354,116&quot; center=&quot;322,130&quot; alt=&quot;salisbury&quot; href=&quot;#salisbury&quot; \/&gt;\r\n    &lt;area id=&quot;sharon&quot; shape=&quot;poly&quot; coords=&quot;254,306,322,308,352,278,347,267,361,214,361,185,266,180&quot; center=&quot;313,267&quot; alt=&quot;sharon&quot; href=&quot;#sharon&quot; \/&gt;\r\n    &lt;area id=&quot;new_fairfield&quot; shape=&quot;poly&quot; coords=&quot;232,638,310,618,301,607,303,593,293,548,237,562&quot; center=&quot;274,626&quot; alt=&quot;new fairfield&quot; href=&quot;#new_fairfield&quot; \/&gt;\r\n    &lt;area id=&quot;danbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; center=&quot;290,709&quot; alt=&quot;danbury&quot; href=&quot;#danbury&quot; \/&gt;\r\n    &lt;area id=&quot;ridgefield&quot; shape=&quot;poly&quot; coords=&quot;254,834,301,808,293,788,293,773,291,766,283,764,280,749,268,715,258,716,252,700,228,701,220,776&quot; center=&quot;265,798&quot; alt=&quot;ridgefield&quot; href=&quot;#ridgefield&quot; \/&gt;\r\n    &lt;area id=&quot;meriden&quot; shape=&quot;poly&quot; coords=&quot;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&quot; center=&quot;772,581&quot; alt=&quot;meriden&quot; href=&quot;#meriden&quot; data-maphilight='{&quot;strokeColor&quot;:&quot;0000ff&quot;,&quot;strokeWidth&quot;:5,&quot;fillColor&quot;:&quot;ff0000&quot;,&quot;fillOpacity&quot;:0.6}' \/&gt;\r\n    &lt;area id=&quot;berlin&quot; shape=&quot;poly&quot; coords=&quot;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&quot; center=&quot;787,507&quot; alt=&quot;berlin&quot; href=&quot;#berlin&quot; \/&gt;\r\n    &lt;area id=&quot;wallingford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; center=&quot;770,648&quot; alt=&quot;wallingford&quot; href=&quot;#wallingford&quot; \/&gt;\r\n    &lt;area id=&quot;cheshire&quot; shape=&quot;poly&quot; coords=&quot;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&quot; center=&quot;697,601&quot; alt=&quot;cheshire&quot; href=&quot;#cheshire&quot; \/&gt;\r\n    &lt;area id=&quot;southington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#southington&quot; center=&quot;710,515&quot; alt=&quot;southington&quot;&gt;\r\n    &lt;area id=&quot;cromwell&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#cromwell&quot; center=&quot;870,507&quot; alt=&quot;cromwell&quot;&gt;\r\n    &lt;area id=&quot;wolcott&quot; shape=&quot;poly&quot; coords=&quot;631,533,608,504,602,462,612,461,616,461,629,450,661,447,665,480,656,530&quot; href=&quot;#wolcott&quot; center=&quot;649,518&quot; alt=&quot;wolcott&quot;&gt;\r\n    &lt;area id=&quot;new_britain&quot; shape=&quot;poly&quot; coords=&quot;796,440,788,378,772,381,749,404,746,411,744,425,744,435,746,445&quot; href=&quot;#new_britain&quot; center=&quot;781,445&quot; alt=&quot;new britain&quot;&gt;\r\n    &lt;area id=&quot;plainville&quot; shape=&quot;poly&quot; coords=&quot;700,442,694,397,705,394,749,405,745,417,744,426,745,435&quot; href=&quot;#plainville&quot; center=&quot;730,449&quot; alt=&quot;plainville&quot;&gt;\r\n    &lt;area id=&quot;bristol&quot; shape=&quot;poly&quot; coords=&quot;630,450,619,381,690,372,700,442,673,446,673,451,669,451,668,446&quot; href=&quot;#bristol&quot; center=&quot;671,438&quot; alt=&quot;bristol&quot;&gt;\r\n    &lt;area id=&quot;plymouth&quot; shape=&quot;poly&quot; coords=&quot;578,385,571,445,571,448,581,479,589,475,599,474,604,476,602,462,613,462,629,449,619,381,616,379&quot; href=&quot;#plymouth&quot; center=&quot;610,456&quot; alt=&quot;plymouth&quot;&gt;\r\n    &lt;area id=&quot;middlefield&quot; shape=&quot;poly&quot; coords=&quot;849,589,846,563,844,555,837,541,836,538,817,538,807,541,797,542,801,600&quot; href=&quot;#middlefield&quot; center=&quot;834,599&quot; alt=&quot;middlefield&quot;&gt;\r\n    &lt;area id=&quot;middletown&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#middletown&quot; center=&quot;872,568&quot; alt=&quot;middletown&quot;&gt;\r\n    &lt;area id=&quot;portland&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#portland&quot; center=&quot;925,520&quot; alt=&quot;portland&quot;&gt;\r\n    &lt;area id=&quot;wilton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#wilton&quot; center=&quot;311,896&quot; alt=&quot;wilton&quot;&gt;\r\n    &lt;area id=&quot;new_canaan&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#new_canaan&quot; center=&quot;267,936&quot; alt=&quot;new canaan&quot;&gt;\r\n    &lt;area id=&quot;stamford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#stamford&quot; center=&quot;222,987&quot; alt=&quot;stamford&quot;&gt;\r\n    &lt;area id=&quot;greenwich&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#greenwich&quot; center=&quot;163,1019&quot; alt=&quot;greenwich&quot;&gt;\r\n    &lt;area id=&quot;darien&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#darien&quot; center=&quot;276,1008&quot; alt=&quot;darien&quot;&gt;\r\n    &lt;area id=&quot;norwalk&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#norwalk&quot; center=&quot;321,975&quot; alt=&quot;norwalk&quot;&gt;\r\n    &lt;area id=&quot;westport&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#westport&quot; center=&quot;376,949&quot; alt=&quot;westport&quot;&gt;\r\n    &lt;area id=&quot;north_canaan&quot; shape=&quot;poly&quot; coords=&quot;377,60,453,65,445,112,364,104,363,93,368,90,367,82&quot; href=&quot;#north_canaan&quot; center=&quot;419,114&quot; alt=&quot;north canaan&quot;&gt;\r\n    &lt;area id=&quot;norfolk&quot; shape=&quot;poly&quot; coords=&quot;453,64,528,67,500,190,431,187&quot; href=&quot;#norfolk&quot; center=&quot;487,158&quot; alt=&quot;norfolk&quot;&gt;\r\n    &lt;area id=&quot;colebrook&quot; shape=&quot;poly&quot; coords=&quot;528,67,612,70,597,138,594,140,511,145&quot; href=&quot;#colebrook&quot; center=&quot;571,137&quot; alt=&quot;colebrook&quot;&gt;\r\n    &lt;area id=&quot;hartland&quot; shape=&quot;poly&quot; coords=&quot;612,70,715,72,699,133,597,140&quot; href=&quot;#hartland&quot; center=&quot;664,134&quot; alt=&quot;hartland&quot;&gt;\r\n    &lt;area id=&quot;granby&quot; shape=&quot;poly&quot; coords=&quot;715,72,751,72,749,109,779,105,776,117,787,120,771,185,685,182&quot; href=&quot;#granby&quot; center=&quot;746,174&quot; alt=&quot;granby&quot;&gt;\r\n    &lt;area id=&quot;suffield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#suffield&quot; center=&quot;859,143&quot; alt=&quot;suffield&quot;&gt;\r\n    &lt;area id=&quot;enfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#enfield&quot; center=&quot;949,155&quot; alt=&quot;enfield&quot;&gt;\r\n    &lt;area id=&quot;somers&quot; shape=&quot;poly&quot; coords=&quot;968,75,1048,76,1040,148,980,158&quot; href=&quot;#somers&quot; center=&quot;1018,145&quot; alt=&quot;somers&quot;&gt;\r\n    &lt;area id=&quot;stafford&quot; shape=&quot;poly&quot; coords=&quot;1047,76,1183,77,1177,103,1163,146,1162,165,1040,163&quot; href=&quot;#stafford&quot; center=&quot;1117,149&quot; alt=&quot;stafford&quot;&gt;\r\n    &lt;area id=&quot;union&quot; shape=&quot;poly&quot; coords=&quot;1184,77,1258,78,1259,145,1186,146,1171,147,1162,148&quot; href=&quot;#union&quot; center=&quot;1228,141&quot; alt=&quot;union&quot;&gt;\r\n    &lt;area id=&quot;woodstock&quot; shape=&quot;poly&quot; coords=&quot;1258,79,1356,80,1383,184,1333,187,1262,187&quot; href=&quot;#woodstock&quot; center=&quot;1326,165&quot; alt=&quot;woodstock&quot;&gt;\r\n    &lt;area id=&quot;thompson&quot; shape=&quot;poly&quot; coords=&quot;1356,80,1472,81,1474,168,1379,171&quot; href=&quot;#thompson&quot; center=&quot;1432,154&quot; alt=&quot;thompson&quot;&gt;\r\n    &lt;area id=&quot;putnam&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#putnam&quot; center=&quot;1433,221&quot; alt=&quot;putnam&quot;&gt;\r\n    &lt;area id=&quot;killingly&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#killingly&quot; center=&quot;1450,295&quot; alt=&quot;killingly&quot;&gt;\r\n    &lt;area id=&quot;sterling&quot; shape=&quot;poly&quot; coords=&quot;1481,319,1486,448,1435,443,1448,325&quot; href=&quot;#sterling&quot; center=&quot;1474,414&quot; alt=&quot;sterling&quot;&gt;\r\n    &lt;area id=&quot;voluntown&quot; shape=&quot;poly&quot; coords=&quot;1415,446,1432,566,1482,576,1485,448,1456,445,1436,443&quot; href=&quot;#voluntown&quot; center=&quot;1462,539&quot; alt=&quot;voluntown&quot;&gt;\r\n    &lt;area id=&quot;north_stonington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#north_stonington&quot; center=&quot;1432,643&quot; alt=&quot;north stonington&quot;&gt;\r\n    &lt;area id=&quot;stonington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#stongington&quot; center=&quot;1416,728&quot; alt=&quot;stonington&quot;&gt;\r\n    &lt;area id=&quot;groton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#groton&quot; center=&quot;1324,743&quot; alt=&quot;groton&quot;&gt;\r\n    &lt;area id=&quot;new_london&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#new_london&quot; center=&quot;1268,751&quot; alt=&quot;new london&quot;&gt;\r\n    &lt;area id=&quot;waterford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#waterford&quot; center=&quot;1234,739&quot; alt=&quot;waterford&quot;&gt;\r\n    &lt;area id=&quot;east_lyme&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_lyme&quot; center=&quot;1176,739&quot; alt=&quot;east lyme&quot;&gt;\r\n    &lt;area id=&quot;old_lyme&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#old_lyme&quot; center=&quot;1123,784&quot; alt=&quot;old lyme&quot;&gt;\r\n    &lt;area id=&quot;old_saybrook&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#old_saybrook&quot; center=&quot;1065,799&quot; alt=&quot;old saybrook&quot;&gt;\r\n    &lt;area id=&quot;westbrook&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#westbrook&quot; center=&quot;1010,799&quot; alt=&quot;westbrook&quot;&gt;\r\n    &lt;area id=&quot;clinton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#clinton&quot; center=&quot;965,805&quot; alt=&quot;clinton&quot;&gt;\r\n    &lt;area id=&quot;madison&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#madison&quot; center=&quot;885,756&quot; alt=&quot;madison&quot;&gt;\r\n    &lt;area id=&quot;guilford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#guilford&quot; center=&quot;838,771&quot; alt=&quot;guilford&quot;&gt;\r\n    &lt;area id=&quot;branford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#branford&quot; center=&quot;772,813&quot; alt=&quot;branford&quot;&gt;\r\n    &lt;area id=&quot;east_haven&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_haven&quot; center=&quot;726,803&quot; alt=&quot;east haven&quot;&gt;\r\n    &lt;area id=&quot;new_haven&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#new_haven&quot; center=&quot;680,789&quot; alt=&quot;new haven&quot;&gt;\r\n    &lt;area id=&quot;west_haven&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#west_haven&quot; center=&quot;654,829&quot; alt=&quot;west haven&quot;&gt;\r\n    &lt;area id=&quot;orange&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#orange&quot; center=&quot;608,821&quot; alt=&quot;orange&quot;&gt;\r\n    &lt;area id=&quot;milford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#milford&quot; center=&quot;582,870&quot; alt=&quot;milford&quot;&gt;\r\n    &lt;area id=&quot;stratford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#stratford&quot; center=&quot;529,894&quot; alt=&quot;stratford&quot;&gt;\r\n    &lt;area id=&quot;bridgeport&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#bridgeport&quot; center=&quot;490,901&quot; alt=&quot;bridgeport&quot;&gt;\r\n    &lt;area id=&quot;fairfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#fairfield&quot; center=&quot;429,920&quot; alt=&quot;fairfield&quot;&gt;\r\n    &lt;area id=&quot;pomfret&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#pomfret&quot; center=&quot;1350,263&quot; alt=&quot;pomfret&quot;&gt;\r\n    &lt;area id=&quot;eastford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#eastford&quot; center=&quot;1280,239&quot; alt=&quot;eastford&quot;&gt;\r\n    &lt;area id=&quot;ashford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#ashford&quot; center=&quot;1219,240&quot; alt=&quot;ashford&quot;&gt;\r\n    &lt;area id=&quot;willington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#willington&quot; center=&quot;1159,240&quot; alt=&quot;willington&quot;&gt;\r\n    &lt;area id=&quot;tolland&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#tolland&quot; center=&quot;1080,255&quot; alt=&quot;tolland&quot;&gt;\r\n    &lt;area id=&quot;ellington&quot; shape=&quot;poly&quot; coords=&quot;961,244,964,160,1041,147,1041,163,1112,164,1111,173,1104,174,1024,188,1025,227,990,233,980,234,977,240&quot; href=&quot;#ellington&quot; center=&quot;1017,218&quot; alt=&quot;ellington&quot;&gt;\r\n    &lt;area id=&quot;canaan&quot; shape=&quot;poly&quot; coords=&quot;362,184,431,187,445,112,365,103,359,106,356,115,357,121,353,124,357,137,353,142&quot; href=&quot;#canaan&quot; center=&quot;408,175&quot; alt=&quot;canaan&quot;&gt;\r\n    &lt;area id=&quot;cornwall&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#cornwall&quot; center=&quot;395,277&quot; alt=&quot;cornwall&quot;&gt;\r\n    &lt;area id=&quot;goshen&quot; shape=&quot;poly&quot; coords=&quot;474,306,500,190,430,187,403,317&quot; href=&quot;#goshen&quot; center=&quot;459,281&quot; alt=&quot;goshen&quot;&gt;\r\n    &lt;area id=&quot;warren&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#warren&quot; center=&quot;383,385&quot; alt=&quot;warren&quot;&gt;\r\n    &lt;area id=&quot;winchester&quot; shape=&quot;poly&quot; coords=&quot;580,215,594,140,511,145,496,208,505,210,510,218,508,228&quot; href=&quot;#winchester&quot; center=&quot;555,211&quot; alt=&quot;winchester&quot;&gt;\r\n    &lt;area id=&quot;torrington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#torrington&quot; center=&quot;538,299&quot; alt=&quot;torrington&quot;&gt;\r\n    &lt;area id=&quot;barkhamsted&quot; shape=&quot;poly&quot; coords=&quot;580,215,678,206,699,133,594,139&quot; href=&quot;#barkhamsted&quot; center=&quot;648,204&quot; alt=&quot;barkhamsted&quot;&gt;\r\n    &lt;area id=&quot;new_hartford&quot; shape=&quot;poly&quot; coords=&quot;564,299,607,301,655,291,663,262,662,258,655,256,651,255,651,250,660,207,580,215&quot; href=&quot;#new_hartford&quot; center=&quot;620,287&quot; alt=&quot;new hartford&quot;&gt;\r\n    &lt;area id=&quot;litchfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#litchfield&quot; center=&quot;484,380&quot; alt=&quot;litchfield&quot;&gt;\r\n    &lt;area id=&quot;thomaston&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#thomaston&quot; center=&quot;565,447&quot; alt=&quot;thomaston&quot;&gt;\r\n    &lt;area id=&quot;durham&quot; shape=&quot;poly&quot; coords=&quot;799,658,804,644,808,599,848,589,880,583,884,598,877,618,898,639,863,643&quot; href=&quot;#durham&quot; center=&quot;852,647&quot; alt=&quot;durham&quot;&gt;\r\n    &lt;area id=&quot;north_branford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#north_branford&quot; center=&quot;786,745&quot; alt=&quot;north branford&quot;&gt;\r\n    &lt;area id=&quot;north_haven&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#north_haven&quot; center=&quot;731,726&quot; alt=&quot;north haven&quot;&gt;\r\n    &lt;area id=&quot;weston&quot; shape=&quot;poly&quot; coords=&quot;348,892,372,875,383,847,380,840,352,797,307,816&quot; href=&quot;#weston&quot; center=&quot;357,870&quot; alt=&quot;weston&quot;&gt;\r\n    &lt;area id=&quot;redding&quot; shape=&quot;poly&quot; coords=&quot;306,817,293,788,293,773,292,767,287,765,283,764,280,746,367,726,377,756,383,752,397,775&quot; href=&quot;#redding&quot; center=&quot;343,798&quot; alt=&quot;redding&quot;&gt;\r\n    &lt;area id=&quot;easton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#easton&quot; center=&quot;407,837&quot; alt=&quot;easton&quot;&gt;\r\n    &lt;area id=&quot;bethel&quot; shape=&quot;poly&quot; coords=&quot;367,727,344,655,325,650,328,667,328,675,324,682,315,693,315,695,306,698,304,701,311,739&quot; href=&quot;#bethel&quot; center=&quot;345,730&quot; alt=&quot;bethel&quot;&gt;\r\n    &lt;area id=&quot;washington&quot; shape=&quot;poly&quot; coords=&quot;435,484,430,426,431,420,431,408,407,384,376,394,367,395,346,392,344,408,347,429,361,443,368,492&quot; href=&quot;#washington&quot; center=&quot;405,475&quot; alt=&quot;washington&quot;&gt;\r\n    &lt;area id=&quot;morris&quot; shape=&quot;poly&quot; coords=&quot;430,426,495,422,517,419,505,378,420,384,420,397,431,408&quot; href=&quot;#morris&quot; center=&quot;467,427&quot; alt=&quot;morris&quot;&gt;\r\n    &lt;area id=&quot;bethlehem&quot; shape=&quot;poly&quot; coords=&quot;435,483,504,476,495,422,430,426&quot; href=&quot;#bethlehem&quot; center=&quot;475,483&quot; alt=&quot;bethlehem&quot;&gt;\r\n    &lt;area id=&quot;roxbury&quot; shape=&quot;poly&quot; coords=&quot;434,572,426,485,368,492,379,579&quot; href=&quot;#roxbury&quot; center=&quot;411,560&quot; alt=&quot;roxbury&quot;&gt;\r\n    &lt;area id=&quot;woodbury&quot; shape=&quot;poly&quot; coords=&quot;506,570,499,529,512,529,512,522,504,476,426,484,434,572,446,570,470,575&quot; href=&quot;#woodbury&quot; center=&quot;477,566&quot; alt=&quot;woodbury&quot;&gt;\r\n    &lt;area id=&quot;east_windsor&quot; shape=&quot;poly&quot; coords=&quot;887,169,887,197,891,228,889,233,962,232,964,160&quot; href=&quot;#east_windsor&quot; center=&quot;934,226&quot; alt=&quot;east windsor&quot;&gt;\r\n    &lt;area id=&quot;windsor_locks&quot; shape=&quot;poly&quot; coords=&quot;834,182,840,157,893,161,887,168,888,198,878,199,876,204,854,192,847,186&quot; href=&quot;#windsor_locks&quot; center=&quot;872,207&quot; alt=&quot;windsor locks&quot;&gt;\r\n    &lt;area id=&quot;east_granby&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_granby&quot; center=&quot;813,193&quot; alt=&quot;east granby&quot;&gt;\r\n    &lt;area id=&quot;haddam&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#haddam&quot; center=&quot;953,645&quot; alt=&quot;haddam&quot;&gt;\r\n    &lt;area id=&quot;east_haddam&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_haddam&quot; center=&quot;1062,633&quot; alt=&quot;east haddam&quot;&gt;\r\n    &lt;area id=&quot;killingworth&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#killingworth&quot; center=&quot;935,733&quot; alt=&quot;killingworth&quot;&gt;\r\n    &lt;area id=&quot;prospect&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#prospect&quot; center=&quot;644,614&quot; alt=&quot;prospect&quot;&gt;\r\n    &lt;area id=&quot;trumbull&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#trumbull&quot; center=&quot;474,838&quot; alt=&quot;trumbull&quot;&gt;\r\n    &lt;area id=&quot;shelton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#shelton&quot; center=&quot;526,798&quot; alt=&quot;shelton&quot;&gt;\r\n    &lt;area id=&quot;monroe&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#monroe&quot; center=&quot;465,768&quot; alt=&quot;monroe&quot;&gt;\r\n    &lt;area id=&quot;newtown&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#newtown&quot; center=&quot;412,709&quot; alt=&quot;newtown&quot;&gt;\r\n    &lt;area id=&quot;colchester&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#colchester&quot; center=&quot;1095,553&quot; alt=&quot;colchester&quot;&gt;\r\n    &lt;area id=&quot;east_hampton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_hampton&quot; center=&quot;977,549&quot; alt=&quot;east hampton&quot;&gt;\r\n    &lt;area id=&quot;chester&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#chester&quot; center=&quot;998,701&quot; alt=&quot;chester&quot;&gt;\r\n    &lt;area id=&quot;deep_river&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#deep_river&quot; center=&quot;1015,740&quot; alt=&quot;deep river&quot;&gt;\r\n    &lt;area id=&quot;salem&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#salem&quot; center=&quot;1154,627&quot; alt=&quot;salem&quot;&gt;\r\n    &lt;area id=&quot;lyme&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#lyme&quot; center=&quot;1102,716&quot; alt=&quot;lyme&quot;&gt;\r\n    &lt;area id=&quot;essex&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#essex&quot; center=&quot;1039,752&quot; alt=&quot;essex&quot;&gt;\r\n    &lt;area id=&quot;montville&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#montville&quot; center=&quot;1234,648&quot; alt=&quot;montville&quot;&gt;\r\n    &lt;area id=&quot;ledyard&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#ledyard&quot; center=&quot;1333,668&quot; alt=&quot;ledyard&quot;&gt;\r\n    &lt;area id=&quot;hamden&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#hamden&quot; center=&quot;686,711&quot; alt=&quot;hamden&quot;&gt;\r\n    &lt;area id=&quot;derby&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#derby&quot; center=&quot;566,781&quot; alt=&quot;derby&quot;&gt;\r\n    &lt;area id=&quot;ansonia&quot; shape=&quot;poly&quot; coords=&quot;543,724,554,714,560,714,564,717,582,717,588,747,583,750,576,752,566,749,557,744,553,741,547,736&quot; href=&quot;#ansonia&quot; center=&quot;578,760&quot; alt=&quot;ansonia&quot;&gt;\r\n    &lt;area id=&quot;woodbridge&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#woodbridge&quot; center=&quot;619,753&quot; alt=&quot;woodbridge&quot;&gt;\r\n    &lt;area id=&quot;griswold&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#griswold&quot; center=&quot;1401,531&quot; alt=&quot;griswold&quot;&gt;\r\n    &lt;area id=&quot;plainfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#plainfield&quot; center=&quot;1410,419&quot; alt=&quot;plainfield&quot;&gt;\r\n    &lt;area id=&quot;brooklyn&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#brooklyn&quot; center=&quot;1375,377&quot; alt=&quot;brooklyn&quot;&gt;\r\n    &lt;area id=&quot;canterbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#canterbury&quot; center=&quot;1336,419&quot; alt=&quot;canterbury&quot;&gt;\r\n    &lt;area id=&quot;preston&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#preston&quot; center=&quot;1342,591&quot; alt=&quot;preston&quot;&gt;\r\n    &lt;area id=&quot;vernon&quot; shape=&quot;poly&quot; coords=&quot;969,289,976,240,978,236,1026,226,1033,291,994,300,992,286&quot; href=&quot;#vernon&quot; center=&quot;1015,292&quot; alt=&quot;vernon&quot;&gt;\r\n    &lt;area id=&quot;bolton&quot; shape=&quot;poly&quot; coords=&quot;994,300,1003,367,1044,361,1032,291&quot; href=&quot;#bolton&quot; center=&quot;1029,360&quot; alt=&quot;bolton&quot;&gt;\r\n    &lt;area id=&quot;manchester&quot; shape=&quot;poly&quot; coords=&quot;923,361,915,298,971,279,970,289,992,285,1000,350&quot; href=&quot;#manchester&quot; center=&quot;967,352&quot; alt=&quot;manchester&quot;&gt;\r\n    &lt;area id=&quot;south_windsor&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#south_windsor&quot; center=&quot;932,293&quot; alt=&quot;south windsor&quot;&gt;\r\n    &lt;area id=&quot;windsor&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#windsor&quot; center=&quot;872,264&quot; alt=&quot;windsor&quot;&gt;\r\n    &lt;area id=&quot;canton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#canton&quot; center=&quot;695,270&quot; alt=&quot;canton&quot;&gt;\r\n    &lt;area id=&quot;simsbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#simsbury&quot; center=&quot;753,260&quot; alt=&quot;simsbury&quot;&gt;\r\n    &lt;area id=&quot;bloomfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#bloomfield&quot; center=&quot;814,290&quot; alt=&quot;bloomfield&quot;&gt;\r\n    &lt;area id=&quot;bozrah&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#bozrah&quot; center=&quot;1218,567&quot; alt=&quot;bozrah&quot;&gt;\r\n    &lt;area id=&quot;norwich&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#norwich&quot; center=&quot;1279,565&quot; alt=&quot;norwich&quot;&gt;\r\n    &lt;area id=&quot;franklin&quot; shape=&quot;poly&quot; coords=&quot;1194,497,1222,425,1247,428,1260,486,1246,518,1244,519,1238,518,1236,513,1234,509&quot; href=&quot;#franklin&quot; center=&quot;1239,502&quot; alt=&quot;franklin&quot;&gt;\r\n    &lt;area id=&quot;lebanon&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#lebanon&quot; center=&quot;1169,493&quot; alt=&quot;lebanon&quot;&gt;\r\n    &lt;area id=&quot;lisbon&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#lisbon&quot; center=&quot;1334,517&quot; alt=&quot;lisbon&quot;&gt;\r\n    &lt;area id=&quot;sprague&quot; shape=&quot;poly&quot; coords=&quot;1299,491,1307,479,1307,474,1304,467,1304,460,1310,454,1311,442,1247,427,1260,486,1285,480,1289,479,1294,482&quot; href=&quot;#sprague&quot; center=&quot;1289,490&quot; alt=&quot;sprague&quot;&gt;\r\n    &lt;area id=&quot;scotland&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#scotland&quot; center=&quot;1278,422&quot; alt=&quot;scotland&quot;&gt;\r\n    &lt;area id=&quot;windham&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#windham&quot; center=&quot;1227,416&quot; alt=&quot;windham&quot;&gt;\r\n    &lt;area id=&quot;hampton&quot; shape=&quot;poly&quot; coords=&quot;1259,350,1265,322,1265,267,1310,266,1317,270,1321,287,1322,291,1316,334,1301,362,1273,358&quot; href=&quot;#hampton&quot; center=&quot;1299,341&quot; alt=&quot;hampton&quot;&gt;\r\n    &lt;area id=&quot;chaplin&quot; shape=&quot;poly&quot; coords=&quot;1220,342,1214,265,1227,265,1228,264,1240,263,1245,266,1265,266,1265,322,1259,350&quot; href=&quot;#chaplin&quot; center=&quot;1251,335&quot; alt=&quot;chaplin&quot;&gt;\r\n    &lt;area id=&quot;bethany&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#bethany&quot; center=&quot;631,683&quot; alt=&quot;bethany&quot;&gt;\r\n    &lt;area id=&quot;seymour&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#seymour&quot; center=&quot;566,727&quot; alt=&quot;seymour&quot;&gt;\r\n    &lt;area id=&quot;oxford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#oxford&quot; center=&quot;530,677&quot; alt=&quot;oxford&quot;&gt;\r\n    &lt;area id=&quot;watertown&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#watertown&quot; center=&quot;541,501&quot; alt=&quot;watertown&quot;&gt;\r\n    &lt;area id=&quot;waterbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#waterbury&quot; center=&quot;602,558&quot; alt=&quot;waterbury&quot;&gt;\r\n    &lt;area id=&quot;beacon_falls&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#beacon_falls&quot; center=&quot;587,671&quot; alt=&quot;beacon falls&quot;&gt;\r\n    &lt;area id=&quot;naugatuck&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#naugatuck&quot; center=&quot;590,621&quot; alt=&quot;naugatuck&quot;&gt;\r\n    &lt;area id=&quot;middlebury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#middlebury&quot; center=&quot;540,587&quot; alt=&quot;middlebury&quot;&gt;\r\n    &lt;area id=&quot;southbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#southbury&quot; center=&quot;458,635&quot; alt=&quot;southbury&quot;&gt;\r\n    &lt;area id=&quot;bridgewater&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#bridgewater&quot; center=&quot;369,589&quot; alt=&quot;bridgewater&quot;&gt;\r\n    &lt;area id=&quot;brookfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#brookfield&quot; center=&quot;344,642&quot; alt=&quot;brookfield&quot;&gt;\r\n    &lt;area id=&quot;harwinton&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#harwinton&quot; center=&quot;587,372&quot; alt=&quot;harwinton&quot;&gt;\r\n    &lt;area id=&quot;burlington&quot; shape=&quot;poly&quot; coords=&quot;691,373,683,321,676,318,671,311,671,299,669,295,674,293,672,290,649,292,639,294,606,301,619,381&quot; href=&quot;#burlington&quot; center=&quot;654,366&quot; alt=&quot;burlington&quot;&gt;\r\n    &lt;area id=&quot;avon&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#avon&quot; center=&quot;733,336&quot; alt=&quot;avon&quot;&gt;\r\n    &lt;area id=&quot;farmington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#farmington&quot; center=&quot;741,401&quot; alt=&quot;farmington&quot;&gt;\r\n    &lt;area id=&quot;mansfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#mansfield&quot; center=&quot;1183,337&quot; alt=&quot;mansfield&quot;&gt;\r\n    &lt;area id=&quot;coventry&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#coventry&quot; center=&quot;1095,342&quot; alt=&quot;coventry&quot;&gt;\r\n    &lt;area id=&quot;columbia&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#columbia&quot; center=&quot;1122,427&quot; alt=&quot;columbia&quot;&gt;\r\n    &lt;area id=&quot;hebron&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#hebron&quot; center=&quot;1065,465&quot; alt=&quot;hebron&quot;&gt;\r\n    &lt;area id=&quot;andover&quot; shape=&quot;poly&quot; coords=&quot;1030,363,1047,396,1077,392,1078,388,1098,357,1078,329,1064,332,1051,331,1039,330,1044,361&quot; href=&quot;#andover&quot; center=&quot;1074,371&quot; alt=&quot;andover&quot;&gt;\r\n    &lt;area id=&quot;marlborough&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#marlborough&quot; center=&quot;1017,487&quot; alt=&quot;marlborough&quot;&gt;\r\n    &lt;area id=&quot;west_hartford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#west_hartford&quot; center=&quot;806,366&quot; alt=&quot;west hartford&quot;&gt;\r\n    &lt;area id=&quot;hartford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#hartford&quot; center=&quot;851,363&quot; alt=&quot;hartford&quot;&gt;\r\n    &lt;area id=&quot;glastonbury&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#glastonbury&quot; center=&quot;947,433&quot; alt=&quot;glastonbury&quot;&gt;\r\n    &lt;area id=&quot;rocky_hill&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#rocky_hill&quot; center=&quot;868,466&quot; alt=&quot;rocky hill&quot;&gt;\r\n    &lt;area id=&quot;newington&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#newington&quot; center=&quot;823,437&quot; alt=&quot;newington&quot;&gt;\r\n    &lt;area id=&quot;wethersfield&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#wethersfield&quot; center=&quot;862,425&quot; alt=&quot;wethersfield&quot;&gt;\r\n    &lt;area id=&quot;east_hartford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#east_hartford&quot; center=&quot;901,363&quot; alt=&quot;east hartford&quot;&gt;\r\n    &lt;area id=&quot;kent&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#kent&quot; center=&quot;305,392&quot; alt=&quot;kent&quot;&gt;\r\n    &lt;area id=&quot;sherman&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#sherman&quot; center=&quot;266,531&quot; alt=&quot;sherman&quot;&gt;\r\n    &lt;area id=&quot;new_milford&quot; shape=&quot;poly&quot; coords=&quot;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&quot; href=&quot;#new_milford&quot; center=&quot;329,514&quot; alt=&quot;new milford&quot;&gt;\r\n&lt;\/map&gt;\r\n<\/pre>\n<p>Follow up 2014-11-25:  <\/p>\n<ul>\n<li>modded the averaging algorithm &#8211; much faster now<\/li>\n<li>json encoding data and passing to var for jQuery distance, angle, and message<\/li>\n<\/ul>\n<p>Follow up 2014-11-26:<\/p>\n<ul>\n<li>hardcoded town center xy coordinates into area mapping using &#8216;center=&#8221;xy&#8221;&#8216; &#8211; averaging was off center<\/li>\n<li>Note:  Using &#8216;center=&#8221;xy&#8221;&#8216; 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<\/li>\n<li>set up toggle of using hardcoded centers versus auto-averaging<\/li>\n<li>adding additional processing of angle to display 0 to 360 degrees (as in a compass)<\/li>\n<\/ul>\n<p>Follow up 2014-12-02:<\/p>\n<ul>\n<li>broke code into components for easier maintenance &#8211; html(mapping), php, css, js<\/li>\n<li>area click modded to recenter\/reset origin\/reference point &#8211; clicking on a town will show distance and direction to that town<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/lektrikpuke.com\/blog\/2014\/11\/22\/towns-in-connecticut-highlighting-mapped-regions-of-an-image-with-jquery\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[171,149],"tags":[173,166,172,6,89],"class_list":["post-301","post","type-post","status-publish","format-standard","hentry","category-jquery-computer-stuff","category-php-computer-stuff","tag-javascript","tag-jquery","tag-js","tag-php","tag-script"],"_links":{"self":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":10,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions\/315"}],"wp:attachment":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}