refactored the style spec

TUM-Dev · Aug 2, 2024 · 91eccf6 · 91eccf6
1 parent 58d6f7e
commit 91eccf6
Showing 1 changed file with 57 additions and 36 deletions.
diff --git a/webclient/app/composables/indoorLayer.ts b/webclient/app/composables/indoorLayer.ts
@@ -1,32 +1,16 @@
-export const indoorLayers = [
+import type { LayerSpecification } from "maplibre-gl";
+
+export const indoorLayers: LayerSpecification[] = [
   {
-    id: "indoor-rooms",
+    id: "indoor-areas",
     type: "fill",
     source: "indoor",
-    filter: ["==", "indoor", "room"],
+    filter: ["==", "indoor", "area"],
     paint: {
-      "fill-color": "#e0e0e0",
-      "fill-opacity": 0.5,
+      "fill-color": "#ff0084",
       "fill-outline-color": "#000",
       "fill-antialias": true, // otherwise the outline is invisible sometimes..
-      "text-offset": 'eval(prop("placement_offset","default"))',
-      text:
-        "eval(" +
-        'has_tag_key("amenity")' +
-        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("amenity")),0),")")' +
-        ':has_tag_key("shop")' +
-        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("shop")),0),")")' +
-        ':has_tag_key("name")' +
-        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("name")),0),")")' +
-        ':has_tag_key("level")' +
-        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("level")),0),")")' +
-        ':get(split(";",tag(room)),0))',
-      "font-size": 'eval(prop(lane_default_width,"default"))',
-      "text-color": "white",
-      "text-opacity": 1,
-      "text-halo-radius": 2,
-      "text-halo-color": "blue",
-      "text-halo-opacity": 0.3,
+      "fill-opacity": 0.5,
     },
   },
   {
@@ -39,27 +23,18 @@ export const indoorLayers = [
       "fill-opacity": 0.5,
       "fill-outline-color": "#000",
       "fill-antialias": true, // otherwise the outline is invisible sometimes..
-      "border-color": "#000",
     },
   },
   {
-    id: "indoor-areas",
+    id: "indoor-rooms",
     type: "fill",
     source: "indoor",
-    filter: ["==", "indoor", "area"],
+    filter: ["==", "indoor", "room"],
     paint: {
-      "fill-color": "#ff0084",
+      "fill-color": "#e0e0e0",
+      "fill-opacity": 0.5,
       "fill-outline-color": "#000",
       "fill-antialias": true, // otherwise the outline is invisible sometimes..
-      "fill-opacity": 0.5,
-      "text-offset": 'eval(prop("placement_offset","default"))',
-      text: 'eval(has_tag_key("level")?concat(prop(text)," (",get(split(";",tag("level")),0),")"):prop(text))',
-      "font-size": 'eval(prop(lane_default_width,"default"))',
-      "text-color": "white",
-      "text-opacity": 1,
-      "text-halo-radius": 2,
-      "text-halo-color": "blue",
-      "text-halo-opacity": 0.3,
     },
   },
   {
@@ -82,4 +57,50 @@ export const indoorLayers = [
       "fill-opacity": 0.5,
     },
   },
+  {
+    id: "indoor-roomnames",
+    type: "symbol",
+    source: "indoor",
+    filter: ["==", "indoor", "area"],
+    layout: {
+      "text-field":
+        "eval(" +
+        'has_tag_key("level")' +
+        '?concat(prop(text)," (",get(split(";",tag("level")),0),")")' +
+        ":prop(text))",
+      "text-size": 12,
+    },
+    paint: {
+      "text-opacity": 1,
+      "text-color": "white",
+      "text-halo-width": 2,
+      "text-halo-color": "rgb(48, 112, 179, 0.3)",
+    },
+  },
+  {
+    id: "indoor-areanames",
+    type: "symbol",
+    source: "indoor",
+    filter: ["==", "indoor", "area"],
+    layout: {
+      "text-field":
+        "eval(" +
+        'has_tag_key("amenity")' +
+        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("amenity")),0),")")' +
+        ':has_tag_key("shop")' +
+        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("shop")),0),")")' +
+        ':has_tag_key("name")' +
+        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("name")),0),")")' +
+        ':has_tag_key("level")' +
+        '?concat(get(split(";",tag(room)),0)," (",get(split(";",tag("level")),0),")")' +
+        ':get(split(";",tag(room)),0))',
+      "text-size": 12,
+    },
+    paint: {
+      "text-opacity": 1,
+      "text-color": "white",
+      "text-halo-width": 2,
+      "text-halo-color": "rgb(48, 112, 179, 0.3)",
+    },
+  },
 ];