From e879e8547f879c4633278f94887f568cd19f0c8f Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 7 May 2019 16:24:19 -0400
Subject: [PATCH] adding zoom level styles to organize the labels and add isle
 royale to a higher zoom level

---
 css/glm-county-map.min.css   |  2 +-
 sass/front/_map.scss         | 29 +++++++++++++++++++++++++++++
 views/front/map/display.html | 27 +++++++++++++++++++++++----
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/css/glm-county-map.min.css b/css/glm-county-map.min.css
index 41c2172..aec7432 100644
--- a/css/glm-county-map.min.css
+++ b/css/glm-county-map.min.css
@@ -1 +1 @@
-@font-face{font-family:'posterizer';src:url("../../assets/fonts/Posterizer_KG_Rough-webfont.woff")}@font-face{font-family:'pathout';src:url("../../assets/fonts/Pathout Script.otf");src:url("../../assets/fonts/Pathout Script.ttf")}.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;font-family:'Lato';font-size:14px}.leaflet-pane.leaflet-marker-pane div:nth-child(7) .area-label{background:#8f0056 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(8) .area-label{background:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(9) .area-label{background:#7dc240 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(10) .area-label{background:#2fc4eb !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:#587386 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(13) .area-label{background:#7dc240 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(14) .area-label{background:#2fc4eb !important}.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:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(18) .area-label{background:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(19) .area-label{background:#0056f5 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(20) .area-label{background:#f59e00 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(21) .area-label{background:#685E8F !important}#glm-county-description{background:#ebf2ee;border-radius:7px;height:165px;width:400px;position:absolute;z-index:999;left:40%;top:10px;font-family:'Lato';text-align:left}#glm-county-description .glm-counties-default{padding:5px;line-height:1.1;font-size:16px}#glm-county-description .county-description-title{padding:5px;font-size:18px;background:#668194;color:white;border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:5px;text-transform:uppercase;text-align:center;font-family:'posterizer'}#glm-county-description .glm-county-map-top-list{display:block !important;padding:5px;text-align:center}#glm-county-description .glm-county-map-top-list li{margin:0 !important;padding:0 5px !important;list-style:none !important}
+@font-face{font-family:'posterizer';src:url("../../assets/fonts/Posterizer_KG_Rough-webfont.woff")}@font-face{font-family:'pathout';src:url("../../assets/fonts/Pathout Script.otf");src:url("../../assets/fonts/Pathout Script.ttf")}.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;font-family:'Lato';font-size:14px}.leaflet-pane.leaflet-marker-pane div:nth-child(7) .area-label{background:#8f0056 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(8) .area-label{background:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(9) .area-label{background:#7dc240 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(10) .area-label{background:#2fc4eb !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:#587386 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(13) .area-label{background:#7dc240 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(14) .area-label{background:#2fc4eb !important}.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:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(18) .area-label{background:#eb552f !important}.leaflet-pane.leaflet-marker-pane div:nth-child(19) .area-label{background:#0056f5 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(20) .area-label{background:#f59e00 !important}.leaflet-pane.leaflet-marker-pane div:nth-child(21) .area-label{background:#685E8F !important}#glm-county-description{background:#ebf2ee;border-radius:7px;height:165px;width:400px;position:absolute;z-index:999;left:40%;top:10px;font-family:'Lato';text-align:left}#glm-county-description .glm-counties-default{padding:5px;line-height:1.1;font-size:16px}#glm-county-description .county-description-title{padding:5px;font-size:18px;background:#668194;color:white;border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:5px;text-transform:uppercase;text-align:center;font-family:'posterizer'}#glm-county-description .glm-county-map-top-list{display:block !important;padding:5px;text-align:center}#glm-county-description .glm-county-map-top-list li{margin:0 !important;padding:0 5px !important;list-style:none !important}.mackinac-tag.map-zoomed{margin-left:20px !important;margin-top:15px !important}.mackinac-tag:not(.map-zoomed){margin-left:20px !important;margin-top:25px !important}.mackinac-island-break{display:none}.drummond-island-label.map-zoomed{display:block;padding-top:5px;padding-left:30px;text-align:left}body .dropdown-container #area-map-container #area-map .area-label.map-zoomed{font-size:10px;padding:2px 7px !important}.mackinac-island-label.map-zoomed{padding-right:12px;display:block}.mackinac-island-label.map-zoomed br{display:block}
diff --git a/sass/front/_map.scss b/sass/front/_map.scss
index dc1b909..28a5614 100644
--- a/sass/front/_map.scss
+++ b/sass/front/_map.scss
@@ -159,4 +159,33 @@
             list-style: none !important;
         }
     }
