From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Wed, 20 Mar 2019 04:18:57 +0000 (-0400)
Subject: adding county map bullet list section for top 5 attractions of each county on hover
X-Git-Tag: v1.0.0^2~9
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=81fc2723a69bd4b350aee26a0b25723575c85bd2;p=WP-Plugins%2Fglm-member-db-county-map.git

adding county map bullet list section for top 5 attractions of each county on hover
---

diff --git a/css/glm-county-map.min.css b/css/glm-county-map.min.css
index 1a1faae..ee5936c 100644
--- a/css/glm-county-map.min.css
+++ b/css/glm-county-map.min.css
@@ -1 +1 @@
-.isle-royale-label{font-size:16px}.isle-royale-label .isle-royale-arrow{position:absolute;top:-40px;left:0;width:100%;font-size:26px;height:100%}.area-label{color:white;border-radius:6px;padding:5px 10px !important;box-shadow:2px 4px 5px 0 rgba(0,0,0,0.5);font-weight:bold !important}.leaflet-pane.leaflet-marker-pane div:nth-child(8) .area-label{background:#5E8F72 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(9) .area-label{background:#1c1c1c !important}.leaflet-pane.leaflet-marker-pane div:nth-child(10) .area-label{background:#65C6F4 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(11) .area-label{background:#587386 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(12) .area-label{background:#696969 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(13) .area-label{background:#8F5E6D !important}.leaflet-pane.leaflet-marker-pane div:nth-child(14) .area-label{background:white !important;color:black !important;font-weight:bold}.leaflet-pane.leaflet-marker-pane div:nth-child(15) .area-label{background:#685E8F !important}.leaflet-pane.leaflet-marker-pane div:nth-child(16) .area-label{background:#F59E00 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(17) .area-label{background:#F47165 !important}#glm-county-description{background:white;border-radius:7px;height:150px;width:350px}
+.isle-royale-label{font-size:16px}.isle-royale-label .isle-royale-arrow{position:absolute;top:-40px;left:0;width:100%;font-size:26px;height:100%}.area-label{color:white;border-radius:6px;padding:5px 10px !important;box-shadow:2px 4px 5px 0 rgba(0,0,0,0.5);font-weight:bold !important}.leaflet-pane.leaflet-marker-pane div:nth-child(8) .area-label{background:#5E8F72 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(9) .area-label{background:#1c1c1c !important}.leaflet-pane.leaflet-marker-pane div:nth-child(10) .area-label{background:#65C6F4 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(11) .area-label{background:#587386 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(12) .area-label{background:#696969 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(13) .area-label{background:#8F5E6D !important}.leaflet-pane.leaflet-marker-pane div:nth-child(14) .area-label{background:white !important;color:black !important;font-weight:bold}.leaflet-pane.leaflet-marker-pane div:nth-child(15) .area-label{background:#685E8F !important}.leaflet-pane.leaflet-marker-pane div:nth-child(16) .area-label{background:#F59E00 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(17) .area-label{background:#F47165 !important}#glm-county-description{background:white;border-radius:7px;height:150px;width:375px;position:absolute;z-index:999;left:40%;top:10px}#glm-county-description .county-description-title{padding-top:5px;font-weight:bold;font-size:16px;background:#668194;color:white;border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:5px;text-transform:uppercase}#glm-county-description .glm-county-map-top-list li{margin:0 !important;text-align:left;padding:0 5px !important}
diff --git a/sass/front/_map.scss b/sass/front/_map.scss
index 73435ba..9691fea 100644
--- a/sass/front/_map.scss
+++ b/sass/front/_map.scss
@@ -117,5 +117,27 @@
     background: white;
     border-radius: 7px;
     height: 150px;
-    width: 350px;
+    width: 375px;
+    position: absolute;
+    z-index: 999;
+    left: 40%;
+    top: 10px;
+    .county-description-title{
+        padding-top: 5px;
+        font-weight: bold;
+        font-size: 16px;
+        background: #668194;
+        color: white;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        margin-bottom: 5px;
+        text-transform: uppercase;
+    }
+    .glm-county-map-top-list{
+        li{
+            margin: 0 !important;
+            text-align: left;
+            padding: 0 5px !important;
+        }
+    }
 }
\ No newline at end of file
diff --git a/views/front/map/display.html b/views/front/map/display.html
index 0cbac9f..1c077ea 100644
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -115,7 +115,9 @@
             }
             var ltInfo = '';
 
