Leaflet : création de cercle au clic sur un marker

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Samehada
Messages : 1
Enregistré le : 25 nov. 2021, 22:05

Leaflet : création de cercle au clic sur un marker

Message par Samehada » 25 nov. 2021, 22:06

Bonjour tout le monde,

j'ai utilisé l'api d'openstreetmap pour faire une carte mais je suis bloquée sur un point. Comment je peux faire pour qu'à chaque fois que je clique sur un marker un cercle autour de lui se forme ?
https://100001.onl/ https://1921681254.mx/
J'ai essayé d'utiliser la fonction bindPopup et cercle mais je n'arrive pas à "relier" les 2.

Quelqu'un pour m'aider please ?

Merci d'avance.
Modifié en dernier par Samehada le 12 déc. 2021, 15:30, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Leaflet : création de cercle au clic sur un marker

Message par webmaster » 26 nov. 2021, 13:51

Bonjour,

Je ne connais pas leaflet. J'utilise gmaps pour mon site mellifere.com et l'environnement mellifere d'un rucher :
https://www.mellifere.com/apiculture/ru ... e=588972ff

Mais je veux bien le morceau de code pour essayer de comprendre et peut etre de corriger.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Robert.B
Messages : 7
Enregistré le : 15 déc. 2021, 19:55

Re: Leaflet : création de cercle au clic sur un marker

Message par Robert.B » 15 déc. 2021, 20:46

Bonjour,

Un exemple ici : view-source:http://f5aib.net/circle.php
Si ça vous convient, clic droit sur la page puis clic sur afficher le code.
Bon amusement.

Robert.B
Messages : 7
Enregistré le : 15 déc. 2021, 19:55

Re: Leaflet : création de cercle au clic sur un marker

Message par Robert.B » 15 déc. 2021, 21:27

Re Bonsoir,

Personnellement je ne sais pas remplacer le "console.log()" ni le "alert()" par des variables dans ce script en lignes 14 et 15.
Le but de la manœuvre étant de pouvoir utiliser les valeurs plus loin dans le programme plutôt que de les lire sur la console !
Merci.

6 <script>
7 var IP = "90.6.100.20";
8 chercher_infos (IP)
9
10 function chercher_infos (IP)
11 {
12 fetch("https://ipapi.co/" + IP + "/json")
13 .then(response => response.json())
14 .then(response => console.log(JSON.stringify(response)))
15 .catch(error => alert("Erreur : " + error));
16 }
17 </script>

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Leaflet : création de cercle au clic sur un marker

Message par webmaster » 17 déc. 2021, 09:33

Bonjour

Pour utiliser les variables en dehors de l'appel, il faut les envoyer dans une fonction par exemple :

Code : Tout sélectionner

 .then(response => traiter(JSON.stringify(response)))

function traiter(reponse) {
 //  faire ici un traitement 
}
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Robert.B
Messages : 7
Enregistré le : 15 déc. 2021, 19:55

Re: Leaflet : création de cercle au clic sur un marker

Message par Robert.B » 17 déc. 2021, 16:54

Bonjour, MERCI beaucoup, ça fonctionne exactement comme je le souhaite !
Ce n'est pas compliqué, mais ça ne s'invente pas.
Longue vie à ce super forum.
Cdt, Robert

Robert.B
Messages : 7
Enregistré le : 15 déc. 2021, 19:55

Re: Leaflet : création de cercle au clic sur un marker

Message par Robert.B » 17 déc. 2021, 17:01

Et voilà le résultat :
Reste l'extraction de ce qui m'intéresse, mais ça je sais faire.

{
"ip":"90.6.100.20",
"version":"IPv4",
"city":"Lay-Saint-Christophe",
"region":"Grand Est",
"region_code":"GES",
"country":"FR",
"country_name":"France",
"country_code":"FR",
"country_code_iso3":"FRA",
"country_capital":"Paris",
"country_tld":".fr",
"continent_code":"EU",
"in_eu":true,
"postal":"54690",
"latitude":48.7466,
"longitude":6.1928,
"timezone":"Europe/Paris",
"utc_offset":"+0100",
"country_calling_code":"+33",
"currency":"EUR",
"currency_name":"Euro",
"languages":"fr-FR,frp,br,co,ca,eu,oc",
"country_area":547030,
"country_population":66987244,
"asn":"AS3215",
"org":"Orange"
}

Répondre