Discussion :

[cat75]

Bonjour,

Utilisation de la bibliothèque "L.Control.geocoder" de Per Liedman : https://github.com/perliedman/leaflet-control-geocoder

Un clic gauche sur l'icône de l'utilisateur affiche en Popup le contenant result.htm…

Une possibilité de clic droit ne me semble pas codée dans cette portion de code existant dans le script L.Control.Locate.js :

Code Original :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
markGeocode: function(result) {
      result = result.geocode || result;
 
      this._map.fitBounds(result.bbox);
 
      if (this._geocodeMarker) {
        this._map.removeLayer(this._geocodeMarker);
      }
 
      this._geocodeMarker = new L.Marker(result.center, {icon: IconGeocoder})
        .bindPopup(result.html || result.name)
        .addTo(this._map)
      return this;
    },

Pour obtenir le résultat souhaité, faute de réponse de l'auteur, je n'ai pas trouvé d'autre solution que de le modifier comme suit :

Code :

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
29
markGeocode: function(result) {
      result = result.geocode || result;
 
      this._map.fitBounds(result.bbox);
 
      if (this._geocodeMarker) {
        this._map.removeLayer(this._geocodeMarker);
      }
 
      this._geocodeMarker = new L.Marker(result.center, {icon: IconGeocoder})
        .bindPopup(result.html || result.name)
        .addTo(this._map)
// **********************************************
// Ajout Personnel pour Clic Droit
// **********************************************
		.on("contextmenu", function (e) {
 
			var me_ = this;
			// position pour affichage
			var pos = {
				x: e.originalEvent.pageX,
                y: e.originalEvent.pageY,
            };
            // affiche un menu contextuel
			showContextMenu(me_, pos);
        })
// ***********************************************
      return this;
    },

