Différences

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

--- web:javascript:leaflet [2025/05/09 19:26] – [5. Code de la carte Arduino MKR Wifi 1010] 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 73: / Ligne 74: @@
 <body>
     <div id="map"></div>
-    <!-- Placer les coordonnées géographique du lycée -->
+    <!-- Placer les coordonnées géographiques du lycée -->
     Latitude : <div id="latitude">A compléter</div>
     Longitude : <div id="longitude">A compléter</div>
@@ 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 98: / Ligne 100: @@
 <callout type="warning" color="red" title="TELECHARGEMENT" icon="true">**Télécharger** <html><a href="https://webge.fr/doc/projets/tsin/00_Ressources_communes/Leaflet_fichiers_E.zip" target="_blank"><b>ICI</b></a></html> les fichiers //geolocalisation.js// et //lireval0et1.php//. Les placer dans le sous-dossier scripts du projet. \\ \\ **Remarques** \\
-- Les indications ci-dessous vous aiderons à compléter les fichiers téléchargés. \\
+- Les indications ci-dessous vous aideront à compléter les fichiers téléchargés. \\
 - Les intitulés sont repris dans les fichiers.
 </callout>
@@ Ligne 117: / Ligne 119: @@
   * **Etape 3. Ajouter un calque de tuiles à la carte**
-    * **Ressource** : la méthode <html><a href="https://leafletjs.com/reference.html#tilelayer-url-template" target="_blank">TileLayer</a></html> \\ Les tuiles sont des images raster ou vectorielles qui composent visuellement la carte en arrière-plan. Elles sont généralement récupérées depuis un serveur de cartographie, comme OpenStreetMap ou Mapbox. \\ \\ **Placer** le code ci-dessous dans le fichier //geolocalisation.js//. \\ \\ <code javascript *.js>
+    * **Ressource** : la méthode <html><a href="https://leafletjs.com/reference.html#tilelayer-url-template" target="_blank">TileLayer</a></html> \\ Les tuiles sont des images "raster" (pixel) ou vectorielles qui composent visuellement la carte en arrière-plan. Elles sont généralement récupérées depuis un serveur de cartographie, comme OpenStreetMap ou Mapbox. \\ \\ **Placer** le code ci-dessous dans le fichier //geolocalisation.js//. \\ \\ <code javascript *.js>
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
@@ Ligne 125: / Ligne 127: @@
       * La sélection L.tileLayer fait référence à une méthode de la bibliothèque Leaflet utilisée pour ajouter des calques de tuiles (ou "tile layers") à une carte interactive.
     * **Remarque** : //Il est important de noter que Leaflet est indépendant du fournisseur, ce qui signifie qu'il n'impose aucun choix particulier de fournisseurs pour les tuiles. De plus, Leaflet ne contient aucune ligne de code spécifique à un fournisseur ; vous êtes donc libre d'utiliser d'autres fournisseurs si nécessaire//. <code javascript *.js>
-    // Exemple : mapbox propose des tuile plus complète (nécessite un jeton que l'on peut obtenir sur le site)
+    // Exemple : mapbox propose des tuiles plus complètes (nécessite un jeton que l'on peut obtenir sur le site)
     /*L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@@ 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 217: / Ligne 217: @@
 ?>
 </code>
+\\
+====5. Pour aller plus loin ... ====
+<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>