Grâce à ce tutoriel, vous allez apprendre à créer une carte web interactive,
permettant d'afficher des données Geojson stockées au sein d'un fichier externe,
basée sur la librairie javascript opensource Leaflet .

Le what for du tuto... selon Impuls'Map !

Suivre ce tutoriel en vidéo


Problématique du jour

On souhaite mettre à disposition sur le web,
une application cartographique grand publique,
permettant de consulter des données représentant l’implantation des cinémas parisiens.

On dispose de deux couches de données aux formats shapefile :
– les cinémas → cinema.shp
– les arrondissements de Paris → arrondissement.shp

L’objectif est de créer une application de webmapping simple,
intégrable dans toute page web,
permettant la visualisation de l’implantation des cinémas et l’interrogation de leurs caractéristiques par un click sur la carte.


Les pré-requis

Ce tutoriel admet donc comme pré-requis :

la consultation de la documentation Leaflet

de disposer d’une connexion internet

la maîtrise des bases des langages HTML, CSS et Javascript.
Ce tutoriel n’a pas vocation à vous apprendre ces langages, mais à vous présenter les codes successifs à mettre en place pour réaliser cette cartographie.

disposer de deux couches aux formats shapefile, de type polygone et ponctuel.
Au sein de la carte web, ces données seront exploitées au format geojson.
Pour les convertir, nous utiliserons le logiciel SIG QGIS . QGIS est un logiciel SIG gratuit et opensource.


Les pré-requis

Les données exploitées au sein de ce tutoriel proviennent du site Paris Data qui met à disposition les données ouvertes de la Mairie de Paris.

Les deux couches de données exploitées sont :
Salles de cinémas à Paris
Téléchargeables ici
Arrondissement de Paris
Téléchargeables ici

Les données sont sous Licence Open Database License (ODbL)

Logo Paris Open Data

Suivre le tutoriel pas à pas…

Étape 1 : Structuration des fichiers

L’application Leaflet que nous allons créer est composée de fichiers stockés au sein d’un dossier :
« www »

Elle est composée de :
un fichier HTML appelé « index.html »
un dossier « style » qui contient le fichier « style.css » au sein duquel sont renseignés les paramétrages de mise en forme,
ainsi que l’image « Clap.png » qui servira d’icone pour représenter les cinémas dans la carte.
Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson
un fichier « mesFonctions.js » qui contient tous les paramétrages de la carte Leaflet
2 fichiers geojson : « arrondissement.geojson » et « cinema.geojson » qui contiennent les données à afficher dans la carte web.

On obtient donc l’architecture suivante :
www
index.html
mesFonctions.js
arrondissement.geojson
cinema.geojson
style
— — style.css
— — Clap.png

Étape 2 : Convertir les données shapefile en geojson

Lancer le logiciel SIG QGIS et ouvrir les 2 couches vectorielles « arrondissement.shp » et « cinema.shp »
Pour apprendre à afficher des données shapefile dans QGIS →  Lire le tutoriel Impuls’Map Afficher des données vectorielles dans QGIS

Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson

Pour chacune des 2 couches :
Dans le Panneau « Couches » → clic-droit sur la couche → « Enregistrer sous… »

Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson

Dans la Fenêtre « Enregistrer la couche vectorielle sous… »
FormatGeoJSON
Enregistrer sousURL du fichier
SRCEPSG 4326, WGS84 (attention Leaflet est en WGS84 !!)

Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson

Structure des couches « arrondissement » et « cinema » :

Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson
Impuls'Map - Tutoriel Créer une carte web Leaflet Geojson

Étape 3 : fichier index.html

<html>
<head>
<meta http-equiv=″Content-Type″ content=″text/html; charset=UTF-8 />

<!– appelle la librairie javascript Leaflet et le fichier CSS Leaflet –>
<link rel=stylesheet″ href=https://unpkg.com/leaflet@1.0.3/dist/leaflet.css″ />
<script type=text/javascript″ src=https://unpkg.com/leaflet@1.0.3/dist/leaflet.js″></script> 

