Discussion :

[Doksuri]

bonjour, j'ai differentes couches de tuiles et de polygons sur une carte leafletjs.

j'aimerai qu'au click, je sache sur quel element j'ai clique.
quand je clique sur un polygon (meme cache derriere des tuiles), ca fonctionne. l'event me retourne bien le polygon.

mais quand je clique sur une tuile; pour une raison que j'ignore, il me retourne systematiquement le div conteneur de la carte.

(pour l'exemple, je suis partie de la page d'exemple de leaflet https://leafletjs.com/examples/quick-start/

Code javascript :

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
const map = L.map('map').setView([51.505, -0.09], 13);
 
map.createPane('frontTiles'); // ici, je simule mes differentes couches
map.getPane('frontTiles').style.zIndex = 900; // cette couche est "par dessus" les autres elements
map.getPane('frontTiles').style.opacity = .5; // pour qu'on vois le polygon de test
 
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  pane: 'frontTiles'
}).addTo(map);
 
const polygon = L.polygon([
		[51.509, -0.08],
		[51.503, -0.06],
		[51.51, -0.047]
	]).addTo(map).bindPopup('I am a polygon.');
 
  document.addEventListener('pointerup', e => {console.log(e); });

si je clique sur la zone du polygon, le target dans le console.log est correct
si je clique n'importe ou ailleur dans la carte, le console.log me retourne le div conteneur.... je voudrai qu'il me retourne l'image (la tuile) sur laquelle j'ai clique

[Toufik83]

Bonjour,

Quand j'ai vu le code du lien que vous avez posté, j'ai remarqué que l'événement click a été attaché à l'objet map

Code :

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

1
2
3
4
5
6
7
8
function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent(`You clicked the map at ${e.latlng.toString()}`)
			.openOn(map);
	}
 
	map.on('click', onMapClick);

Alors que dans votre code, l'événement attaché est pointerup et au document document.addEventListener('pointerup', e => {console.log(e); });.

Avez vous essayé d'attacher l'événement click au map?

[Doksuri]

oui je sais.

j'utilise l'event click de la map pour recup les lat/lon du click par exemple
mais cet event, ne donne pas ce sur quoi tu as clique.

par exemple, quand je clique sur une image de tuile, le e.target est ma map. et dedant, il y a des targets, qui sont tous les elements ajoute a la carte (donc aucun moyen de savoir sur quoi j'ai clique)

[Toufik83]

Pouvez-vous mettre un exemple en ligne reproduisant le problème? j'ai essayé mais je n'avais remarqué aucun souci ...

[Doksuri]

https://jsfiddle.net/kr1mqtjn/

si on clique a l'endroit du triangle bleu, on voit dans le console.log, que le e.target est bien notre triangle (le path du svg)

si on clique en dehors du triangle... on ne sait pas sur quoi on a clique, et le e.target est le div conteneur de la map

[NoSmoking]

Bonjour,
pas bien compris ce que tu cherches à cibler mais tu peux néanmoins connaître la tuile sur laquelle tu as cliqué.

Code :

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

1
2
3
4
5
6
7
8
9
10
map.on("click", (e) => {
  const TILE_SIZE = 256;
  const zoom = map.getZoom();
  const point = map.project(e.latlng, zoom);
  const tile = {
    column: Math.floor(point.x / TILE_SIZE),
    row: Math.floor(point.y / TILE_SIZE)
  }
  console.log( {zoom, point, tile});
});

Nota: perso je n'ai pas pu ouvrir ton exemple, temps de chargement bien trop long


[Edit] inversion de row et column dans le code

[Doksuri]

la, tu recalcules la tuile X/Y/Z en fonction du lat/lon... tu n'as pas l'element du DOM sur lequel on a clique (je dis ca, car j'ai plein de couches differentes)

[NoSmoking]

J'ai commencé par corriger l'inversion de row et column dans le code fourni ci-dessus

J’entrevois un peu mieux ce que tu cherches à faire même si je n'en vois pas trop l'utilité.

Tu peux utiliser la méthode event.composedPath() pour récupérer les éléments « traversés ».

Code :

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

1
2
3
4
5
6
7
function getInfo(e) {
  const path = event.composedPath() || [];
  path.forEach(function(elem) {
    console.log(elem.nodeName, elem);
  });
}
document.addEventListener("pointerup", getInfo);

[Doksuri]

je ne conaissais pas composedPath() mais malheureusement, il s'arrete aussi au div conteneur de la carte :/

[NoSmoking]

Attention toutefois il faut prendre en compte que Leaflet applique ses propres styles et qu'il affecte la propriété pointer-events à none sur pas mal d'éléments.

Voilà notamment ce que l'on trouve par exemple dans le fichier leaflet.css

Code css :

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
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}
 
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

[Doksuri]

aaaaaaaaaaaah

BIEN VU !!!!

effectivement, en re-ecrivant les regles pointer-events ca fonctionne niquel !