Discussion :

[pierrot10]

Bonjour,

Je réalise que mon bout de code ne va pas fonctionner comme je l'ai imaginer.

Grâce a leaftlet, je crée un carte avec des markers.
Vous pouvez voir l'application ici
un marker contient un <i> avec l'icon qui représente le type de la station

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="leaflet-marker-icon leaflet-div-icon station-43 leaflet-zoom-animated leaflet-interactive" style="margin-left: 0px; margin-top: 0px; transform: translate3d(1989px, 1146px, 0px); z-index: 1146;" title="Jardin" tabindex="0" role="button" aria-describedby="leaflet-tooltip-144">
<i data-station="43" class="fa-solid fa-2xl fa-sun-plant-wilt red"></i>
</div>

Dans mon div, j'ai ajouté une class 'station-43' et
dans mon i, j'ai ajouté un attibut 'data-station="43"
le "43" correspond à l'ID de la station.
Donc, bien entendu pour chaque marker, cette valeur varie.

Je dois récupérer cette valeur (donc le 43, ou un autre ID en fonction du marker) et je m'arrache les cheveux.

Ce code fonctionne et je l'ai simplifier pour me consacrer à mon besoin

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
marker.bindPopup(
                            bindpop_str, {autoClose: true, closeOnClick: true, closeButton: true, keepInView:true}
                        ).on('popupopen', function(e) {
                            console.log('$(this)', $(this).children());
                            console.log("D", d);
 
                            $(this).closest( "i" ).css({"color": "red", "border": "2px solid red"});
})

Ceci

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(this).closest( "i" ).css({"color": "red", "border": "2px solid red"});

ne fonctionne pas quand je clique sur mon marker. J'essaye de trouver le <i> le plus proche pour lui mettre une couleur mais rien ne se passe.

Est-ce que le closest() chercher l'élément parent le plus proche?

J'ai aussi essayé ceci, sans succès

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(this).children( "i" ).css({"color": "blue", "border": "2px solid blue"});
 $(this).children( "i" ).attr("data-station").css({"color": "blue", "border": "2px solid blue"});
console.log($(this).children( "i" ).attr("data-station"));

Je nage, auriez-vous une piste?

[pierrot10]

Je crois avoir trouvé une alternative, mais je suis un peu surpris que cela fonctionne.

Avec leaflet, quand je créé un marker, je le fais ainsi

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var marker = L.marker(new L.LatLng(data.stations[i]['lat'],data.stations[i]['lng']), {
                            title: title,
                            alt: title,
                            icon: _icon,
                            id: data.stations[i]['id_station']
                        });

J'ai rajouté la dernière ligne (id: data.stations[i]['id_station']).

Avant d'aller plus loin, j'explique pourquoi je suis surpris. Si je regarde la doc, je n'ai l'option id. Il y a 'alt', 'title', 'zIndexOffset', etc, mais pas id.

Par curiosité, je l'ai ajouté sans avoir d'erreur.

Puis dans mon event, j'ai ajouté un console.log("sourcetarget", e)

puis je suis descendu dans les éléments enfant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 console.log("sourcetarget", e.sourceTarget)
 console.log("sourcetarget", e.sourceTarget.options)

et j'ai été agréablement surpris de voir mon id

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
marker.bindPopup(
  bindpop_str, {autoClose: true, closeOnClick: true, closeButton: true, keepInView:true}
 ).on('popupopen', function(e) {
  console.log("sourcetarget", e.sourceTarget.options.id)
}

et cela fonctionne pour chaque marker.

Masi je suis un peu perplexe, de pouvoir ajouter le paramètre id, dans le marker, alors qu'il n'est pas indiqué dans la doc.

Ce que je pourrais aussi faire, c'est d'attribuer l'id de ma satation a atl

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var marker = L.marker(new L.LatLng(data.stations[i]['lat'],data.stations[i]['lng']), {
                            title: title,
                            alt: data.stations[i]['id_station'],
                            icon: _icon
                        });

Mais bon, je ne crois pas qu'un atl est fait pour cela..., mais pourquoi pas

Qu'en pensez-vous?

[NoSmoking]

Bonjour,

Masi je suis un peu perplexe, de pouvoir ajouter le paramètre id, dans le marker, alors qu'il n'est pas indiqué dans la doc.

lorsque tu écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var marker = L.marker(new L.LatLng(data.stations[i]['lat'], data.stations[i]['lng']), {
  title: title,
  alt: title,
  icon: _icon,
  id: data.stations[i]['id_station']
});

... tu Instantiates a Marker object en lui passant des options, L.marker(<LatLng> latlng, <Marker options> options?).

Comme tout objet tu peux ajouter des propriétés qui t'intéressent, que tu as besoin comme tu l'as fait, en plus de celles prédéfinies. Idem pour les méthodes il suffit de savoir ce que l'on fait !

Qu'en pensez-vous?

C'est une façon courante de procéder.