+}
+.mackinac-tag.map-zoomed{
+    margin-left: 20px !important;
+    margin-top: 15px !important;
+}
+.mackinac-tag:not(.map-zoomed){
+    margin-left: 20px !important;
+    margin-top: 25px !important;
+}
+.mackinac-island-break{
+    display: none;
+}
+.drummond-island-label.map-zoomed{
+   display: block;
+   padding-top: 5px;
+   padding-left: 30px;
+   text-align: left;
+}
+body .dropdown-container #area-map-container #area-map .area-label.map-zoomed{
+    font-size: 10px;
+    padding: 2px 7px !important;
+    
+}
+.mackinac-island-label.map-zoomed{
+    padding-right: 12px;
+    display: block;
+}
+.mackinac-island-label.map-zoomed br{
+    display: block;
 }
\ No newline at end of file
diff --git a/views/front/map/display.html b/views/front/map/display.html
index e9189c5..02e316b 100644
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -10,7 +10,7 @@
 
 <script>
     jQuery(function($){
-
+        var zoomOut = false;
         // Create map with default center and size
         var countyMap = L.map('area-map',{
             gestureHandling: true,
@@ -19,6 +19,16 @@
         //     zoomControl:false,
         //     gestureHandling: true,
         // }).setView([48.0, -88.78], 8);
+        countyMap.on('zoomend', function(event) {
+            if(event.target._zoom <= 7 ){
+                $(".area-label, .mackinac-island-label, .drummond-island-label, .mackinac-tag").addClass("map-zoomed");
+                zoomOut = true;
+            }else{
+                if($(".area-label, .mackinac-island-label, .drummond-island-label, .mackinac-tag").hasClass("map-zoomed")){
+                    $(".area-label, .mackinac-island-label, .drummond-island-label, .mackinac-tag").removeClass("map-zoomed");
+                }
+            }
+        });
         var countiesDirectory = '{$assets}/counties/';
             // Tile Server URL
             var tileServer = 'https://maps.gaslightmedia.com/12312029-NoPlaceNames-95bfebd37e9e7d649daafa8762629084/'+ {literal}'{z}/{x}/{y}.png'{/literal};
@@ -129,6 +139,14 @@
                 $("<div class='glm-counties-default'> The Upper Peninsula of Michigan is made up of fifteen counties that are common in their wealth of beauty and tranquility, yet uniquely individual in their offerings to the visitor. Hover or click on each county for a sampling of what they offer. </div>").insertAfter(countyDescriptionTitle);
                 countyDescription.append(countyMapTopList)
             });
+          
+            new L.Marker([47.70, -89.60], {
+                icon: new L.DivIcon({
+                    className: 'my-div-icon',
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label-small mackinac-island-label">Isle Royale <br> National Park</span>'
+                })
+            }).addTo(countyMap);
+            
             new L.Marker([47.30, -89.85], {
                 icon: new L.DivIcon({
                     className: 'my-div-icon',
@@ -163,15 +181,16 @@
                 })
             }).addTo(countyMap);
 
+            
             new L.Marker([45.85, -84.55], {
                 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>'
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label-small mackinac-island-label">Mackinac <br class="mackinac-island-break"> Island</span>'
                 })
             }).addTo(countyMap);
             new L.Marker([45.9, -84.0], {
                 icon: new L.DivIcon({
-                    className: 'my-div-icon',
+                    className: 'my-div-icon drummond-island-label',
                     html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label-small">Drummond Island</span>'
                 })
             }).addTo(countyMap);
@@ -274,7 +293,7 @@
               
                     // Create Div type icom for county names
                     var countyNameIcon = L.divIcon({
-                        className: 'county-name',
+                        className: 'county-name ' + county.toLowerCase()+"-tag",
                         html: '<a class="area-label ' + county +'" href="' + page + '">' + county + '</a>'
                     });
 
-- 
2.17.1