src/containers/Map/FeatureImages.js

@@ -10,7 +10,6 @@ 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,
@@ -21,7 +20,6 @@ const images = {
   yellowDisabled: markerYellowDisabled,
   greenDisabled: markerGreenDisabled,
   origin: markerOrigin,
-  dae: markerDae,
 };
 
 export default function FeatureImages() {

src/containers/Map/ShapePoints.js

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

src/navigation/Drawer.js

@@ -7,8 +7,6 @@ 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";
@@ -377,16 +375,11 @@ export default React.memo(function DrawerNav() {
         options={{
           drawerLabel: "Défibrillateurs",
           drawerIcon: ({ focused }) => (
-            <FontAwesome6
-              name="heart-circle-bolt"
+            <MaterialCommunityIcons
+              name="heart-pulse"
               {...iconProps}
               {...(focused ? iconFocusedProps : {})}
             />
-            // <MaterialCommunityIcons
-            //   name="heart-flash"
-            //   {...iconProps}
-            //   {...(focused ? iconFocusedProps : {})}
-            // />
           ),
           unmountOnBlur: true,
         }}

src/scenes/AlertCurMap/useFeatures.js

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

src/scenes/DAEItem/Carte.js

@@ -22,6 +22,7 @@ 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,
@@ -32,7 +33,6 @@ 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,6 +42,11 @@ 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();
@@ -201,6 +206,10 @@ 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: [
@@ -213,6 +222,7 @@ export default React.memo(function DAEItemCarte() {
           properties: {
             id: defib.id,
             nom: defib.nom || "Défibrillateur",
+            color: STATUS_COLORS[status],
           },
         },
       ],
@@ -360,17 +370,22 @@ export default React.memo(function DAEItemCarte() {
               </Maplibre.ShapeSource>
             )}
 
-            <Maplibre.Images images={{ dae: markerDae }} />
-
             {/* Defib marker */}
             {defibGeoJSON && (
               <Maplibre.ShapeSource id="defibItemSource" shape={defibGeoJSON}>
-                <Maplibre.SymbolLayer
-                  id="defibItemSymbol"
+                <Maplibre.CircleLayer
+                  id="defibItemCircle"
+                  style={{
+                    circleRadius: 10,
+                    circleColor: ["get", "color"],
+                    circleStrokeColor: "#FFFFFF",
+                    circleStrokeWidth: 2.5,
+                  }}
+                />
+                <Maplibre.SymbolLayer
+                  id="defibItemLabel"
+                  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,15 +20,21 @@ import Text from "~/components/Text";
 import Loader from "~/components/Loader";
 import { useTheme } from "~/theme";
 import { defibsActions } from "~/stores";
-
-import markerDae from "~/assets/img/marker-dae.png";
+import { getDefibAvailability } from "~/utils/dae/getDefibAvailability";
 
 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,
@@ -39,6 +45,8 @@ function defibsToGeoJSON(defibs) {
         properties: {
           id: d.id,
           nom: d.nom || "Défibrillateur",
+          status,
+          color: STATUS_COLORS[status],
         },
       };
     }),
@@ -168,19 +176,27 @@ 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: "dae",
-                iconSize: 0.5,
+                iconImage: "heart-pulse",
+                iconSize: 0.6,
                 iconAllowOverlap: true,
                 textField: ["get", "nom"],
                 textSize: 11,

src/scenes/DAEList/Liste.js

@@ -70,7 +70,7 @@ function EmptyError({ error, onRetry }) {
         ]}
       >
         Impossible de charger les défibrillateurs.{"\n"}
-        Veuillez réessayer ultérieurement.
+        {error?.message || "Veuillez réessayer."}
       </Text>
       {onRetry && (
         <Button mode="contained" onPress={onRetry} style={styles.retryButton}>

src/stores/defibs.js

@@ -15,27 +15,6 @@ const DEFAULT_LIMIT = 200;
 
 const AUTO_DISMISS_DELAY = 4_000;
 
-/**
- * Convert a technical DAE update error into a user-friendly French message.
- * The raw technical details are already logged via console.warn in updateDaeDb.
- */
-function userFriendlyDaeError(error) {
-  const msg = error?.message || "";
-  if (msg.includes("Network") || msg.includes("network")) {
-    return "Impossible de contacter le serveur. Vérifiez votre connexion internet et réessayez.";
-  }
-  if (msg.includes("HTTP")) {
-    return "Le serveur a rencontré un problème. Veuillez réessayer ultérieurement.";
-  }
-  if (msg.includes("Download failed") || msg.includes("file is empty")) {
-    return "Le téléchargement a échoué. Veuillez réessayer.";
-  }
-  if (msg.includes("failed validation")) {
-    return "Le fichier téléchargé est corrompu. Veuillez réessayer.";
-  }
-  return "La mise à jour a échoué. Veuillez réessayer ultérieurement.";
-}
-
 export default createAtom(({ merge, reset }) => {
   const actions = {
     reset,
@@ -174,7 +153,7 @@ export default createAtom(({ merge, reset }) => {
       if (!result.success) {
         merge({
           daeUpdateState: "error",
-          daeUpdateError: userFriendlyDaeError(result.error),
+          daeUpdateError: result.error?.message || "Erreur inconnue",
         });
         return;
       }