Comment ajouter cette possibilité dans une page html sans modifier le code L.Control.Locate.js par respect du travail de Per Liedman ? ( mot clé "xxxx" à placer style xxxx.on("contextmenu", function (e) { )

Merci beaucoup par avance

[cat75]

Bonsoir,

Vu une modification f-leb sur le préfixe [Leaflet] de ma demande peut être le résultat d'un quiproquo...

Sauf erreur il s'agit bien d'un AddOn Leaflet développé par un tiers et ma demande concerne la possibilité de coder ce clic droit dans un propre fichier HTML developpé avec leaflet.

Mon codage externe ;

Code :

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
            // Limiter les recherches à la France et ses 8 frontières plus Pays-Bas et Autriche
            var MyPays = [["fr", "be", "lu", "de", "ch", "it", "mc", "es", "ad", "nl", "at"]];
 
            // Icône pour le lieu trouvé
            var IconGeocoder = wptIcon[13];
 
            var osmGeocoder = new L.Control.geocoder({
                placeholder: "Rechercher...",
                errorMessage: "Lieu inconnu !",
                iconLabel: "Initialiser une nouvelle recherche",
                geocoder: L.Control.Geocoder.nominatim({ geocodingQueryParams: { countrycodes: MyPays } }),
                defaultMarkGeocode: true,
            })
                .on("markgeocode", function (e) {
                    Wpt_Name = e.geocode.name.substring(0, e.geocode.name.indexOf(","));
                    document.getElementById("EnteteCenter").innerHTML = Wpt_Name + " : Latitude " + e.geocode.center.lat.toFixed(5) + ", Longitude " + e.geocode.center.lng.toFixed(5);
                    Ajouter_SpanColorTrk("#BFDDFF", "EnteteCenter", "A");
                })
                .addTo(map);
 
/*
// Placer un clic droit sur l'icone affichée par le script mais sur quel élément ? :
.on("contextmenu", function (e) {
...
}
*/

Bonne fin de journée,

[NoSmoking]

Bonjour,
regarde ce qu'il y a dans le paramètre transmis lors du clic droit sur la carte

Code :

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

1
2
3
oMap.on("contextmenu", function (e){
  console.log(e);
});

plein de choses intéréssantes

[cat75]

Bonjour,

Merci pour votre intervention.

Un premier élément que nul doute vous avez corrigé, le script en question est Control.Geocoder.js et non L.Control.Locate.js

J'interviens sur un codage non documenté, qui fait appel à plusieurs plugins... et des béquilles ajoutées avec des noms de variable différents selon les markers ajoutés !

En outre un contextmenu : oMap.on("contextmenu", function (e) existe pour ajouter des makers sur la carte, puis sur la variable attribué à ces markers pour ouvrir un menu contextuel permettant plusieurs actions.

De fait un clic droit sur l'icône propriétaire du script Control.Geocoder ajoute une nouvelle icône au lieu de me permettre une action particulière...

Je bute pour trouver l'élément cliqué (this._geocodeMarker) même ne plaçant un console.log bavard dans mon ajout...

Code :

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
// **********************************************
// Ajout Personnel pour Clic Droit
// **********************************************
		.on("contextmenu", function (e) {
 
console.log(e);
 
			var me_ = this;
			// position pour affichage
			var pos = {
				x: e.originalEvent.pageX,
                y: e.originalEvent.pageY,
            };
            // affiche un menu contextuel
			showContextMenu(me_, pos);
        })
// ***********************************************

[NoSmoking]

Je bute pour trouver l'élément cliqué (this._geocodeMarker) même ne plaçant un console.log bavard dans mon ajout...

Si je comprends le besoin, il faut ajouter l'action sur le marqueur fraichement affiché.

Code :

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
map.on('click', function (e) {
  control.options.geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function (results) {
    var r = results[0];
    if (r) {
      if (marker) {
        map.removeLayer(marker);
      }
      marker = L.marker(r.center).bindPopup(r.html || r.name).addTo(map).openPopup();
      // on stoke les datas au cas où !
      L.setOptions(marker, {
        "infos": r
      });
      marker.on("contextmenu", function (ev) {
        // les infos sont disponibles ici
        console.log(marker.options.infos);
      });
    }
  })
});

[cat75]

Pour information le script Control.Geocoder.js en service affiche une version 1.13 avec son autre fichier Control.Geocoder.js.map

Insérer votre codage provoque l'erreur suivante : Cannot read properties of undefined (reading 'reverse')....


Par contre mes recherches pour isoler un code html utilisant uniquement ce script m'ont amené à localiser une vers 2.30.0 !

https://unpkg.com/leaflet-control-ge...ol.Geocoder.js
et
https://unpkg.com/leaflet-control-ge...eocoder.js.map

Avec ce code source remanié en version release 2.20.0 ou 2.30.0 - Fichier.zip trouvé sur "Release" depuis ce lien https://github.com/perliedman/leaflet-control-geocoder dans lequel manque les fichiers js et js.map - mais contient un répertoire démo avec index.html

Or cet html fait référence à une routine similaire à la votre hormis la ligne :

Code :

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

1
2
map.on('click', function (e) {
control.options.geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function (results) {

remplacée par :

Code :

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

1
2
map.on('click', function (e) {
geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function (results) {

et ne génère aucune erreur sur le mot reverse en présence des scripts js.


Devant le refus de mon Boss d'utiliser une version "récente" pour cause ceinture et bretelles, j'attends un éventuel contre ordre pour tester ce source remanié dont, nul doute, un simple 'contextmenu' au lieu de 'click' offrira d'outres possibilités.

Désolé pour ce dérangement, néanmoins un vif mercis pour votre disponibilité et votre sens du partage de vos connaissances.

Cat,

[NoSmoking]

Insérer votre codage provoque l'erreur suivante : Cannot read properties of undefined (reading 'reverse')....

je viens de faire un essai en utilisant la version 1.13 et sans rien changé d'autre, ... le résultat reste le même !

[cat75]

Vous avez tout à fait raison d'avoir insisté, votre routine fonctionne parfaitement ... avec le code source officiel v1.13 que je viens d'utiliser en url du head html en lieu et place du script placé en local !

Vous m'avez ouvert les yeux sur ce script local adapté sans scrupule, ne serait-ce qu'en neutralisant "this._map.removeLayer(this._geocodeMarker);" pour conserver l'affichage des marker précédents donc peut présenter d'autres modifcations sauvage...

Je ne me suis pas méfié de cet existant !

Vraiment un grand Merci pour cet éclairage ... et pour cette routine que je n'aurai pas eu l'idée d'utiliser !

Cat,