adding second map for the isle royal, changing font styles for the labels

diff --git a/views/front/map/display.html b/views/front/map/display.html
index f0a29b7..b7e9321 100644 (file)
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -1,5 +1,6 @@
 <div id="area-map-container">
     <div id="area-map"></div>
+    <div id="island-map"></div>
 </div>
 
 <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> -->
@@ -13,12 +14,11 @@
         // Create map with default center and size
         var countyMap = L.map('area-map',{
             gestureHandling: true,
-     
-        }).setView([46.80, -87.0], 8);
-
-
-
-
+        }).setView([46.50, -86.78], 8);
+        var islandMap = L.map('island-map',{
+            zoomControl:false,
+            gestureHandling: true,
+        }).setView([48.0, -88.78], 8);
         var countiesDirectory = '{$assets}/counties/';
             // Tile Server URL
             var tileServer = 'https://maps.gaslightmedia.com/12312029-NoPlaceNames-95bfebd37e9e7d649daafa8762629084/'+ {literal}'{z}/{x}/{y}.png'{/literal};
@@ -30,7 +30,12 @@
                     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>, \
+                    Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+                maxZoom: 18
+            }).addTo(islandMap);
             /*
             * List of MI Upper Peninsula counties
             *
@@ -97,7 +102,44 @@
             function zoomToCounty(e) {
                 countyMap.fitBounds(e.target.getBounds());
             }
+            var ltInfo = '';
+
+            
+            new L.Marker([47.0, -87.3], {
+                icon: new L.DivIcon({
+                    className: 'my-div-icon',
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label">Lake Superior</span>'
+                })
+            }).addTo(countyMap);
+
+            new L.Marker([45.85, -86.30], {
+                icon: new L.DivIcon({
+                    className: 'my-div-icon',
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label">Lake Michigan</span>'
+                })
+            }).addTo(countyMap);
 
+            new L.Marker([45.85, -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.55, -85.00], {
+                icon: new L.DivIcon({
+                    className: 'my-div-icon',
+                    html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label">Lower Peninsula</span>'
+                })
+            }).addTo(countyMap);
+
+            countyMap.on('zoomend', function() {
+            if(countyMap.getZoom() < 8){
+                $(".glm-theme-map-label").hide()
+            }else{
+                $(".glm-theme-map-label").show()
+            }
+        });
             // For each UP county
             var countyLayer;
             $.each(upperMI, function(county, countyData) {