Bonjour à tous,

J'affiche des stations sur une carte.
Les stations ont des fonctions différentes: météo, irrigation, gel.

J'aimerais donc afficher un picto pour une station en fonction de son mode.

Sur ma Map, j'affiche donc des markers et chaque marker doit avoir le picto de sa station (picto mété, picto température, picto irrigation etc).

Ci-dessous fonctionne très bien, sauf que j'affiche toujours le même picto

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 {markers?.map((marker, index) => (
              <Marker
                key={index}
                title={marker.name}
                coordinate={marker}
                //image={require("@/assets/images/markers/1.png")}
                onPress={() => onMarkerSelected(marker, marker.id_station)}
              >
                <Callout onPress={calloutPressed}>
                  <View style={{ padding: 0, alignItems: 'center'}}>
                    <Image height={15} source={require('"@/assets/images/markers/1.png')} />
                    <Text style={{ fontSize: 16 }}>{marker.name}</Text>
 
                    <Link href={{pathname: "/station/[id]", params: {id: marker.id_station}}}>Détail</Link>
                  </View>
                </Callout>
 
              </Marker>
            ))}

Je reprneds la partie qui nous intéresse

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<Image height={15} source={require("@/assets/images/markers/1.png")} />

J'ai essayé plusieurs truc sans succès

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<Image height={15} source={require("@/assets/images/markers/"+marker.id_station+".png")} />
Ceci ne fonctionne èas
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
  const icon = (id:number) => {
    return 'require("@/assets/images/markers/'+ id +'.png")'
  }
<Image height={15} source={icon(1)} />
Ceci fontionne maintenant, mais je ne suis pas convaincu que c'est le top. (L'idex du tableau est le même que le numéro de l'image qui est aussi le même que l'id du type de la station

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  const ic = [
    {
      id: '0', // Apparemment inutile....
      src: require("@/assets/images/markers/0.png"), // Marker neutre
    },
    {
      id: '1',
      src: require("@/assets/images/markers/1.png"), // Température
    },
    {
      id: '2',
      src: require("@/assets/images/markers/2.png"), // Irrigation
    },
    {
      id: '3',
      src: require("@/assets/images/markers/3.png"), // Météo
    },
    {
      id: '4',
      src: require("@/assets/images/markers/4.png"), // Workshop Bougie à pellete (gel)
    },
    {
      id: '5',
      src: require("@/assets/images/markers/5.png"), // Gateway
    },
  ];
 
<Image height={15} source={ic[marker.id_station_type].src} />

J'aurais préféré la fonction, mais malheureusement, ca ne passe pas.

Il n'y a pas une manière plus élégante de faire ca?