ovalcountiesangularmap/js/counties-directive.js

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

ovalCounties
        .directive( 'ovalMap', function( countiesList ){
            
            function addHoverEvent( containerElement )
            {
                $('area, #regions li', containerElement).hover(//hover listener
                        function () { //if the user hovers over an <area> element or a <li> in <ul class="regions">...
                            var area = ($(this).attr("class")); //get the class of the element the mouse is hovering over
                            $('#map', containerElement).attr("src", "images/map-" + area + "-mo.gif");  //change the image of the <area> to the mouseover version
                            $('.' + area, containerElement).css("background-color", "#3c3e52"); //change the background color of the corresponding area in the list                                    
                        },
                        function () { //if the mouse leaves an <area> element or a <li> in <ul class="regions">...
                            var area = ($(this).attr("class")); //get the class of the element the mouse is leaving
                            $('#map', containerElement).attr("src", "images/map.gif"); //change the image of the <area> back to default
                            $('.' + area, containerElement).css("background-color", "#262835"); //change the background color of the corresponding area in the list back to default
                        }
                )
            }
            
            return {
                templateUrl: "templates/main.tpl.html",
                scope: {
                    addedRegions: "=addedRegions"
                },
                link: function( scope, element, attributes ){
                    
                    //init
                    addHoverEvent( element );
                    
                    //scope
                    scope.counties = countiesList.all();    
                    
                    scope.selectedArea = null;
                    
                    scope.selectArea = function( area ){
                        scope.selectedArea = area;
                    };
                    
                    scope.selectByKey = function( key ){
                        if( typeof scope.counties[ key ] !== "undefined" )
                        {
                            scope.selectedArea = scope.counties[ key ];
                        }
                    };
                    
                    scope.toggleRegion = function( regionName ) {
                        
                        var index = scope.addedRegions.indexOf( regionName );
                        if( index > -1 )
                        {
                            scope.addedRegions.splice( index, 1 );
                        }else
                        {
                            scope.addedRegions.push( regionName );
                        }
                    };
                    
                    
                }
            }
        });