custom styling

webclient/components/DetailsInteractiveMap.vue

@@ -170,11 +170,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");