<!– lien vers mon fichier CSS –>
<link rel=stylesheet″ href=style/style.css″ />

<!– jQuery – indispensable pour utiliser les fichiers geojson –>
<script src=https://code.jquery.com/jquery-3.1.1.min.js″></script>    

</head>
<body onload=initialize()″>
<!– DIV qui contient la carte –>
<div id=mapid″></div>

<!– fichier javascript externe qui paramètre le contenu de la carte Leaflet –>
<script src=mesFonctions.js″></script>
</body>
</html>

Etape 4 : fichier style.css

/* mise en forme du DIV */
#mapid{
height : 100%;
width : 100%;
}

/* mise en forme des popups de la carte Leaflet */
.leaflet-popup-tip,
.leaflet-popup-content-wrapper {
background : #7EBCB9;
color : #222327;
}

Étape 5 : fichier mesFonctions.js

function initialize() {

// création de la carte et paramétrage général : centre et niveau de zoom
var map = L.map(‘mapid’).setView([48.862162, 2.345818], 12);

// création d’une couche « osmLayer »
var osmLayer = L.tileLayer(‘http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png’, {
attribution: ‘© <a href= »http://osm.org/copyright »>OpenStreetMap</a> contributors’,
maxZoom: 19
});

// la couche « osmLayer » est ajoutée à la carte
map.addLayer(osmLayer);

// création d’une couche « watercolorLayer »
var watercolorLayer = L.tileLayer(‘http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg’, {
attribution: ‘© <a href= »http://osm.org/copyright »>OpenStreetMap</a> contributors’,
maxZoom: 19
  });

// la couche « watercolorLayer » est ajoutée à la carte
map.addLayer(watercolorLayer);

// création d’une couche geoJson qui appelle le fichier « arrondissement.geojson »
var arrondissement = $.getJSON(arrondissement.geojson″,function(dataArrondissement)
{L.geoJson( dataArrondissement,
{style: function(feature)
{    
// paramétrage de la symbologie de la couche « arrondissement »
return { color : ‘#046380’, weight : 1, fillColor : ‘#4BB5C1’, fillOpacity : .5 };
                                },
onEachFeature : function( feature, layer )
              {
// paramétrage de la popup de la couche « arrondissement »
layer.bindPopup( ‘<b><u>Description de l’arrondissement</u></b><br><b> Arrondissement n° </b>’ + feature.properties.c_ar )
                }
}).addTo(map);
});

// création d’une couche geoJson qui appelle le fichier « cinema.geojson »
var cinema= $.getJSON(cinema.geojson″,function(dataCinema)
// icone Clap
{var iconeCinema = L.icon({
iconUrl : ‘style/Clap.png’,
iconSize : [19, 21]
});
// fonction pointToLayer qui ajoute la couche « cinema » à la carte, selon la symbologie « iconeCinema », et paramètre la popup
L.geoJson(dataCinema,{
pointToLayer : function(feature,latlng){
var marker = L.marker(latlng,{icon: iconeCinema});
marker.bindPopup(‘<b><u>Description du cinéma</u></b><br>’
+ ‘<b>Nom : </b>+ feature.properties.nom_etabli + ‘<br>’
+ ‘<b>Nombre d’écrans : </b>’ + feature.properties.ecrans + ‘<br>’
+ ‘<b>Nombre de fauteuils : </b>’ + feature.properties.fauteuils + ‘<br>’
+ ‘<b>Arts et essais ? </b>’ + feature.properties.art_et_ess + ‘<br>’
+ ‘<b>Adresse : </b>’ + feature.properties.adresse + ‘<br>’
+ ‘<b>Arrondissement : </b>’ + feature.properties.arrondisse
);
return marker ;
}
}).addTo(map);
});

// création d’un contrôle des couches pour modifier les couches de fond de plan
var baseLayers = {
                                 ‘OpenStreetMap’ : osmLayer,
                                 ‘Watercolor’ : watercolorLayer
                                };
L.control.layers(baseLayers).addTo(map);
}

Étape 6 : la documentation Leaflet pour mieux comprendre le code

Methods for layers and control
addlayerhttp://leafletjs.com/reference-1.0.3.html#map-addlayer

TileLayer
L.tilelayerhttp://leafletjs.com/reference-1.0.3.html#tilelayer

Geojson
L.geJSONhttp://leafletjs.com/reference-1.0.3.html#geojson

Symbologie des couches
stroke, color, weight, fillColor, opacity, fillOpacity… http://leafletjs.com/reference-1.0.3.html#path

Icones des markers
L.icon http://leafletjs.com/reference-1.0.3.html#icon

Étape 8 : télécharger les fichiers de l'application de webmapping Leaflet dédiée aux cinémas parisiens

Pour télécharger les fichiers de cette application de webmapping « Les cinémas de Paris »,
développée grâce à la librairie opensource Leaflet,
et à partir de données SIG geojson externes,

cliquer ici

Firework

Ce tutoriel est terminé !!

Vous avez appris à créer une carte web interactive permettant d’afficher des données SIG de type geojson, au sein de fichiers externes, grâce à la librairie Javascript Leaflet

Ce tutoriel a été réalisé avec la librairie Javascript Leaflet et le logiciel SIG QGIS 2.14.9-Essen
Pour en savoir + …

leafletjs.com                 www.qgis.org

L’idée de la réalisation de ce tutoriel nous est venue suite à une formation webmapping réalisée auprès des étudiants Techniciens supérieurs SIG du GRETA d’Avallon (89) .

Vous aimeriez que nous traitions un sujet, une problématique qui pourrait vous aider ?
N’hésitez pas à nous contacter et à nous soumettre votre besoin. Si nous le pouvons, nous y répondrons !

Vous avez aimé ?
Alors dites-le avec des , des likes, des tweets, des shares et des commentaires … !
On vous gâte…
Toujours + de tutoriels Impuls’Map !!
Question Chat Impuls'Map Jointure Spatiale Multiple

[Question Chat] Réaliser une relation spatiale 1..n à partir de shapefile dans QGIS ?

| Bavargade cartographique | No Comments
Problématique posée et contexte : Notre SIGiste dispose de deux couches shapefile : une couche qui contient des polygones, une couche qui contient des points. Il existe une relation spatiale...

[Actu] Impuls’Map assiste le SMB dans la migration de son WebSIG vers Arcopole Pro

| Bavargade cartographique | No Comments
Le Syndicat Mixte du Beaujolais a acquis un webSIG chez GEOMAP-IMAGIS  il y a quelques années, initialement basé sur une solution exploitant : PostGIS + QGIS + Mapserver + Webville...

Créer une carte web interactive avec Leaflet et des données Geojson externes

| Bavargade cartographique, Tutoriels SIG | No Comments

Tutoriel video by Impuls’Map pour apprendre à créer une carte web interactive, à partir de la librairie javascript Leaflet et exploitant des données geojson stockées dans des fichiers externes

Tutoriel Impuls'Map - Trigger suivi mises à jour PostgreSQL PostGIS

Créer un trigger de suivi des mises à jour dans PostgreSQL et PostGIS

| Bavargade cartographique, Tutoriels SIG | No Comments

Grâce à ce tutoriel, vous allez apprendre à créer un trigger pour pouvoir enregistrer et suivre les mises à jour effectuées au sein d’une base de données PostgreSQL. Et comme Impuls’Map est dédié aux SIG, nous effectuerons ce tutoriel au sein d’une base de données détenant l’extension spatiale PostGIS et à partir de données à dimension géographique, exploitables dans un SIG.

Bienvenue sur le site d’Impuls’Map !

Fondatrice & CEO d'Impuls'Map Impuls'Map vous offre toute la puissance des SIG grâce à son équipe d'ingénieurs experts !
Besoin d'une prestation de Cartogérance, d'Ingénierie, de Conseil ou une Formation SIG ?
Contactez nous !

Booster votre SIG !

  • © 2016 Impuls'Map | Mentions légales | Crédits