OWC-137 add color classes markers

merelacato · merelacato · commit c59747cbe4e1 · 2025-05-12T11:02:31.000+02:00
diff --git a/src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-cluster.js b/src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-cluster.js
@@ -28,7 +28,7 @@ export const makeMarkerCluster = ({
 			return L.divIcon({
 				html: `
                 <div 
-                    class="owc-openkaarten-streetmap__cluster-group__circle owc-openkaarten-streetmap__cluster-group__circle-${color.replace("#", "")}"
+                    class="owc-openkaarten-streetmap__cluster-group__circle ${color}"
                     >
                     <span class="owc-openkaarten-streetmap__cluster-group__count">${count}</span>
                 </div>`,
diff --git a/src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-icon.js b/src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-icon.js
@@ -28,7 +28,7 @@ export const makeMarkerIcon = (L, { marker, defaultColor }) => {
 		return L.divIcon({
 			className: 'leaflet-custom-icon--hosted-svg',
 			html: L.Util.template(
-        `<div  class="leaflet-svg leaflet-svg-${iconColor.replace("#", "")}"><img src=${iconSettings.iconUrl} /></div>`, iconSettings
+        `<div  class="leaflet-svg ${iconColor}"><img src=${iconSettings.iconUrl} /></div>`, iconSettings
 			),
 			iconAnchor: [12, 32],
 			iconSize: [25, 30],
diff --git a/src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseFilters.vue b/src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseFilters.vue
@@ -155,7 +155,7 @@ onUnmounted(() => {
 					<div
               :class="[
               'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator',
-              'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator-' + getDatalayerColor(layer).replace('#', '')
+              getDatalayerColor(layer)
               ]"
           />
 				</li>
@@ -243,43 +243,43 @@ onUnmounted(() => {
 				height: 28px;
 				border-radius: 50%;
 				opacity: 0.5;
-        &-0072B2 {
+        &.marker-blue {
           background-color: #0072B2;
         }
-        &-9D6D00 {
+        &.marker-organge {
           background-color: #9D6D00;
         }
-        &-C15500 {
+        &.marker--red {
           background-color: #C15500;
         }
-        &-008661 {
+        &.marker-green {
           background-color: #008661;
         }
-        &-7E7722 {
+        &.marker-yellow {
           background-color: #7E7722;
         }
-        &-A26085 {
+        &.marker-purple {
           background-color: #A26085;
         }
-        &-3B7BA0 {
+        &.marker-turquoise {
           background-color: #3B7BA0;
         }
-        &-A0522D {
+        &.marker-brown {
           background-color: #A0522D;
         }
-        &-757575 {
+        &.marker-gray {
           background-color: #757575;
         }
-        &-000000 {
+        &.marker-black {
           background-color: #000000;
         }
-        &-555555 {
+        &.marker-dargray {
           background-color: #555555;
         }
-        &-003366 {
+        &.marker-navy-blue {
           background-color: #003366;
         }
-        &-4B0082 {
+        &.marker-deep-purple {
           background-color: #4B0082;
         }
 			}
diff --git a/src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/TheMap.vue b/src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/TheMap.vue
@@ -421,43 +421,43 @@ const handleSearch = async (query) => {
 				rgba(255, 255, 255, 0.05) 75%
 			);
 			background: var(--owc-cluster-background);
-      &-0072B2 {
+      &.marker-blue {
         --owc-openkaarten-streetmap--cluster-color: #0072B2;
       }
-      &-9D6D00 {
+      &.marker-orange {
         --owc-openkaarten-streetmap--cluster-color: #9D6D00;
       }
-      &-C15500 {
+      &.marker-red {
         --owc-openkaarten-streetmap--cluster-color: #C15500;
       }
-      &-008661 {
+      &.marker-green {
         --owc-openkaarten-streetmap--cluster-color: #008661;
       }
-      &-7E7722 {
+      &.marker-yellow {
         --owc-openkaarten-streetmap--cluster-color: #7E7722;
       }
-      &-A26085 {
+      &.marker-purple {
         --owc-openkaarten-streetmap--cluster-color: #A26085;
       }
-      &-3B7BA0 {
+      &.marker-turquoise {
         --owc-openkaarten-streetmap--cluster-color: #3B7BA0;
       }
-      &-A0522D {
+      &.marker-brown {
         --owc-openkaarten-streetmap--cluster-color: #A0522D;
       }
-      &-757575 {
+      &.marker-gray {
         --owc-openkaarten-streetmap--cluster-color: #757575;
       }
-      &-000000 {
+      &.marker-black {
         --owc-openkaarten-streetmap--cluster-color: #000000;
       }
-      &-555555 {
+      &.marker-darkgray {
         --owc-openkaarten-streetmap--cluster-color: #555555;
       }
-      &-003366 {
+      &.marker-navy-blue {
         --owc-openkaarten-streetmap--cluster-color: #003366;
       }
-      &-4B0082 {
+      &.marker-deep-purple {
         --owc-openkaarten-streetmap--cluster-color: #4B0082;
       }
 		}
@@ -495,43 +495,43 @@ const handleSearch = async (query) => {
 					img {
 						transform: rotate(45deg);
 					}
-          &-0072B2 {
+          &.marker-blue {
             border: 4px solid #0072B2;
           }
-          &-9D6D00 {
+          &.marker-orange {
             border: 4px solid #9D6D00;
           }
-          &-C15500 {
+          &.marker-red {
             border: 4px solid #C15500;
           }
-          &-008661 {
+          &.marker-green {
             border: 4px solid #008661;
           }
-          &-7E7722 {
+          &.marker-yellow {
             border: 4px solid #7E7722;
           }
-          &-A26085 {
+          &.marker-purple {
             border: 4px solid #A26085;
           }
-          &-3B7BA0 {
+          &.marker-turquoise {
             border: 4px solid #3B7BA0;
           }
-          &-A0522D {
+          &.marker-brown {
             border: 4px solid #A0522D;
           }
-          &-757575 {
+          &.marker-gray {
             border: 4px solid #757575;
           }
-          &-000000 {
+          &.marker-black {
             border: 4px solid #000000;
           }
-          &-555555 {
+          &.marker-darkgray {
             border: 4px solid #555555;
           }
-          &-003366 {
+          &.marker-navy-blue {
             border: 4px solid #003366;
           }
-          &-4B0082 {
+          &.marker-deep-purple {
             border: 4px solid #4B0082;
           }
 				}

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export const makeMarkerCluster = ({`
`28`	`28`	`return L.divIcon({`
`29`	`29`	html: `
`30`	`30`	`<div`
`31`		`- class="owc-openkaarten-streetmap__cluster-group__circle owc-openkaarten-streetmap__cluster-group__circle-${color.replace("#", "")}"`
	`31`	`+ class="owc-openkaarten-streetmap__cluster-group__circle ${color}"`
`32`	`32`	`>`
`33`	`33`	`<span class="owc-openkaarten-streetmap__cluster-group__count">${count}</span>`
`34`	`34`	</div>`,
Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@ onUnmounted(() => {`
`155`	`155`	`<div`
`156`	`156`	`:class="[`
`157`	`157`	`'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator',`
`158`		`- 'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator-' + getDatalayerColor(layer).replace('#', '')`
	`158`	`+ getDatalayerColor(layer)`
`159`	`159`	`]"`
`160`	`160`	`/>`
`161`	`161`	`</li>`
`@@ -243,43 +243,43 @@ onUnmounted(() => {`
`243`	`243`	`height: 28px;`
`244`	`244`	`border-radius: 50%;`
`245`	`245`	`opacity: 0.5;`
`246`		`- &-0072B2 {`
	`246`	`+ &.marker-blue {`
`247`	`247`	`background-color: #0072B2;`
`248`	`248`	`}`
`249`		`- &-9D6D00 {`
	`249`	`+ &.marker-organge {`
`250`	`250`	`background-color: #9D6D00;`
`251`	`251`	`}`
`252`		`- &-C15500 {`
	`252`	`+ &.marker--red {`
`253`	`253`	`background-color: #C15500;`
`254`	`254`	`}`
`255`		`- &-008661 {`
	`255`	`+ &.marker-green {`
`256`	`256`	`background-color: #008661;`
`257`	`257`	`}`
`258`		`- &-7E7722 {`
	`258`	`+ &.marker-yellow {`
`259`	`259`	`background-color: #7E7722;`
`260`	`260`	`}`
`261`		`- &-A26085 {`
	`261`	`+ &.marker-purple {`
`262`	`262`	`background-color: #A26085;`
`263`	`263`	`}`
`264`		`- &-3B7BA0 {`
	`264`	`+ &.marker-turquoise {`
`265`	`265`	`background-color: #3B7BA0;`
`266`	`266`	`}`
`267`		`- &-A0522D {`
	`267`	`+ &.marker-brown {`
`268`	`268`	`background-color: #A0522D;`
`269`	`269`	`}`
`270`		`- &-757575 {`
	`270`	`+ &.marker-gray {`
`271`	`271`	`background-color: #757575;`
`272`	`272`	`}`
`273`		`- &-000000 {`
	`273`	`+ &.marker-black {`
`274`	`274`	`background-color: #000000;`
`275`	`275`	`}`
`276`		`- &-555555 {`
	`276`	`+ &.marker-dargray {`
`277`	`277`	`background-color: #555555;`
`278`	`278`	`}`
`279`		`- &-003366 {`
	`279`	`+ &.marker-navy-blue {`
`280`	`280`	`background-color: #003366;`
`281`	`281`	`}`
`282`		`- &-4B0082 {`
	`282`	`+ &.marker-deep-purple {`
`283`	`283`	`background-color: #4B0082;`
`284`	`284`	`}`
`285`	`285`	`}`
Original file line number	Diff line number	Diff line change
`@@ -421,43 +421,43 @@ const handleSearch = async (query) => {`
`421`	`421`	`rgba(255, 255, 255, 0.05) 75%`
`422`	`422`	`);`
`423`	`423`	`background: var(--owc-cluster-background);`
`424`		`- &-0072B2 {`
	`424`	`+ &.marker-blue {`
`425`	`425`	`--owc-openkaarten-streetmap--cluster-color: #0072B2;`
`426`	`426`	`}`
`427`		`- &-9D6D00 {`
	`427`	`+ &.marker-orange {`
`428`	`428`	`--owc-openkaarten-streetmap--cluster-color: #9D6D00;`
`429`	`429`	`}`
`430`		`- &-C15500 {`
	`430`	`+ &.marker-red {`
`431`	`431`	`--owc-openkaarten-streetmap--cluster-color: #C15500;`
`432`	`432`	`}`
`433`		`- &-008661 {`
	`433`	`+ &.marker-green {`
`434`	`434`	`--owc-openkaarten-streetmap--cluster-color: #008661;`
`435`	`435`	`}`
`436`		`- &-7E7722 {`
	`436`	`+ &.marker-yellow {`
`437`	`437`	`--owc-openkaarten-streetmap--cluster-color: #7E7722;`
`438`	`438`	`}`
`439`		`- &-A26085 {`
	`439`	`+ &.marker-purple {`
`440`	`440`	`--owc-openkaarten-streetmap--cluster-color: #A26085;`
`441`	`441`	`}`
`442`		`- &-3B7BA0 {`
	`442`	`+ &.marker-turquoise {`
`443`	`443`	`--owc-openkaarten-streetmap--cluster-color: #3B7BA0;`
`444`	`444`	`}`
`445`		`- &-A0522D {`
	`445`	`+ &.marker-brown {`
`446`	`446`	`--owc-openkaarten-streetmap--cluster-color: #A0522D;`
`447`	`447`	`}`
`448`		`- &-757575 {`
	`448`	`+ &.marker-gray {`
`449`	`449`	`--owc-openkaarten-streetmap--cluster-color: #757575;`
`450`	`450`	`}`
`451`		`- &-000000 {`
	`451`	`+ &.marker-black {`
`452`	`452`	`--owc-openkaarten-streetmap--cluster-color: #000000;`
`453`	`453`	`}`
`454`		`- &-555555 {`
	`454`	`+ &.marker-darkgray {`
`455`	`455`	`--owc-openkaarten-streetmap--cluster-color: #555555;`
`456`	`456`	`}`
`457`		`- &-003366 {`
	`457`	`+ &.marker-navy-blue {`
`458`	`458`	`--owc-openkaarten-streetmap--cluster-color: #003366;`
`459`	`459`	`}`
`460`		`- &-4B0082 {`
	`460`	`+ &.marker-deep-purple {`
`461`	`461`	`--owc-openkaarten-streetmap--cluster-color: #4B0082;`
`462`	`462`	`}`
`463`	`463`	`}`
`@@ -495,43 +495,43 @@ const handleSearch = async (query) => {`
`495`	`495`	`img {`
`496`	`496`	`transform: rotate(45deg);`
`497`	`497`	`}`
`498`		`- &-0072B2 {`
	`498`	`+ &.marker-blue {`
`499`	`499`	`border: 4px solid #0072B2;`
`500`	`500`	`}`
`501`		`- &-9D6D00 {`
	`501`	`+ &.marker-orange {`
`502`	`502`	`border: 4px solid #9D6D00;`
`503`	`503`	`}`
`504`		`- &-C15500 {`
	`504`	`+ &.marker-red {`
`505`	`505`	`border: 4px solid #C15500;`
`506`	`506`	`}`
`507`		`- &-008661 {`
	`507`	`+ &.marker-green {`
`508`	`508`	`border: 4px solid #008661;`
`509`	`509`	`}`
`510`		`- &-7E7722 {`
	`510`	`+ &.marker-yellow {`
`511`	`511`	`border: 4px solid #7E7722;`
`512`	`512`	`}`
`513`		`- &-A26085 {`
	`513`	`+ &.marker-purple {`
`514`	`514`	`border: 4px solid #A26085;`
`515`	`515`	`}`
`516`		`- &-3B7BA0 {`
	`516`	`+ &.marker-turquoise {`
`517`	`517`	`border: 4px solid #3B7BA0;`
`518`	`518`	`}`
`519`		`- &-A0522D {`
	`519`	`+ &.marker-brown {`
`520`	`520`	`border: 4px solid #A0522D;`
`521`	`521`	`}`
`522`		`- &-757575 {`
	`522`	`+ &.marker-gray {`
`523`	`523`	`border: 4px solid #757575;`
`524`	`524`	`}`
`525`		`- &-000000 {`
	`525`	`+ &.marker-black {`
`526`	`526`	`border: 4px solid #000000;`
`527`	`527`	`}`
`528`		`- &-555555 {`
	`528`	`+ &.marker-darkgray {`
`529`	`529`	`border: 4px solid #555555;`
`530`	`530`	`}`
`531`		`- &-003366 {`
	`531`	`+ &.marker-navy-blue {`
`532`	`532`	`border: 4px solid #003366;`
`533`	`533`	`}`
`534`		`- &-4B0082 {`
	`534`	`+ &.marker-deep-purple {`
`535`	`535`	`border: 4px solid #4B0082;`
`536`	`536`	`}`
`537`	`537`	`}`