GIS-Blog.fr

Faire du « Géogommette » avec Leaflet

Avant de commencer à faire du "Geogommette", je vous propose que l'on se penche rapidement sur le beau projet Leaflet :

 

Leaflet c'est quoi? Une libraire Javascript qui permet de créer des cartes interactives pour le web.

Sur quel fond de carte s'appuie Leaflet? La librairie s'appuie sur le projet collaboratif OpenStreetMap

La compatibilité de Leaflet? Leaflet est compatible avec les navigateurs traditionnels ainsi qu'avec les navigateurs qui équipent les tablettes et smartphones.

 

Maintenant que les présentations sont faites, je vais vous expliquer comment réaliser rapidement une carte similaire à celle qui se trouve sur la page "L'équipe GIS-Blog.fr" (Ou comment coller des marqueurs sur une carte!):

1. Ouvrir un éditeur de texte et enregistrer la page en html

2. Commencer par insérer les balises html (corps, en tête-tête) :

<!DOCTYPE html>
    <html>
         <head>
                <meta charset="utf-8" />
         </head>

         <body>

 

         </body>

    </html>

 

3. Ensuite enrichir le corps de la page html par ces quelques lignes pour définir la taille du cadre dans lequel sera affiché la carte et les liens vers la libraire Leaflet (dans le cas présent, le dossier contenant la librairie Leaflet se trouve dans le même répertoire que la page html) :

    <div id="map" style="width: 500px; height: 500px"> </div>

    <link rel="stylesheet" href="leaflet/dist/leaflet.css" />

    <script src="leaflet/dist/leaflet.js"></script>

    <script>

 

    </script>

 

4.Puis paramètrer le centre de la carte, le seuil de zoom et ajouter le fond de carte :

//Définir les coordonnées du centre de la carte et le seuil de zoom

var map = L.map('map').setView([43.665,7.193], 13);

 

// Ajouter le fond de carte

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

 

5.C'est la fin il ne reste plus qu'à ajouter les marqueurs (L.marker([43.673417,7.189811]).addTo(map)) et le texte que vous souhaitez afficher sur chacun de ces marqueurs ( .bindPopup("<b>Popup n°1</b>") ):

// Ajouter des markers

L.marker([43.673417,7.189811]).addTo(map) .bindPopup("<b>Popup n°1</b>");

L.marker([43.6596876,7.1952041]).addTo(map) .bindPopup("<b>Popup n°2</b>");

 

6.Voici le code dans sa globalité (20 lignes pour publier une carte…) :

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8" />
   </head>
   <body>
         <div id="map" style="width: 500px; height: 500px"> </div>
         <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
          <script src="leaflet/dist/leaflet.js"></script>
         <script>

 

         //Définir les coordonnées du centre de la carte et le seuil de zoom
         var map = L.map('map').setView([43.665,7.193], 13);

        // Ajouter le fond de carte

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

         // Ajouter des markers
        L.marker([43.673417,7.189811]).addTo(map) .bindPopup("<b>Popup n°1</b>");
        L.marker([43.6596876,7.1952041]).addTo(map) .bindPopup("<b>Popup n°2</b>");


        </script>
   </body>
</html>

 

7.Le résultat :

Nota : 

– Pour enrichir et améliorer cette carte, je vous invite à parcourir la documentation qui se trouve sur le site de l'API

– Pour trouver et changer le fond de carte, faites un tour sur le site de MapBox (exemple ci-dessous) ou bien sur : http://maps.stamen.com

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on TumblrEmail this to someone

Categories: Solutions techniques

QGIS 1.8 ou 2.0 et Mac OS X Mavericks » « FME sur Mac en 2014…

1 Comment

  1. Chapeau pour la clareté de vos messages et que dit du mot partage qui prend ici une hauteur pas souvent vue sur la toile en tout cas RESPECT et bien claire pour ces précisions qui m'ont été d'un grand secours pour le minuscule insecte que je suis ( Qui cherche toujours a remplire mon cerveau de bulot )

    Merci pour le geste

Laisser un commentaire

Your email address will not be published.

*

Copyright © 2017 GIS-Blog.fr

Theme by Anders NorenUp ↑