IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut [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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    regarde du côté de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    objetMap.on("contextmenu", function (ev) {
      console.log("position :", ev.latlng);
    });

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut
    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)

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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 !

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut
    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.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Étant dans le contexte d'une extension navigateu
    J'avais zappé cet aspect de la chose

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

    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 sur ce coup !

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut
    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 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.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Citation Envoyé par JackNUMBER
    Ce n'est pas compatible avec Chrome 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 ?

  9. #9
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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 Voir le message
    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)

Discussions similaires

  1. [MooTools] Récupérer les coordonnées de clic sur image
    Par yoshï dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 21/12/2010, 13h59
  2. Récupérer les coordonnées (haut gauche) d'une cellule ou d'un div
    Par pcayrol dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/06/2007, 14h49
  3. Réponses: 6
    Dernier message: 20/04/2007, 11h38
  4. [WD10]Récupérer les coordonnées X,Y d'une ligne de table
    Par Louis Griffont dans le forum WinDev
    Réponses: 10
    Dernier message: 27/03/2007, 08h42
  5. Comment récupérer les coordonnées d’un clique sur une image ?
    Par da_sys dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/11/2006, 12h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo