Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:leaflet [2025/05/10 10:28] – [3.2 Code du fichier geolocalisation.js] phil
+++ web:javascript:leaflet [2025/06/19 19:29] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
-===== JavaScript - Créer une carte Leaflet =====
+===== JavaScript (jQuery) - Créer une carte Leaflet =====
 {{ :web:javascript:leaflet1.jpg?nolink|}}
-[Mise à jour le 9/5/2025]
+[Mise à jour le 11/6/2025]
 \\
@@ Ligne 11: / Ligne 11: @@
   * Site <html><a href="https://www.coordonnees-gps.fr/" target="_blank">coordonnees-gps.fr</a></html>
   * Site Leaflet : <html><a href="https://leafletjs.com/examples/quick-start/" target="_blank">tutoriels</a></html>
+  * Vidéo <html><a href="https://www.youtube.com/watch?v=O7YKyTW6sQ8" target="_blank">Les coordonnées géographiques, latitude, longitude, UTM</a></html>
 === Prérequis ===
@@ Ligne 87: / Ligne 88: @@
     </style>
     </code>
 === 3.2 Code du fichier geolocalisation.js ===
 <callout type="info" title="Présentation" icon="true">Le fichier **//geolocalisation.js//** contient le code partiel de la carte et de la communication avec une Arduino MKR Wifi 1010.</callout>
@@ Ligne 148: / Ligne 150: @@
   * **Etape 5. Gérer la communication avec la carte Arduino**
-<callout type="info" title="Présentation" icon="true">La communication avec la carte Arduino est réalisée par la méthode <html><a href="https://developer.mozilla.org/fr/docs/Glossary/AJAX" target="_blank"><b>$.ajax</b></a></html> de jQuery (située dans la fonction //**loadCoordinates**//) pour effectuer une requête HTTP asynchrone vers un serveur. Elle est conçue pour récupérer des données <html><a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation" target="_blank"><b>JSON</b></a></html> (la latitude et la longitude) depuis un fichier PHP, traiter ces données, mettre à jour la carte et afficher la valeur de la latitude et la longitude dans la page html. </callout>
+    * **Ressource** :
+    * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu la table au format JSON suivante :**[{"val0":237,"val1":771}]**. \\ //Remarque : ces valeurs correspondent à la position angulaire de deux potentiomètres reliés aux entrées A0 et A1 d'une carte Arduino MKR Wifi 1010.// \\ \\ Cette table est contenue dans la variable **data**. \\ La méthode **each** de l'objet jQuery extrait le contenu de la table. On obtient : \\ - **enrty.val0** = 237 \\ - **entry.val1** = 771 \\ Pour les tests avec des potentiomètres, ces valeurs doivent être adaptées pour qu'un curseur s'affiche aux alentours de Bourges.  \\ \\ **Renseigner** les lignes de code mises en surbrillance dans le fichier //geolocalisation.html//.
-    * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu la table au format JSON suivante :**[{"val0":237,"val1":771}]**. \\ //Remarque : ces valeurs correspondent à la position angulaire de deux potentiomètres reliés aux entrées A0 et A1 d'une carte Arduino MKR Wifi 1010.// \\ \\ Cette table est contenu dans la variable **data**. \\ La méthode **each** de l'objet jQuery extrait le contenu de la table. On obtient : \\ - **enrty.val0** = 237 \\ - **entry.val1** = 771 \\ Pour les test avec des potentiomètres ces valeurs doivent être adaptées pour qu'un curseur s'affiche aux alentours de Bourges.  \\ \\ **Renseigner** les lignes de code mise en surbrillance dans le fichier //geolocalisation.html//.
 <code javascript *.js [enable_line_numbers="true",highlight_lines_extra="13,16,19,20"]>
@@ Ligne 196: / Ligne 197: @@
 </code>
-    * **Explications détaillées** \\
+<callout type="info" title="Pour aller plus loin..." icon="true">La communication avec la carte Arduino est réalisée par la méthode <html><a href="https://developer.mozilla.org/fr/docs/Glossary/AJAX" target="_blank"><b>$.ajax</b></a></html> de jQuery (située dans la fonction //**loadCoordinates**//) pour effectuer une requête HTTP asynchrone vers un serveur. Elle est conçue pour récupérer des données <html><a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation" target="_blank"><b>JSON</b></a></html> (la latitude et la longitude) depuis un fichier PHP, traiter ces données, mettre à jour la carte et afficher la valeur de la latitude et la longitude dans la page html. \\ On pourra utiliser Copilot pour avoir une description détaillée du code fonctionnel.</callout>
-      * Pour aller plus loin, on pourra utiliser Copilot pour avoir une description détaillée du code fonctionnel.
 \\
@@ Ligne 204: / Ligne 204: @@
 <callout type="info" title="Présentation" icon="true">Le fichier **//lireval0et1.php//** "fait le lien" entre le navigateur et la carte Arduino.</callout>
-  * **Etape 6. Modifier l'url pour l'adapter à la carte utilisée**
+  * **Etape 6. Modifier l'url pour l'adapter à la carte à microcontrôleur utilisée**
 <code php *.php>
 <?php
@@ Ligne 221: / Ligne 221: @@
 ====5. Pour aller plus loin ... ====
-<callout type="info" title="Améliorations" icon="true">Apporter les améliorations que vous jugerez utiles à votre projet en vous aidant de la documentation de Leaflet (accessible sur le site) ou en consultant le tutoriel sur le site <html><a href="https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/" target="_blank">zestedesavoir</a></html>.</callout>
+<callout type="info" title="Améliorations" icon="true">Apporter des améliorations (personnaliser les marqueurs, les relier entre-eux, etc.) à votre projet en vous aidant de la documentation de <html><a href="https://leafletjs.com/index.html" target="_blank">Leaflet</a></html> ou en consultant le tutoriel sur le site <html><a href="https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/" target="_blank">zestedesavoir</a></html>.</callout>
 \\
 ==== 6. Code de la carte Arduino MKR Wifi 1010 ====
-<callout type="tip" title="TELECHARGEMENT" icon="true">Le code de la carte Arduino MKR Wifi 1010 est disponible <html><a href="https://webge.fr/doc/wikis/code/Arduino/ARD_MKR1010_HTTP_SERVER.zip" target="_blank"><b>ICI</b></a></html></callout>
+<callout type="tip" title="TELECHARGEMENT" icon="true">Le code destiné à une carte Arduino (MKR Wifi 1010) est disponible <html><a href="https://webge.fr/doc/wikis/code/Arduino/ARD_MKR1010_HTTP_SERVER.zip" target="_blank"><b>ICI</b></a></html></callout>