ovalcountiesangularmap/templates/main.tpl.html

A map of the uk, with hover on counties, selectable and incorporated with angular

<div id="map-box">
    <div id="container-map">
        <img src="images/map.gif" alt="Map" name="map1" border="0" usemap="#map1Map" id="map" />
        <map name="map1Map" id="map1Map">
            <area class="sw" shape="poly" coords="162,319,162,303,186,303,186,264,162,264,162,287,175,282,160,297,140,298,110,335,138,335" alt="sw" ng-click="selectByKey('sw')"/>
            <area class="s" shape="poly" coords="186,264,206,264,206,312,179,313,162,318,162,303,186,303" alt="s" ng-click="selectByKey('s')"/>
            <area class="se" shape="poly" coords="206,312,243,311,268,298,268,287,251,283,255,279,206,279" alt="se" ng-click="selectByKey('se')"/>
            <area class="e" shape="poly" coords="206,279,255,279,270,267,276,241,252,230,246,238,237,233,221,233,221,264,206,264" alt="e" ng-click="selectByKey('e')" />
            <area class="em" shape="poly" coords="221,264,196,264,196,209,214,209,214,233,221,233" alt="em" ng-click="selectByKey('em')"/>
            <area class="wm" shape="poly" coords="162,264,196,264,196,209,162,209" alt="wm" ng-click="selectByKey('wm')" />
            <area class="w" shape="poly" coords="162,209,122,209,130,240,141,236,143,251,119,267,123,281,144,279,154,288,162,288" alt="w" ng-click="selectByKey('w')" />
            <area class="yl" shape="poly" coords="214,233,238,233,245,225,225,173,212,167,176,167,176,185,186,185,186,208" alt="yl" ng-click="selectByKey('yl')" />
            <area class="nw" shape="poly" coords="186,209,169,209,174,184,163,187,156,169,163,155,160,153,176,137,176,185,186,185" alt="nw" ng-click="selectByKey('nw')"/>
            <area class="ne" shape="poly" coords="177,167,213,167,209,165,201,128,192,122,176,137" alt="ne" ng-click="selectByKey('ne')"/>
            <area class="scot" shape="poly" coords="160,153,192,122,177,110,163,114,170,104,179,100,172,93,178,92,198,49,193,42,162,42,141,51,148,32,166,14,169,1,144,7,125,2,114,34,86,47,86,55,106,69,106,79,95,83,95,98,109,97,113,108,106,138,111,138,116,113,132,131,121,153,124,161,131,159,137,166" alt="scot" ng-click="selectByKey('scot')"/>
            <area class="ni" shape="poly" coords="117,176,97,192,91,193,83,190,79,179,70,182,71,187,64,190,53,182,58,163,71,154,80,147,91,143,99,143" alt="ni" ng-click="selectByKey('ni')"/>
        </map>
    </div> <!--#container-map-->

    <div id="areas">
        <ul id="regions">
            <li ng-class="key" ng-repeat="( key, area ) in counties" ng-click="selectArea(area)">{{area.label}} <span class="{{key}}-n"></span></li>
        </ul>

        <div id="counties">

            <!--start-->
            <div ng-show="selectedArea == null" class="counties-container">
                <p class="tip">Please select the regions and/or counties you wish to cover either using the list to the left or the map.</p>
                <p class="tip">Tip: Double clicking a region will select all counties in that region.</p>
            </div>

            <div id="{{key}}" class="counties-container" ng-repeat="( key, area ) in counties" ng-show="selectedArea == area">
                <h2>{{ area.label }}</h2>

                <p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
                <fieldset>
                    <div ng-repeat="region in area.regions">
                        <input type="checkbox" ng-click="toggleRegion( region )" ng-checked="addedRegions.indexOf( region ) > -1"/><label>{{ region }}</label>
                    </div>
                </fieldset>
            </div>
        </div> <!--.counties-->

    </div> <!--.areas-->

    <div class="clear"></div>

</div> <!--#map-box-->