colors to locations

based on the source, including interactive layer that can filter out locations on the map

Author: luisrodriguezgalvez

src/App.vue

@@ -13,10 +13,21 @@
             v-for="item in legendItems"
             :key="item.bronId"
             class="legend-item"
+            :class="{
+              'legend-item--disabled': appStore.disabledCategories.has(
+                item.bronId
+              ),
+            }"
+            @click="appStore.toggleCategory(item.bronId)"
           >
             <div
               class="legend-symbol"
-              :style="{ borderColor: item.color }"
+              :style="{
+                borderColor: appStore.disabledCategories.has(item.bronId)
+                  ? '#ccc'
+                  : item.color,
+                opacity: appStore.disabledCategories.has(item.bronId) ? 0.5 : 1,
+              }"
             ></div>
             <span class="legend-text">{{ item.dataleverancier }}</span>
           </div>
@@ -79,6 +90,15 @@
                     />
                   </td>
                 </tr>
+                <tr>
+                  <td>Dataleverancier</td>
+                  <td>
+                    {{
+                      locationsStore.activeLocation?.properties
+                        ?.dataleverancier || "..."
+                    }}
+                  </td>
+                </tr>
               </tbody>
             </v-table>
           </div>
@@ -134,7 +154,7 @@ function getColorForBronId(bronId) {
     1: "#008fc5",
     2: "#28a745",
     3: "#ffc107",
-    4: "#dc3545",
+    4: "#895129",
   };
   return colors[bronId] || "#6c757d"; // Gray fallback
 }
@@ -245,6 +265,22 @@ watch(
   display: flex;
   align-items: center;
   gap: 8px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.legend-item:hover {
+  background-color: #f5f5f5;
+}
+
+.legend-item--disabled {
+  opacity: 0.5;
+}
+
+.legend-item--disabled:hover {
+  background-color: #f0f0f0;
 }
 
 .legend-symbol {

src/components/LocationsLayer.vue

@@ -55,9 +55,21 @@ watch(
             ["==", ["get", "bron_id"], 3],
             "#ffc107",
             ["==", ["get", "bron_id"], 4],
-            "#dc3545",
+            "#895129",
             "#6c757d",
           ],
+          "circle-opacity": [
+            "case",
+            ["==", ["get", "bron_id"], 1],
+            1,
+            ["==", ["get", "bron_id"], 2],
+            1,
+            ["==", ["get", "bron_id"], 3],
+            1,
+            ["==", ["get", "bron_id"], 4],
+            1,
+            1,
+          ],
         },
       });
       map.addSource("active-location", {
@@ -80,6 +92,12 @@ watch(
     map.on("click", "locations-layer", (e) => {
       const feature = e.features?.[0];
       if (feature) {
+        const bronId = feature.properties?.bron_id;
+        // Don't allow interaction if category is disabled
+        if (appStore.disabledCategories.has(bronId)) {
+          return;
+        }
+
         locationsStore.setActiveLocation(feature);
         appStore.expandPanel();
 
@@ -97,10 +115,16 @@ watch(
     });
 
     map.on("mouseenter", "locations-layer", (e) => {
-      map.getCanvas().style.cursor = "pointer";
-
       const feature = e.features?.[0];
       if (feature) {
+        const hoverBronId = feature.properties?.bron_id;
+        // Don't show hover if category is disabled
+        if (appStore.disabledCategories.has(hoverBronId)) {
+          map.getCanvas().style.cursor = "grab";
+          return;
+        }
+
+        map.getCanvas().style.cursor = "pointer";
         const coords = feature.geometry.coordinates.slice();
         const locatieId = feature.properties?.locatie_id || "Unknown";
         const peilfilterIds = feature.properties?.peilfilter_ids || "";
@@ -111,13 +135,8 @@ watch(
           : [];
 
         // Build HTML content
-        const bronId = feature.properties?.bron_id || "Unknown";
-        const dataleverancier =
-          feature.properties?.dataleverancier || "Unknown";
 
         let htmlContent = `<div>Locatie ID: <strong>${locatieId}</strong></div>`;
-        htmlContent += `<div>Bron ID: <strong>${bronId}</strong></div>`;
-        htmlContent += `<div>Dataleverancier: <strong>${dataleverancier}</strong></div>`;
 
         if (peilfilterList.length > 0) {
           const label =
@@ -150,6 +169,56 @@ watch(
   { immediate: true }
 );
 
+// Watch for disabled categories changes and update map layer
+watch(
+  () => appStore.disabledCategories,
+  (disabledCategories) => {
+    const map = props.map;
+    if (!map || !map.getLayer("locations-layer")) return;
+
+    // Update circle opacity based on disabled categories
+    const opacityExpression = [
+      "case",
+      ["==", ["get", "bron_id"], 1],
+      disabledCategories.has(1) ? 0.3 : 1,
+      ["==", ["get", "bron_id"], 2],
+      disabledCategories.has(2) ? 0.3 : 1,
+      ["==", ["get", "bron_id"], 3],
+      disabledCategories.has(3) ? 0.3 : 1,
+      ["==", ["get", "bron_id"], 4],
+      disabledCategories.has(4) ? 0.3 : 1,
+      1,
+    ];
+
+    // Update stroke color to gray with transparency when disabled
+    const strokeColorExpression = [
+      "case",
+      ["==", ["get", "bron_id"], 1],
+      disabledCategories.has(1) ? "rgba(153, 153, 153, 0.3)" : "#008fc5",
+      ["==", ["get", "bron_id"], 2],
+      disabledCategories.has(2) ? "rgba(153, 153, 153, 0.3)" : "#28a745",
+      ["==", ["get", "bron_id"], 3],
+      disabledCategories.has(3) ? "rgba(153, 153, 153, 0.3)" : "#ffc107",
+      ["==", ["get", "bron_id"], 4],
+      disabledCategories.has(4) ? "rgba(153, 153, 153, 0.3)" : "#895129",
+      "#6c757d",
+    ];
+
+    map.setPaintProperty(
+      "locations-layer",
+      "circle-opacity",
+      opacityExpression
+    );
+
+    map.setPaintProperty(
+      "locations-layer",
+      "circle-stroke-color",
+      strokeColorExpression
+    );
+  },
+  { deep: true }
+);
+
 watch(
   () => locationsStore.activeLocation,
   (activeLocation) => {

src/stores/app.js

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 export const useAppStore = defineStore('app', {
   state: () => ({
     panelIsCollapsed: true,
+    disabledCategories: new Set(),
   }),
   actions: {
     collapsePanel () {
@@ -15,5 +16,12 @@ export const useAppStore = defineStore('app', {
     togglePanel () {
       this.panelIsCollapsed = !this.panelIsCollapsed
     },
+    toggleCategory (bronId) {
+      if (this.disabledCategories.has(bronId)) {
+        this.disabledCategories.delete(bronId)
+      } else {
+        this.disabledCategories.add(bronId)
+      }
+    },
   },
 })