adding color samples to the county map dropdown

diff --git a/css/glm-county-map.min.css b/css/glm-county-map.min.css
index c011abe..3e9f654 100644 (file)
--- a/css/glm-county-map.min.css
+++ b/css/glm-county-map.min.css
@@ -1 +1 @@
-.isle-royale-arrow{position:absolute;top:-50px;left:0;width:100%;font-size:40px;height:100%}
+.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}

diff --git a/sass/front/_map.scss b/sass/front/_map.scss
index ef867c9..45e4adb 100644 (file)
--- a/sass/front/_map.scss
+++ b/sass/front/_map.scss
@@ -32,11 +32,84 @@
 //         }
 //     }
 // }
-.isle-royale-arrow{
-    position: absolute;
-    top: -50px;
-    left: 0;
-    width: 100%;
-    font-size: 40px;
-    height: 100%;
-}
\ No newline at end of file
+.isle-royale-label{
+    font-size: 16px;
+    .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, .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;
+     }
+ }

diff --git a/views/front/map/display.html b/views/front/map/display.html
index f605ca7..435abbf 100644 (file)
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -115,10 +115,10 @@
             }
             var ltInfo = '';
 
-            new L.Marker([47.25, -89.85], {
+            new L.Marker([47.30, -89.85], {
                 icon: new L.DivIcon({
                     className: 'my-div-icon',
-                    html: '<span style="color: #343539;line-height: 1;position: relative;" class="glm-theme-map-label">Isle Royale <i class="fas fa-long-arrow-alt-up isle-royale-arrow"></i></span>'
+                    html: '<span style="color: #343539;line-height: 1;position: relative;" class="glm-theme-map-label isle-royale-label">Isle Royale<br>National Park<i class="fas fa-long-arrow-alt-up isle-royale-arrow"></i></span>'
                 })
             }).addTo(countyMap);