front: fix layers order on map

Author: SharglutDev

front/src/applications/referenceMap/Map.tsx

@@ -41,6 +41,7 @@ import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
 import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
 
 import 'common/Map/Map.scss';
+import Buildings3d from 'common/Map/Layers/Buildings3d';
 
 function Map() {
   const mapBlankStyle = useMapBlankStyle();
@@ -149,6 +150,8 @@ function Map() {
             />
           </>
         )}
+        <Buildings3d layerOrder={LAYER_GROUPS_ORDER[LAYERS.PLATFORMS.GROUP]} />
+
         <Platforms
           colors={colors[mapStyle]}
           layerOrder={LAYER_GROUPS_ORDER[LAYERS.PLATFORMS.GROUP]}

front/src/assets/mapstyles/OSMStyle.json

@@ -1040,19 +1040,6 @@
       }
     }
   },
-  {
-    "id": "batiments_3d",
-    "source": "openmaptiles",
-    "source-layer": "building",
-    "type": "fill-extrusion",
-    "minzoom": 0,
-    "paint": {
-        "fill-extrusion-color": "#aaa",
-        "fill-extrusion-height": ["get", "render_height"],
-        "fill-extrusion-base": ["get", "render_min_height"],
-        "fill-extrusion-opacity": 0.6
-    }
-  },
   {
     "id": "admin_sub",
     "type": "line",

front/src/common/Map/Consts/colors.ts

@@ -56,7 +56,7 @@ const colors: Record<string, Theme> = {
       halo: '#eee',
     },
     platform: {
-      fill: '#e05206',
+      fill: '#e9b996',
     },
     pn: {
       text: '#712b2b',

front/src/common/Map/Layers/Buildings3d.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Source, LayerProps } from 'react-map-gl/maplibre';
+
+import OrderedLayer from 'common/Map/Layers/OrderedLayer';
+import { OSM_URL } from 'common/Map/const';
+
+type Buildings3dProps = {
+  layerOrder?: number;
+};
+
+function Buildings3d(props: Buildings3dProps) {
+  const { layerOrder } = props;
+
+  const buildings3dParams: LayerProps = {
+    id: 'batiments_3d',
+    source: 'openmaptiles',
+    'source-layer': 'building',
+    type: 'fill-extrusion',
+    minzoom: 0,
+    paint: {
+      'fill-extrusion-color': '#aaa',
+      'fill-extrusion-height': ['get', 'render_height'],
+      'fill-extrusion-base': ['get', 'render_min_height'],
+      'fill-extrusion-opacity': 0.6,
+    },
+  };
+
+  return (
+    <Source id="batiments" type="vector" url={OSM_URL} source-layer="building">
+      <OrderedLayer {...buildings3dParams} layerOrder={layerOrder} />
+    </Source>
+  );
+}
+
+export default Buildings3d;

front/src/common/Map/Layers/OrderedLayer.tsx

@@ -11,6 +11,7 @@ export default function OrderedLayer(props: OrderedLayerProps) {
   const { layerOrder, ...restOfLayerProps } = props;
 
   const layerProps = { ...restOfLayerProps };
+  console.log('order : ', layerProps);
   if (isNumber(layerOrder) && map?.getLayer(`virtual-layer-${layerOrder}`)) {
     layerProps.beforeId = `virtual-layer-${layerOrder}`;
   }

front/src/common/Map/Layers/Platforms.tsx

@@ -16,7 +16,7 @@ function Platforms(props: PlatformsProps) {
 
   const platformsParams: LayerProps = {
     id: 'osm/platforms',
-    type: 'fill-extrusion',
+    type: 'fill',
     source: 'openmaptiles',
     'source-layer': 'transportation',
     filter: [
@@ -26,10 +26,7 @@ function Platforms(props: PlatformsProps) {
       ['==', 'subclass', 'platform'],
     ],
     paint: {
-      'fill-extrusion-color': colors.platform.fill,
-      'fill-extrusion-height': 2,
-      'fill-extrusion-base': 1,
-      'fill-extrusion-opacity': 0.4,
+      'fill-color': colors.platform.fill,
     },
   };