fix(dae): marker and icon

src/containers/Map/FeatureImages.js

@@ -10,6 +10,7 @@ import markerRedDisabled from "~/assets/img/marker-red-disabled.png";
 import markerYellowDisabled from "~/assets/img/marker-yellow-disabled.png";
 import markerGreenDisabled from "~/assets/img/marker-green-disabled.png";
 import markerOrigin from "~/assets/img/marker-origin.png";
+import markerDae from "~/assets/img/marker-dae.png";
 
 const images = {
   red: markerRed,
@@ -20,6 +21,7 @@ const images = {
   yellowDisabled: markerYellowDisabled,
   greenDisabled: markerGreenDisabled,
   origin: markerOrigin,
+  dae: markerDae,
 };
 
 export default function FeatureImages() {

src/containers/Map/ShapePoints.js

@@ -17,11 +17,10 @@ const iconStyle = {
   iconSize: 0.5,
 };
 
-const defibCircleStyle = {
+const defibStyle = {
-  circleRadius: 8,
+  iconImage: "dae",
-  circleColor: ["get", "defibColor"],
+  iconSize: 0.5,
-  circleStrokeColor: "#FFFFFF",
+  iconAllowOverlap: true,
-  circleStrokeWidth: 2,
 };
 
 const useStyles = createStyles(({ theme: { colors } }) => ({
@@ -66,12 +65,12 @@ export default function ShapePoints({ shape, children, ...shapeSourceProps }) {
       />
 
       {/* Defibrillators (DAE) – separate layer (non-clustered) */}
-      <Maplibre.CircleLayer
+      <Maplibre.SymbolLayer
         filter={["==", ["get", "isDefib"], true]}
         key="points-defib"
         id="points-defib"
         aboveLayerID="points-origin"
-        style={defibCircleStyle}
+        style={defibStyle}
       />
 
       {children}

src/navigation/Drawer.js

@@ -7,6 +7,8 @@ import {
 } from "@expo/vector-icons";
 import { useNavigation, CommonActions } from "@react-navigation/native";
 
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+
 import DrawerContent from "~/navigation/DrawerNav/DrawerContent";
 import { useDrawerState } from "~/navigation/Context";
 import getDefaultDrawerWidth from "~/navigation/DrawerNav/getDefaultDrawerWidth";
@@ -375,11 +377,16 @@ export default React.memo(function DrawerNav() {
         options={{
           drawerLabel: "Défibrillateurs",
           drawerIcon: ({ focused }) => (
-            <MaterialCommunityIcons
+            <FontAwesome6
-              name="heart-pulse"
+              name="heart-circle-bolt"
               {...iconProps}
               {...(focused ? iconFocusedProps : {})}
             />
+            // <MaterialCommunityIcons
+            //   name="heart-flash"
+            //   {...iconProps}
+            //   {...(focused ? iconFocusedProps : {})}
+            // />
           ),
           unmountOnBlur: true,
         }}

src/scenes/AlertCurMap/useFeatures.js

@@ -130,7 +130,6 @@ export default function useFeatures({
           id,
           properties: {
             id,
-            defibColor: "#4CAF50",
             defib,
             isDefib: true,
           },

src/scenes/DAEItem/Carte.js

@@ -22,7 +22,6 @@ import IconTouchTarget from "~/components/IconTouchTarget";
 import { useTheme } from "~/theme";
 import { useDefibsState, useNetworkState } from "~/stores";
 import useLocation from "~/hooks/useLocation";
-import { getDefibAvailability } from "~/utils/dae/getDefibAvailability";
 import {
   osmProfileUrl,
   profileDefaultModes,
@@ -33,6 +32,7 @@ import {
   setA11yFocusAfterInteractions,
 } from "~/lib/a11y";
 
+import markerDae from "~/assets/img/marker-dae.png";
 import RoutingSteps from "~/scenes/AlertCurMap/RoutingSteps";
 import MapHeadRouting from "~/scenes/AlertCurMap/MapHeadRouting";
 
@@ -42,11 +42,6 @@ import {
   STATE_CALCULATING_LOADING,
 } from "~/scenes/AlertCurMap/constants";
 
-const STATUS_COLORS = {
-  open: "#4CAF50",
-  closed: "#F44336",
-  unknown: "#9E9E9E",
-};
 
 export default React.memo(function DAEItemCarte() {
   const { colors } = useTheme();
@@ -206,10 +201,6 @@ export default React.memo(function DAEItemCarte() {
   // Defib marker GeoJSON
   const defibGeoJSON = useMemo(() => {
     if (!hasDefibCoords) return null;
-    const { status } = getDefibAvailability(
-      defib.horaires_std,
-      defib.disponible_24h,
-    );
     return {
       type: "FeatureCollection",
       features: [
@@ -222,7 +213,6 @@ export default React.memo(function DAEItemCarte() {
           properties: {
             id: defib.id,
             nom: defib.nom || "Défibrillateur",
-            color: STATUS_COLORS[status],
           },
         },
       ],
@@ -370,22 +360,17 @@ export default React.memo(function DAEItemCarte() {
               </Maplibre.ShapeSource>
             )}
 
+            <Maplibre.Images images={{ dae: markerDae }} />
+
             {/* Defib marker */}
             {defibGeoJSON && (
               <Maplibre.ShapeSource id="defibItemSource" shape={defibGeoJSON}>
-                <Maplibre.CircleLayer
-                  id="defibItemCircle"
-                  style={{
-                    circleRadius: 10,
-                    circleColor: ["get", "color"],
-                    circleStrokeColor: "#FFFFFF",
-                    circleStrokeWidth: 2.5,
-                  }}
-                />
                 <Maplibre.SymbolLayer
-                  id="defibItemLabel"
+                  id="defibItemSymbol"
-                  aboveLayerID="defibItemCircle"
                   style={{
+                    iconImage: "dae",
+                    iconSize: 0.5,
+                    iconAllowOverlap: true,
                     textField: ["get", "nom"],
                     textSize: 12,
                     textOffset: [0, 1.8],

src/scenes/DAEList/Carte.js

@@ -20,21 +20,15 @@ import Text from "~/components/Text";
 import Loader from "~/components/Loader";
 import { useTheme } from "~/theme";
 import { defibsActions } from "~/stores";
-import { getDefibAvailability } from "~/utils/dae/getDefibAvailability";
+
+import markerDae from "~/assets/img/marker-dae.png";
 
 import useNearbyDefibs from "./useNearbyDefibs";
 
-const STATUS_COLORS = {
-  open: "#4CAF50",
-  closed: "#F44336",
-  unknown: "#9E9E9E",
-};
-
 function defibsToGeoJSON(defibs) {
   return {
     type: "FeatureCollection",
     features: defibs.map((d) => {
-      const { status } = getDefibAvailability(d.horaires_std, d.disponible_24h);
       return {
         type: "Feature",
         id: d.id,
@@ -45,8 +39,6 @@ function defibsToGeoJSON(defibs) {
         properties: {
           id: d.id,
           nom: d.nom || "Défibrillateur",
-          status,
-          color: STATUS_COLORS[status],
         },
       };
     }),
@@ -176,27 +168,19 @@ export default React.memo(function DAEListCarte() {
           detached={false}
         />
 
+        <Maplibre.Images images={{ dae: markerDae }} />
+
         {geoJSON.features.length > 0 && (
           <Maplibre.ShapeSource
             id="defibSource"
             shape={geoJSON}
             onPress={onMarkerPress}
           >
-            <Maplibre.CircleLayer
-              id="defibCircleLayer"
-              style={{
-                circleRadius: 8,
-                circleColor: ["get", "color"],
-                circleStrokeColor: "#FFFFFF",
-                circleStrokeWidth: 2,
-              }}
-            />
             <Maplibre.SymbolLayer
               id="defibSymbolLayer"
-              aboveLayerID="defibCircleLayer"
               style={{
-                iconImage: "heart-pulse",
+                iconImage: "dae",
-                iconSize: 0.6,
+                iconSize: 0.5,
                 iconAllowOverlap: true,
                 textField: ["get", "nom"],
                 textSize: 11,