« Leaflet » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{ En construction }} ==Leaflet=== Leaflet est une bibliothèque JavaScript open source permettant d'ajouter des cartes interactives adaptées aux mobiles. ==Source== *... »)
 
mAucun résumé des modifications
 
(8 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{ En construction }}  
{{Ebauche}}  


==Leaflet===
==Leaflet==
Leaflet est une bibliothèque JavaScript open source permettant d'ajouter des cartes interactives adaptées aux mobiles.
Leaflet est une bibliothèque JavaScript open source permettant d'ajouter des cartes interactives adaptées aux mobiles.
==Version==
La version actuelle de Leaflet est la 1.6.0 du 17 novembre 2019.
==Installation==
Avant de coder la carte à proprement parler, il est nécessaire de préparer sa page HTML comme suit:
===Préparation de la page===
* Inclure le fichier CSS Leaflet dans la balise <head> du document
<source lang="CSS">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
</source>
* Inclure le fichier [[JavaScript]] Leaflet après le fichier CSS Leaflet
<source lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
</source>
====Insertion de la carte====
Pour insérer la carte à l'endroit souhaité, utilisez le code suivant:
<source lang="HTML">
<div id="mapid"></div>
</source>
====Taille de la carte====
Pour s'assurer que le contenant de la carte ait une hauteur définie, entrez ce code en le saisissant dans le CSS par exemple.
<source lang="CSS">
#mapid { height: 180px; }
</source>
===Paramétrage de la carte===
Pour créer une carte, il est nécessaire de définir ses coordonnées géographiques et un niveau de zoom. La carte utilise [[Mapbox Streets]].
<source lang="JavaScript">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</source>
Les coordonnées dans l'exemple correspondent au centre de Londres.
Par défaut, toutes les interactions avec la souris et le clic sur la carte sont activées. Un contrôle du niveau zoom est présent d'office, sans avoir besoin d'effectuer d'autres paramétrages.
====Mapbox Streets====
La création de tuiles implique généralement la définition du modèle d'URL pour les images, le texte d'attribution et le niveau de zoom maximal de la couche. Dans cet exemple, mapbox/streets-v11tuiles de l'[https://docs.mapbox.com/api/maps/#static-tiles API Static Tiles] de Mapbox est utilisé.
Note: pour pouvoir utiliser Mapbox, il faut demander un [https://account.mapbox.com/access-tokens/ jeton d'accès Mapbox].
<source lang="JavaScript">
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/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
</source>
Remarque: tout le code doit figurer après le < div > et <leaflet.js>.


==Source==
==Source==
* [https://leafletjs.com/ Leaflet]
* [https://leafletjs.com/ Leaflet]
* [https://docs.mapbox.com/api/maps/#static-tiles API Static Tiles]
* [https://account.mapbox.com/access-tokens/ Access tokens Mapbox]
[[Catégorie:JavaScript]]

Dernière version du 3 avril 2020 à 22:44

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Leaflet

Leaflet est une bibliothèque JavaScript open source permettant d'ajouter des cartes interactives adaptées aux mobiles.

Version

La version actuelle de Leaflet est la 1.6.0 du 17 novembre 2019.

Installation

Avant de coder la carte à proprement parler, il est nécessaire de préparer sa page HTML comme suit:

Préparation de la page

  • Inclure le fichier CSS Leaflet dans la balise <head> du document
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
  • Inclure le fichier JavaScript Leaflet après le fichier CSS Leaflet
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

Insertion de la carte

Pour insérer la carte à l'endroit souhaité, utilisez le code suivant: 

<div id="mapid"></div>

Taille de la carte

Pour s'assurer que le contenant de la carte ait une hauteur définie, entrez ce code en le saisissant dans le CSS par exemple. 

#mapid { height: 180px; }

Paramétrage de la carte

Pour créer une carte, il est nécessaire de définir ses coordonnées géographiques et un niveau de zoom. La carte utilise Mapbox Streets. 

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

Les coordonnées dans l'exemple correspondent au centre de Londres.

Par défaut, toutes les interactions avec la souris et le clic sur la carte sont activées. Un contrôle du niveau zoom est présent d'office, sans avoir besoin d'effectuer d'autres paramétrages.

Mapbox Streets

La création de tuiles implique généralement la définition du modèle d'URL pour les images, le texte d'attribution et le niveau de zoom maximal de la couche. Dans cet exemple, mapbox/streets-v11tuiles de l'API Static Tiles de Mapbox est utilisé.

Note: pour pouvoir utiliser Mapbox, il faut demander un jeton d'accès Mapbox. 

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/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Remarque: tout le code doit figurer après le < div > et <leaflet.js>.

Source

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Leaflet&oldid=128473 »