[Extension navigateur] Récupérer les coordonnées du clic sur une map Leaflet

Version imprimable

14/09/2020, 13h03
JackNUMBER

[Extension navigateur] Récupérer les coordonnées du clic sur une map Leaflet

Bonjour,
je cherche à améliorer un site avec une extension navigateur, plutôt pour un usage personnel mais je la mettrais sur les stores.
Il s'agit d'un site avec une carte Mapbox (Leaflet) + ReactJS et j'aimerai récupérer les coordonnées lors d'un clic droit.

J'ai pas mal cherché dans les variables globales mais je ne trouve pas. J'ai regardé coté requêtes XHR mais elles ne se font que quand la carte est déplacée et charge des tuiles de la map (un clic droit déclenche parfois un repositionnement de la carte mais je ne peux pas me baser sur cette hypothèse).

Voici le site en question, il y a déjà un menu au clic droit et mon objectif est d'y ajouter un lien vers Google Street View. J'aurai aimé le faire en iframe pour ne pas changer de site mais les CORS bloquent).

Si vous avez une piste je suis preneur.
Merci :ccool:

Bonjour,
regarde du côté de

Code:

1
2
3
objetMap.on("contextmenu", function (ev) {
  console.log("position :", ev.latlng);
});

16/09/2020, 01h26
JackNUMBER

Merci pour ta réponse mais mon code doit tourner en dehors de Leaflet.
C'est une extension navigateur et le scope des propriétés de objetMap n'est pas atteignable.

Avec un breakpoint* dans les DevTools on peut accéder aux coordonnées mais depuis un script externe je ne vois pas comment. C'est le contexte de ma question initiale :)

* (chercher "onContextMenu =" et le second paramètre de la fonction contient un objet lngLat avec les informations qui m'intéresse)
19/09/2020, 09h58
NoSmoking

Je ne saisie pas bien tout.

Lorsque tu cliques droit, tu déclenches une action qui elle connait cette position puisque le contextmenu s'affiche au bon endroit et que la map se centre sur celle-ci !
19/09/2020, 23h48
JackNUMBER

Merci pour ton temps.

Étant dans le contexte d'une extension navigateur (code extérieur à celui du site qui affiche la map) je cherche justement un moyen d'accéder à ce fameux objetMap que tu cite dans ton extrait de code.
C'est là toute la question car les objets JS ne sont pas accessibles depuis window (si c'est le cas c'est ce que je cherche justement, d'où le détail des pistes que j'ai tentées).

Le titre d'origine du topic était : Récupérer coordonnées leaflet dans le navigateur (extension) mais ce n'est pas une question à propos de Leaflet directement.
21/09/2020, 18h07
NoSmoking

Citation:

Étant dans le contexte d'une extension navigateu

J'avais zappé cet aspect de la chose :oops:

Il te faut dans ce cas échanger entre tes scripts : Partage d'objets avec des scripts de page

Citation:

Le titre d'origine du topic était : Récupérer coordonnées leaflet dans le navigateur (extension) mais ce n'est pas une question à propos de Leaflet directement.

je re:oops: sur ce coup !
22/09/2020, 02h16
JackNUMBER

Cette fonction wrappedJSObject est très intéressante ! Merci pour le lien.
Avec window.wrappedJSObject l'extension a accès aux propriétés de window, mais rien de plus que ce qu'on peut voir dans la console.
Ce n'est pas compatible avec Chrome :ouin: donc je ne pense pas creuser cette piste.

Comme indiqué dans ce post, l'extension de debug de React a accès à tous les détails à toutes les props des objets, c'est que ça doit être faisable.
22/09/2020, 20h02
NoSmoking

Citation:

Envoyé par JackNUMBER

Ce n'est pas compatible avec Chrome :ouin: donc je ne pense pas creuser cette piste.

Peut-être voir du côté des web extensions, il y a sur DVP : Introduction aux WebExtensions

Si tu es l'auteur du code pourquoi ne pas exposer ton objet carte ?
24/09/2020, 00h48
JackNUMBER

Citation:

Envoyé par NoSmoking

Peut-être voir du côté des web extensions, il y a sur DVP : Introduction aux WebExtensions

C'est bien une extension navigateur utilisant l'api WebExtension que je suis en train de faire :)
Merci pour le lien, le tuto est une bonne entrée en matière et même si c'est toujours bien de relire les bases, il ne m'apporte pas de réponse.

Citation:

Envoyé par NoSmoking

Si tu es l'auteur du code pourquoi ne pas exposer ton objet carte ?

Je ne suis pas l'auteur du site que je cherche à améliorer, sinon je ne embêterai pas avec une extension et j'aurai directement codé ces features ^^

Mes 2 pistes sont :
- accéder aux state des objets react (le mieux)
- interception de certaines requêtes (le plus simple)