Leaflet – Notre première carte (2)

Coucou les amis, on continue notre série sur Leaflet 🙂
Commençons sans plus attendre par afficher une carte avec Leaflet et OSM.

La structure de base

Pour cela, la première étape sera d’ajouter la bibliothèque Leaflet dans votre page web en y ajoutant la balise suivante :

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

Il faudra aussi ajouter un peu de CSS spécifique via la balise <link> suivante à mettre dans le <head> de votre page :

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

Vous avez sûrement remarqué qu’un numéro de version est présent dans le lien. Je vous invite à vérifier que vous utilisez bien la dernière version de Leaflet en allant sur leur page “Downloads”.

Une fois que ces deux éléments sont prêts, il ne reste plus qu’à rajouter une balise <div> dans votre page. Cette dernière servira évidemment à accueillir la carte. Afin de la retrouver facilement, on lui donne un id reconnaissable comme #macarte.

<div id="macarte"></div>

Si vous avez bien tout suivi, vous obtenez un squelette ressemblant au suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <!--
            Inclusion de la bibliothèque Leaflet et sa feuille de style.
            L'include du js pourrait aussi être fait à la fin du <body>
        -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

        <!-- Une feuille de style éventuelle -->
        <link rel="stylesheet" href="style.css">

        <title>Leaflet – Notre première carte (2)</title>
    </head>
    <body>
        <!-- Le conteneur de notre carte (avec une contrainte CSS pour la taille) -->
        <div id="macarte" style="width:545px; height:490px"></div>
    </body>
</html>

Bon, c’est pas mal, mais ça n’affiche rien ! Passons à la vitesse supérieure.

Afficher la carte

Maintenant que tout est prêt, on va enfin pouvoir afficher des données, et observer notre première carte s’afficher.

Pour cela, on va rajouter un bloc script à la fin de notre page, avant la balise </body>. Ce morceau de script va se charger de faire le lien entre la balise <div id="macarte"> créée plus tôt et le javascript qui effectue nos actions.

On commence donc par créer une variable carte qui va contenir un objet map de la bibliothèque Leaflet.

var carte = L.map('macarte').setView([46.3630104, 2.9846608], 6);

Vous aurez remarqué que pour s’initialiser cet objet à besoin de connaitre l’id du div qui contiendra la carte. J’en ai aussi profité pour centrer la carte sur la France pour avoir un point de départ autre que (0,0) (le dernier élément est le zoom).

Maintenant qu’on a un moteur de carte de prêt, on va lui rajouter un fond de carte OSM.

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(carte);

Que voit-on ici ? En fait c’est assez simple. La première partie désigne le fournisseur de cartes et place des marqueurs de templates dans son adresse. Ensuite, on ajoute ce fournisseur de carte à notre variable carte créée juste avant. Et c’est tout !

Sans rentrer dans les détails, les marqueurs de template servent à décrire quel est le format de l’adresse à utiliser pour charger une tuile particulière. Ainsi, les infos zxy servent à décrire respectivement le niveau de zoom voulu ainsi que par exemple, la position en x et y voulue.

Et Hop, tout est bon, la carte s’affiche “nickel” . Si tu as une erreur, veuille commenter et je t’aiderai très rapidement.
On se retrouve après pour la suite de la série, n’hésite pas à partager l’article avec tes amis.

About Author

Arnold KOUYA

Commenter...

Résoudre : *
10 − 8 =