From 91eccf6f735042c58c4a80711e3eefe3964de36a Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 2 Aug 2024 23:31:25 +0200
Subject: [PATCH] refactored the style spec

---
 webclient/app/composables/indoorLayer.ts | 93 +++++++++++++++---------
 1 file changed, 57 insertions(+), 36 deletions(-)

diff --git a/webclient/app/composables/indoorLayer.ts b/webclient/app/composables/indoorLayer.ts
index 7152a9587..997d1ab01 100644
--- 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)",
+    },
+  },
 ];