Outils pour utilisateurs

Outils du site


isn:openstreetmap1

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
isn:openstreetmap1 [2019/02/08 15:34]
techer.charles [Ajout d'un marqueur]
isn:openstreetmap1 [2019/03/11 11:18] (Version actuelle)
techer.charles [Découvrir les usages possibkles d'OpenStreepMap]
Ligne 12: Ligne 12:
   * le wiki de l'API : https://​wiki.openstreetmap.org/​wiki/​API   * le wiki de l'API : https://​wiki.openstreetmap.org/​wiki/​API
  
-===== Découvrir ​le susage pôssibkles ​d'​OpenStreepMap =====+===== Découvrir ​les usages possibles ​d'​OpenStreepMap =====
 **La base de données OpenStreetMap** est faite pour être **utilisée**. Plusieurs possibilités existent selon ses besoins et l'​utilisation attendue. **Découvre** les **usages possibles** avec le site OpenStreetMap France :  **La base de données OpenStreetMap** est faite pour être **utilisée**. Plusieurs possibilités existent selon ses besoins et l'​utilisation attendue. **Découvre** les **usages possibles** avec le site OpenStreetMap France : 
   * http://​www.openstreetmap.fr/​utiliser/​   * http://​www.openstreetmap.fr/​utiliser/​
Ligne 101: Ligne 101:
    <​script type="​text/​javascript"​ src="​carte.js"></​script>​    <​script type="​text/​javascript"​ src="​carte.js"></​script>​
 </​code>​ </​code>​
 +==== Le résultat avec Trinket.io ====
 +<​html>​
 +<iframe src="​https://​trinket.io/​embed/​html/​fcb6b4bd38"​ width="​100%"​ height="​600"​ frameborder="​0"​ marginwidth="​0"​ marginheight="​0"​ allowfullscreen></​iframe>​
 +</​html>​
 +
 ==== Ajout d'un marqueur ==== ==== Ajout d'un marqueur ====
 **Ajoute** à la fin du fichier **carte.js** le code suivant : **Ajoute** à la fin du fichier **carte.js** le code suivant :
Ligne 115: Ligne 120:
  
 ==== Ajout plusieurs marqueurs ==== ==== Ajout plusieurs marqueurs ====
-Tout d'​abord,​ créons une **variable villes** contenant plusieurs villes avec leur coordonnées,​ en utilisant un tableau associatif de Javascript.+Tout d'​abord,​ créons une **variable villes** contenant plusieurs villes avec leur coordonnées,​ en utilisant un **tableau associatif** de Javascript.
   * ajoute au début du fichier **carte.js** la variable **villes** avec les informations suivantes :    * ajoute au début du fichier **carte.js** la variable **villes** avec les informations suivantes : 
 <code javascript>​ <code javascript>​
 // Nous initialisons une liste de marqueurs // Nous initialisons une liste de marqueurs
 var villes = { var villes = {
 +  "​Panazol":​ {"​lat":​ 45.8363, "​lon":​ 1.3065},
  "​Feytiat":​ { "​lat":​ 45.8101, "​lon":​ 1.3309 },   "​Feytiat":​ { "​lat":​ 45.8101, "​lon":​ 1.3309 }, 
  "​Condat-sur-Vienne":​ { "​lat":​ 45.7937, "​lon":​ 1.2308 },  "​Condat-sur-Vienne":​ { "​lat":​ 45.7937, "​lon":​ 1.2308 },
Ligne 126: Ligne 132:
 }; };
 </​code> ​ </​code> ​
 +    * Voici comment accéder aux informations du **tableau associatif** ville en javascript :
 +<code javascript>​
 +// pour à une ville particulière
 +villes["​Landouge"​]
 +// pour accéder à sa latitude
 +villes["​Landouge"​].lat
 +</​code>​
 +  * utilisation de la **boucle for** pour parcourir tout le tableau associatif et créer autant de marqueur qu'il y a de villes ; les variables marqueurs de chaque ville seront également mémorisés dans une tableau associatif **marqueurs**.
 +<code javascript>​
 +// Nous parcourons la liste des villes
 +var marqueurs = {};
 +for (var ville in villes) {
 +    marqueurs[ville] = L.marker([villes[ville].lat,​ villes[ville].lon]).addTo(macarte);​
 +</​code>​
 +==== Les bulles d'​information ====
 +Une **bulle d'​information** peut être affichée quand on clique sur un marqueur :
 +<code javascript>​
 +// un popup avec du HTML qui est automatiquement ouvert
 +marqueurs["​Panazol"​].bindPopup("<​b>​Hello world!</​b><​br>​Je suis un popup."​).openPopup();​
 +// Préparer un contenu HTML avant de l'​associer à un popup
 +contenuHTML = "Vous êtes à Feytiat. ";
 +contenuHTML += " </​br>​Le site du lycée Valadon ";
 +contenuHTML +=  "<a href='​www.lyc-valadon.ac-limoges.fr'>​Lycée Suzanne Valadon</​a>";​
 +marqueurs["​Feytiat"​].bindPopup(contenuHTML);​
 +</​code>​
  
 +==== Le résultat avec Trinket.io ====
 +<​html>​
 +<iframe src="​https://​trinket.io/​embed/​html/​4a765107a7"​ width="​100%"​ height="​600"​ frameborder="​0"​ marginwidth="​0"​ marginheight="​0"​ allowfullscreen></​iframe>​
 +</​html>​
 +
 +===== Gérer les événements =====
 +Lors du clic de la souris il est possible de lancer l'​exécution d'une fonction. Lors du clic de la souris, un événement est généré. ​
 +  * **définition** de la **fonction** à exécuter :
 +<code javascript>​
 +// création d'une variable popup vide
 +var popup = L.popup();
 +function onMapClick(e) {
 +   // la variable e contient les informations sur l'​événement
 +   // positionner le popup au coordonnées du clic 
 +   ​popup.setLatLng(e.latlng)
 +   // définir le contenu du popup
 +   ​popup.setContent("​Vous avez cliqué sur la carte aux coordonnées " + e.latlng.toString())
 +   //​ouvrir le popup sur la carte
 +   ​popup.openOn(macarte);​
 +}
 +</​code>​
 +  * **faire exécuter** la fonction lors du **clic** sur la carte
 +<code javascript>​
 +// faire exécuter la fonction lors du clic sur la carte
 +macarte.on('​click',​ onMapClick);​
 +</​code>​
 +==== Le résultat avec Trinket.io ====
 +<​html>​
 +<iframe src="​https://​trinket.io/​embed/​html/​f2b8462e01"​ width="​100%"​ height="​600"​ frameborder="​0"​ marginwidth="​0"​ marginheight="​0"​ allowfullscreen></​iframe>​
 +</​html>​
 ==== Pour aller plus loin ==== ==== Pour aller plus loin ====
   * https://​nouvelle-techno.fr/​actualites/​2018/​05/​11/​pas-a-pas-inserer-une-carte-openstreetmap-sur-votre-site   * https://​nouvelle-techno.fr/​actualites/​2018/​05/​11/​pas-a-pas-inserer-une-carte-openstreetmap-sur-votre-site
   * https://​leafletjs.com/​examples/​quick-start/​   * https://​leafletjs.com/​examples/​quick-start/​
 +  * [[http://​www.openstreetmap.fr/​|Découvrir les activités du site OpenStreetMap France]]
  
 +
 +==== Activité Les langages pour créer des sites Web ... ====
 +<WRAP center round info >
 +  * [[isn:​langageweb|Les langages pour créer des sites Web]]
 +</​WRAP>​
isn/openstreetmap1.1549636478.txt.gz · Dernière modification: 2019/02/08 15:34 par techer.charles