adding zoom level styles to organize the labels and add isle royale to a higher zoom...

diff --git a/css/glm-county-map.min.css b/css/glm-county-map.min.css
index 41c2172..aec7432 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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>'
                     });