Make indoor selector reflect design mocks (internal-6120)

GitOrigin-RevId: 3ffe60fe72838042994756ec7c97ec4b5c42cfb5

Author: aleksproger

debug/indoor.html

@@ -59,7 +59,6 @@
         partialScreenContainer.style.backgroundColor = 'rgba(255, 165, 0, 0.2)'; // Very light orange background
         partialScreenContainer.style.pointerEvents = 'none';
         partialScreenContainer.style.zIndex = '999';
-        document.body.appendChild(partialScreenContainer);
 
         // Create the map
         var map = window.map = new mapboxgl.Map({

debug/indoor/indoor_style.js

@@ -17,6 +17,7 @@ const indoorLayers = [
         "minzoom": 16.0,
         "filter": [
             "all",
+            [ ">", ["length", ["config", "mbx-indoor-level-selected"]], 0],
             ["==", ["get", "shape_type"], "building"],
         ],
         "layout": {
@@ -32,13 +33,22 @@ const indoorLayers = [
         "slot": "middle",
         "filter": [
             "all",
+            [ ">", ["length", ["config", "mbx-indoor-level-selected"]], 0],
             ["==", ["geometry-type"], "Polygon"],
             ["in", ["get", "shape_type"], ["literal", ["building"]]],
         ],
         "paint": {
             // Note: We should keep opacity above zero to enable queries of the footprint
             "fill-extrusion-color": "#fbfbfb",
-            "fill-extrusion-opacity": 0.6,
+            "fill-extrusion-opacity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                16,
+                0,
+                16.5,
+                0.8
+            ],
             "fill-extrusion-height": 1
         }
     },
@@ -48,7 +58,7 @@ const indoorLayers = [
         "id": "building-outline",
         "source": "indoor-source",
         "source-layer": "indoor_structure_metadata",
-        "minzoom": 16.0,
+        "minzoom": 15.0,
         "slot": "middle",
         "filter": [
             "all",
@@ -58,7 +68,7 @@ const indoorLayers = [
         "paint": {
             // Note: We should keep opacity above zero to enable queries of the footprint,
             // Keep 0.01 do be not visible, 0.1 useful to debug and see metadata geometries
-            "fill-opacity": 0.1,
+            "fill-opacity": 0.01,
             "fill-color": "#e8a5b8"
         }
     },
@@ -68,7 +78,7 @@ const indoorLayers = [
         "id": "floor-outline",
         "source": "indoor-source",
         "source-layer": "indoor_floor_metadata",
-        "minzoom": 16.0,
+        "minzoom": 15.0,
         "slot": "middle",
         "filter": [
             "all",
@@ -85,7 +95,7 @@ const indoorLayers = [
         "id": "floor-current",
         "source": "indoor-source",
         "source-layer": "indoor_floor",
-        "minzoom": 16.0,
+        "minzoom": 15.0,
         "slot": "middle",
         "filter": isSelectedFloorBase(),
         "paint": {
@@ -139,7 +149,7 @@ const indoorLayers = [
                 ["zoom"],
                 16,
                 0,
-                17,
+                16.5,
                 1
             ],
             "fill-extrusion-color": [
@@ -187,7 +197,7 @@ const indoorLayers = [
                 ["zoom"],
                 16,
                 0,
-                17,
+                16.5,
                 0.4
             ],
             "line-color": "#a3a3d1"
@@ -214,7 +224,7 @@ const indoorLayers = [
                 ["zoom"],
                 16,
                 0,
-                17,
+                16.5,
                 1
             ],
             "fill-extrusion-color": "hsl(250, 75%, 90%)",
@@ -248,7 +258,7 @@ const indoorLayers = [
                 ["zoom"],
                 16,
                 0,
-                17,
+                16.5,
                 0.2
             ],
             "fill-extrusion-color": "#f8cf7e",
@@ -303,6 +313,15 @@ const indoorLayers = [
         "paint": {
             "text-halo-color": "#ffffff",
             "text-halo-width": 1.3,
+            "text-opacity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                17,
+                0,
+                17.5,
+                1
+            ],
             "text-color": [
                 "case",
                 ["match", ["get", "class"], ["retail"], true, false],
@@ -336,6 +355,15 @@ const indoorLayers = [
         },
         "paint": {
             "text-color": "hsl(0, 0%, 0%)",
+            "text-opacity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                16,
+                0,
+                16.5,
+                1
+            ],
             "text-translate": [0, 0]
         }
     },
@@ -368,7 +396,16 @@ const indoorLayers = [
         "paint": {
             "text-halo-color": "#ffffff",
             "text-halo-width": 1.3,
-            "text-color": "hsl(0, 0%, 0%)"
+            "text-color": "hsl(0, 0%, 0%)",
+            "text-opacity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                16,
+                0,
+                16.5,
+                1
+            ],
         }
     },
 ];
@@ -407,6 +444,7 @@ const style = {
                                 "building_ids": ["get", "building_ids"],
                                 "type": ["get", "type"],
                                 "name": ["get", "name"],
+                                "short_name": ["get", "short_name"],
                                 "z_index": ["get", "z_index"],
                                 "connected_floor_ids": ["get", "connected_floor_ids"],
                                 "conflicted_floor_ids": ["get", "conflicted_floor_ids"]

src/css/mapbox-gl.css

@@ -825,30 +825,38 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     touch-action: pan-x pan-y;
 }
 
+.mapboxgl-ctrl-separator {
+    height: 1px;
+    background-color: #e0e0e0;
+}
+
 .mapboxgl-ctrl button.mapboxgl-ctrl-level-button {
-    width: auto;
-    height: auto;
-    padding: 5px 10px;
-    font-size: 12px;
-    line-height: 1.5;
     color: #333;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    margin: 2px;
-    cursor: pointer;
+    font-size: 18px;
+    width: 44px;
+    height: 44px;
+    font-weight: bold;
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }
 
 .mapboxgl-ctrl button.mapboxgl-ctrl-level-button:hover {
-    background-color: #f0f0f0;
+    background-color: #f5f5f5;
 }
 
 .mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected {
-    background-color: #4264FB;
+    background-color: #4a5568;
     color: #fff;
-    border-color: #4264FB;
 }
 
 .mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover {
-    background-color: #3151d9;
+    background-color: #2d3748;
 }

src/style/indoor_features_storage.ts

@@ -10,16 +10,28 @@ export default class IndoorFeaturesStorage {
         this._buildings = new Map();
     }
 
-    append(indoorData: IndoorData) {
+    append(indoorData: IndoorData): boolean {
         const building = indoorData.building;
-        const buildingId = building.properties.id as string;
-        if (buildingId) {
-            this._buildings.set(buildingId, building);
+        let hasChanges = false;
+        if (building) {
+            const buildingId = building.properties.id as string;
+            if (buildingId) {
+                this._buildings.set(buildingId, building);
+                if (!hasChanges && !this._buildings.has(buildingId)) {
+                    hasChanges = true;
+                }
+            }
         }
 
         indoorData.floors.forEach(newFloor => {
-            this._floors.set(newFloor.properties.id as string, newFloor);
+            const floorId = newFloor.properties.id as string;
+            if (!hasChanges && !this._floors.has(floorId)) {
+                hasChanges = true;
+            }
+            this._floors.set(floorId, newFloor);
         });
+
+        return hasChanges;
     }
 
     clear() {
@@ -28,16 +40,19 @@ export default class IndoorFeaturesStorage {
     }
 
     getFloors(buildingId: string | null = null): Array<TargetFeature> {
+        const floorFeatures = Array.from(this._floors.values());
         if (buildingId) {
-            return Array.from(this._floors.values()).filter(floor => {
+            const floors = floorFeatures.filter(floor => {
                 const buildingIds = floor.properties.building_ids as string;
                 if (!buildingIds) {
                     return false;
                 }
                 const buildingIdsArray = buildingIds.split(';');
-                return buildingIdsArray.includes(buildingId);
+                const isBuildingId = buildingIdsArray.includes(buildingId);
+                return isBuildingId;
             });
+            return floors;
         }
-        return Array.from(this._floors.values());
+        return floorFeatures;
     }
 }