From 1a6e27d9293331ded2d4593a32d7466502162bd8 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sat, 13 Jul 2024 18:56:08 +0200
Subject: [PATCH] custom styling

---
 .../app/components/DetailsInteractiveMap.vue  | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/webclient/app/components/DetailsInteractiveMap.vue b/webclient/app/components/DetailsInteractiveMap.vue
index 9bb5b6654..2c80be35e 100644
--- a/webclient/app/components/DetailsInteractiveMap.vue
+++ b/webclient/app/components/DetailsInteractiveMap.vue
@@ -163,11 +163,36 @@ async function initMap(containerId: string) {
     map.addControl(attrib);
     attrib._toggleAttribution();
   });
+
   addIndoorTo(map);
 
   // Retrieve the geojson from the path and add the map
   const geojson = await (await fetch("/example.geojson")).json();
-  await map.indoor.addMap(IndoorMap.fromGeojson(geojson));
+  const layers = [
+    {
+      filter: ["filter-==", "indoor", "room"],
+      id: "indoor-rooms",
+      type: "fill",
+      source: "indoor",
+      paint: {
+        "fill-color": "#FF0000",
+        "fill-opacity": 0.5,
+      },
+    },
+    {
+      filter: ["filter-==", "indoor", "area"],
+      id: "indoor-areas",
+      type: "fill",
+      source: "indoor",
+      paint: {
+        "fill-color": "#0000FF",
+        "fill-opacity": 0.5,
+      },
+    },
+  ];
+
+  const indoorMap = IndoorMap.fromGeojson(geojson, { layers, showFeaturesWithEmptyLevel: true });
+  await map.indoor.addMap(indoorMap);
 
   // Add the specific control
   map.addControl(new IndoorControl(), "bottom-left");