-            
+            var countyDescription = $('<div />', {
+                id: "glm-county-description"
+            }).appendTo( $("#area-map"))
             new L.Marker([47.30, -89.85], {
                 icon: new L.DivIcon({
                     className: 'my-div-icon',
@@ -123,12 +125,12 @@
                 })
             }).addTo(countyMap);
             
-            new L.Marker([47.47, -87.3], {
-                icon: new L.DivIcon({
-                    className: 'my-div-icon',
-                    html: '<div id="glm-county-description" style="color: #343539;line-height: 1;" class="glm-map-county-description"></div>'
-                })
-            }).addTo(countyMap);
+            // var countyDescription = new L.Marker([47.47, -87.3], {
+            //     icon: new L.DivIcon({
+            //         className: 'my-div-icon',
+            //         html: '<div id="glm-county-description" style="color: #343539;line-height: 1;" class="glm-map-county-description"></div>'
+            //     })
+            // }).addTo(countyMap);
 
             new L.Marker([46.8, -87.3], {
                 icon: new L.DivIcon({
@@ -165,93 +167,13 @@
             }).addTo(countyMap);
 
             countyMap.on('zoomend', function() {
-            if(countyMap.getZoom() < 8){
-                $(".glm-theme-map-label").hide()
-            }else{
-                $(".glm-theme-map-label").show()
-            }
-        });
-        // $("#island-map").hover(
-        //     function(){
-        //         countyMap._layers[144].setStyle({
-        //             weight: 3,
-        //             color: "#003366",
-        //             dashArray: '',
-        //             fillOpacity: 0.1
-        //         })
-        //     }, function(){
-        //         countyMap._layers[144].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);
-
-            //     });
-            // });
+                if(countyMap.getZoom() < 8){
+                    $(".glm-theme-map-label").hide()
+                }else{
+                    $(".glm-theme-map-label").show()
+                }
+            });
+            
             $.each(upperMI, function(county, countyData) {
                 var page = "#";
                 var location = areas.filter( function(area){
@@ -283,7 +205,6 @@
                         mouseover: function(e){
                             
                             var layer = e.target;
-                            console.log(layer);
                             if(layer._leaflet_id == 144){
                                 {literal} $("#island-map").css({
                                     "border-style":"solid",
@@ -301,6 +222,20 @@
                             if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                                 layer.bringToFront();
                             }
+                           
+                            var countyMapTopList = $("<ul />", {
+                                class : "glm-county-map-top-list"
+                            });
+                            
+                            // countyDescription.setContent(glmCountyMapTopList);
+                            countyAttractions[county].list.map( function( item, index ){
+                                $("<li />",{
+                                    text: item
+                                }).appendTo(countyMapTopList)
+                            });
+                            countyDescription.html('');
+                            countyDescription.append($("<div class='county-description-title'>"+countyAttractions[county].title + "</div>"));
+                            countyDescription.append(countyMapTopList);
                         },
                         mouseout: function(e){
                             var layer = e.target;
@@ -348,6 +283,158 @@
                     $('.county-name').css('font-size', fontSize);
                 }
             });
+        var countyAttractions = {
+            Mackinac : {
+                title : "Home Of",
+                list : [
+                    "1. Mackinac Island",
+                    "2. Mackinac Bridge",
+                    "3. Les Cheneaux Islands",
+                    "4. St Ignace Huron Boardwalk",
+                    "5. Cut River Bridge"
+                ]
+            },
+            Chippewa : {
+                title : "Home Of",
+                list : [
+                    "1. Soo Locks",
+                    "2. Soo Locks Boat Tours",
+                    "3. Kewadin Casinos",
+                    "4. Great Lakes Shipwreck Museum",
+                    "5. Drummond Island"
+                ]
+            },
+            Luce : {
+                title : "Home Of",
+                list : [
+                    "1. Tahquamenon Falls State Park",
+                    "2. Crisp Point Lighthouse",
+                    "3. Tahquamenon Logging Museum",
+                    "4. Oswald's Bear Ranch",
+                    "5. Tahquamenon Falls Riverboat Tour & Toonerville Trolley"
+                ]
+            },
+            Alger : {
+                title : "Home Of",
+                list : [
+                    "1. Pictured Rocks National Lakeshore",
+                    "2. Grand Island",
+                    "3. Many Waterfalls",
+                    "4. Pictured Rocks Boat Cruises",
+                    "5. Glass Bottom Shipwreck Tours"
+                ]
+            },
+            Marquette : {
+                title : "Home Of",
+                list : [
+                    "1. Marquette Harbor Light",
+                    "2. Presque Isle Park",
+                    "3. Michigan Iron Industry Museum",
+                    "4. US Ski & Snowboard Hall of Fame...",
+                    "5. Waterfront Park & Downtown Nightlife"
+                ]
+            },
+            Baraga : {
+                title : "Home Of",
+                list : [
+                    "1. Canyon Falls",
+                    "2. Sturgeon River Gorge",
+                    "3. Historic Alberta Village",
+                    "4. Bishop Baraga Shrine",
+                    "5. Mount Arvon"
+                ]
+            },
+            Houghton : {
+                title : "Home Of",
+                list : [
+                    "1. Michigan Technological University",
+                    "2. Keweenaw National Historical Park",
+                    "3. Portage Canal",
+                    "4. Laurium Manor Inn",
+                    "5. AE Seaman Mineral Museum"
+                ]
+            },
+            Keweenaw : {
+                title : "Home Of",
+                list : [
+                    "1. Brockway Mountain Drive",
+                    "2. Isle Royale National Park",
+                    "3. Fort Wilkins State Park",
+                    "4. Estivant Pines",
+                    "5. Eagle Harbor Lighthouse"
+                ]
+            },
+            Gogebic : {
+                title : "Home Of",
+                list : [
+                    "1. Lake Gogebic",
+                    "2. Copper Peak",
+                    "3. Copper Peak",
+                    "4. 3 Ski Resorts",
+                    "5. Sylvania Wilderness Area"
+                ]
+            },
+            Ontonagon : {
+                title : "Home Of",
+                list : [
+                    "1. Porcupine Mountains Wilderness State Park",
+                    "2. More than 100 waterfalls",
+                    "3. Old Victoria Restoration",
+                    "4. Adventure Mine",
+                    "5. Lake Gogebic"
+                ]
+            },
+            Schoolcraft : {
+                title : "Home Of",
+                list : [
+                    "1. Kitch-iti-Kipi",
+                    "2. Manistique East Breakwater Light",
+                    "3. Seul Choix Point Lighthouse",
+                    "4. Siphon Bridge",
+                    "5. Seney National Wildlife Refuge"
+                ]
+            },
+            Iron : {
+                title : "Home Of",
+                list : [
+                    "1. Young's Golf Recreation & Restaurant",
+                    "2. Chicagon Lake",
+                    "3. UP Championship Rodeo",
+                    "4. Iron County Historical Museum",
+                    "5. Michigamme Reservoir"
+                ]
+            },
+            Dickinson : {
+                title : "Home Of",
+                list : [
+                    "1. Pine Mountain Ski Jump",
+                    "2. Piers Gorge",
+                    "3. Timberstone Golf Course",
+                    "4. World War II Glider/Cornish Pump Mining Museum",
+                    "5. Iron Mountain Iron Mine"
+                ]
+            },
+            Menominee : {
+                title : "Home Of",
+                list : [
+                    "1. Menominee Historic Waterfront Downtown",
+                    "2. Island Resort & Casino",
+                    "3. Menominee North Pier Light",
+                    "4. IXL Historical Museum",
+                    "5. Pemene Falls"
+                ]
+            },
+            Delta : {
+                title : "Home Of",
+                list : [
+                    "1. Walleye Capital of the World",
+                    "2. Sand Point Lighthouse",
+                    "3. UP State Fair",
+                    "4. Fayette Historic State Park",
+                    "5. Great Golfing"
+                ]
+            }
+        }
     });
 </script>
 <style>