« Leaflet » : différence entre les versions
Aller à la navigation
Aller à la recherche
| Ligne 25 : | Ligne 25 : | ||
</source> | </source> | ||
===Insertion de la carte=== | ====Insertion de la carte==== | ||
Pour insérer la carte à l'endroit souhaité, utilisez le code suivant: | Pour insérer la carte à l'endroit souhaité, utilisez le code suivant: | ||
<source lang="HTML"> | <source lang="HTML"> | ||
| Ligne 31 : | Ligne 31 : | ||
</source> | </source> | ||
===Taille de la carte=== | ====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. | 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"> | <source lang="CSS"> | ||
#mapid { height: 180px; } | #mapid { height: 180px; } | ||
</source> | </source> | ||
===Paramétrage de la carte=== | |||
==Source== | ==Source== | ||
* [https://leafletjs.com/ Leaflet] | * [https://leafletjs.com/ Leaflet] | ||
[[Catégorie:JavaScript]] | [[Catégorie:JavaScript]] | ||
Version du 25 janvier 2020 à 21:21
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
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; }