adding hover effects to keweenaw and isle royale

diff --git a/views/front/map/display.html b/views/front/map/display.html
index b7e9321..daca178 100644 (file)
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -30,6 +30,7 @@
                     Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
                 maxZoom: 18
             }).addTo(countyMap);
+
             L.tileLayer(tileServer, {
                 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, \
                     <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \
@@ -65,7 +66,9 @@
                 'Ontonagon':     {literal}  {latOffset:  0.00,   lonOffset: -0.15,   url: 'county=Ontonagon'},{/literal}
                 'Schoolcraft':   {literal}  {latOffset:  0.00,   lonOffset:  0.00,   url: 'county=Schoolcraft'}{/literal}
             }; 
-     
+            var keweenaw = {
+                'Keweenaw':      {literal}  {latOffset:  -0.30,   lonOffset:  0.00,   url: 'county=Keweenaw'},{/literal}
+            }; 
             // Base URL for building links to county pages
             var baseCountyUrl = 'Highlight_Michigan_Counties.php?';
 
@@ -90,11 +93,19 @@
                     dashArray: '6',   // Dashed outlines
                 };
             }
-
+            function islandStyle(feature) {
+                return {
+                    color: 'black',     // Outline Color
+                    opacity: 0,         // Opacity of outline
+                    weight: 2,          // Weight of line (pixels width?)
+                    fillColor: '',  // Fill color for county interior
+                    fillOpacity: 0.0,   // Opacity of fill area
+                    dashArray: '6',   // Dashed outlines
+                };
+            }
             // Mouse out event handler
             function resetSelectedCounty(e) {
-                var layer = e.target;
-                layer.resetStyle(e.layer);
+               
             //              info.update();
             }
 
@@ -119,12 +130,18 @@
                 })
             }).addTo(countyMap);
 
-            new L.Marker([45.85, -84.45], {
+            new L.Marker([45.7, -84.45], {
                 icon: new L.DivIcon({
                     className: 'my-div-icon',
                     html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label-small">Mackinac Island</span>'
                 })
             }).addTo(countyMap);
+            new L.Marker([45.9, -84.0], {
+                icon: new L.DivIcon({
+                    className: 'my-div-icon',
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label-small">Drummond Island</span>'
+                })
+            }).addTo(countyMap);
 
             new L.Marker([45.55, -85.00], {
                 icon: new L.DivIcon({
@@ -140,8 +157,87 @@
                 $(".glm-theme-map-label").show()
             }
         });
+        $("#island-map").hover(
+            function(){
+                countyMap._layers[154].setStyle({
+                    weight: 3,
+                    color: "#003366",
+                    dashArray: '',
+                    fillOpacity: 0.1
+                })
+            }, function(){
+                countyMap._layers[154].setStyle({
+                    weight: 2,
+                    color: "#000000",
+                    dashArray: '6',
+                    fillOpacity: 0
+                })
+            })
             // For each UP county
             var countyLayer;
+            $.each(keweenaw, function(county, countyData) {
+                var page = "#";
+                var location = areas.filter( function(area){
+                    return area.area_name == county;
+                });
+   
+                location = location[0];
+                if(parseInt(location.page_id)){
+                    page = pages[location.page_id]['url'];
+                }
+                // Get the GeoJson file for this county
+                $.get(countiesDirectory + county + '.GeoJson', function(countyFile) {
+
+                    // Convert the county file to a JSON
+                    var countyJSON = jQuery.parseJSON(countyFile);
+
+                    // Add the county overlay to the map using "countyStyle" above
+                    countyLayer = L.geoJson(countyJSON, {
+                        style: islandStyle
+                    }).addTo(islandMap);
+
+                    countyLayer.on({
+                        mouseover: function(e){
+                            var layer = e.target;
+                         
+                            layer.setStyle({
+                                weight: 3,
+                                color: location.hover_color,
+                                dashArray: '',
+                                fillOpacity: 0.1
+                            });
+
+                            if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+                                layer.bringToFront();
+                            }
+                        },
+                        mouseout: function(e){
+                            var layer = e.target;
+                            layer.resetStyle(e.layer);
+                        },
+                        click: function(){
+                            window.location = page;
+                        }
+                    });
+                    // Get center of the county and add offsets
+                    var center = countyLayer.getBounds().getCenter();
+                    var center = new L.LatLng(center.lat + countyData.latOffset, center.lng + countyData.lonOffset);
+              
+                    // Create Div type icom for county names
+                    var countyNameIcon = L.divIcon({
+                        className: 'county-name',
+                        html: '<a class="area-label ' + county +'" href="' + page + '">' + county + '</a>'
+                    });
+
+                    // use county name icon as marker using center location calculated above.
+                    L.marker(center, {
+                        icon: countyNameIcon,
+                        county: county,
+                        url: countyData.url
+                    }).addTo(islandMap);
+
+                });
+            });
             $.each(upperMI, function(county, countyData) {
                 var page = "#";
                 var location = areas.filter( function(area){
@@ -171,7 +267,16 @@
                     // });
                     countyLayer.on({
                         mouseover: function(e){
+                            
                             var layer = e.target;
+                          
+                            if(layer._leaflet_id == 154){
+                                {literal} $("#island-map").css({
+                                    "border-style":"solid",
+                                    "border-color" : "#003366",
+                                    "border-width" : "3px"
+                                }) {/literal}
+                            }
                             layer.setStyle({
                                 weight: 3,
                                 color: location.hover_color,
@@ -183,7 +288,16 @@
                                 layer.bringToFront();
                             }
                         },
-                        mouseout: resetSelectedCounty,
+                        mouseout: function(e){
+                            var layer = e.target;
+                            layer.resetStyle(e.layer);
+                            $("#island-map").css({
+                                "border-style": "dashed",
+                                "border-color" : "#5E7B8F",
+                                "border-width" : "2px"
+                            })
+                        },
+                        
                         click: function(){
                             window.location = page;
                         }