GIS-Blog.fr

Webmapping – part1 : Ma première carte

Suite à l’article de juin 2013, faire du « Géogommette » avec Leaflet, nous allons voir ici comment créer une carte en ligne en utilisant Leaflet (une bibliothèque JavaScript open-source permettant de créer des webcartes interactives).

Dans cette série d’articles, nous allons utiliser du HTML, du CSS, et, ce qui nous intéresse le plus, du JavaScript (JS).

  • HTML : structuration du contenu de la page web. La carte dynamique sera à l’intérieur d’un élément du fichier HTML
  • CSS : permet de styliser la présentation visuelle de la page web
  • JS : permet d’obtenir une page web interactive. Avec cette librairie, nous pourrons nous déplacer avec la souris sur la carte, ajouter des données ou encore gérer l’interaction page web / utilisateur

De quoi avez-vous besoin ?

Un ordinateur
Un accès à internet
Un navigateur internet
Un éditeur de texte (Notepad++ pour Windows, Textedit, pour Mac, ou encore Sublime Text, multiplateforme)


Quelques indications avant de commencer :

Ce point a pour but de vous donner des indications concernant la structuration des fichiers lors de la création d’un site / d’une page web. Ce ne sont que des indications, libre à vous de les suivre, les adapter, les ignorer.

Organisation
Vous pouvez utiliser la racine de votre serveur en tant que conteneur principal ou avoir un dossier faisant office de conteneur (nous partons ici de ce principe).
Dans ce dossier mon_projet , vous devez créer votre fichier index.html servant d’entrée principale.

mon_projet
     > index.html

Le plus souvent, une page web est composée d’une structure au format html, d’un fichier de forme au format css, d’un fichier js permettant une page dynamique et d’images.
Certains fichiers sont spécifiques à une page, d’autres peuvent être généraux et s’intégrer à plusieurs pages. Pour éviter de s’y perdre il est possible de créer des fichiers permettant de regrouper l’ensemble de ces fichiers.
Le fichier assets contient les fichiers css et js (vous le retrouverez sous différents noms : assets / ressources / app. L’important étant de s’y retrouver!).
Le fichier image regroupe lui l’ensemble des images (à savoir qu’il est possible d’y faire des sous-dossiers pour chaque page du site).

mon_projet
assets
css
>js
>image
>index.html

Cette structuration permet d’avoir une organisation claire des fichiers, il est relativement facile de s’y retrouver dès lors que l’on dispose de plusieurs fichiers différents.
Le dossier css va contenir l’ensemble des fichiers au format css, il en va respectivement de même pour le dossier js.
De cette manière, les pages du site vont se référer directement les bons fichiers, sous réserve de les appeler de la bonne manière.

mon_projet
> assets
> css
> index.css
>js
> index.js
>image
>image1.png
>image1.jpeg
>index.html

Pour appeler les fichiers css et js, rien de plus facile, inssérer ces lignes dans la partie head dans votre fichier index.html.

<link rel="stylesheet" href="assets/css/index.css"/>
<link rel="stylesheet" href="assets/js/index.js"/>

Pour résumer
L’organisation des dossiers et fichiers peut être fastidieuse, cependant cette étape est importante afin de pouvoir s’y retrouver plus facilement par la suite. Je fournis ici un exemple générique et modifiable, il ne s’agit en aucun cas d’une règle ou d’une organisation commune à tous.
Il est important de garder en mémoire l’utilité des fichiers css et js :
css: permet de mettre en forme sa page web
js: permet d’obtenir une page web dynamique


Ma première carte :

Pour commencer, nous allons créer une simple visualisation à partir d’un fond de carte OpenStreetMap.
Le résultat doit s’approcher de cet exemple :

Fichiers Leaflet : css & js
L’utilisation de Leaflet nécessite de faire appel à des fichiers css et js dans le fichier html.
Dans les exemples suivants, nous allons appeler directement via internet les fichiers qu’ils nous faut. Pour cela, il va falloir insérer ce code dans la section <head> de la page html.

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

Ajout de l’élément Div et stylage
Leaflet a besoin d’un élément <div/> contenant la carte. Cet élément du <div> contient les informations relatives à la taille de la carte.
Créez un élément <div> avec l’id « map » en ajoutant ce qui suit :



<div id="map"></div>


Pour créer une carte de 960 pixels de largeur et 500 pixels de hauteur, ajoutez ce code dans le fichier css, ou entre balises <style> dans la section <head> de la page html :

#map { width: 960px; height: 500px; }

A partir de maintenant, les bases sont présentes pour créer la carte. Il ne manque juste que quelques lignes de JavaScript

Appeler le fond de carte OSM
Insérez le code suivant entre les balises <script> du fichier HTML :

<script> var map = L.map('map',{
  center: [45.7604276, 4.8335709],
  zoom: 13 });
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

Maintenant votre page HTML doit ressembler à ceci :

<!DOCTYPE html>
<html>
 <head>
  <title>Leaflet Web Map</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map {
      width: 960px;
      height:500px;}
  </style>
 </head>

 <body>
  <div id="map"></div>
  <script> var map = L.map('map',{
    center: [45.7604276, 4.8335709],
    zoom: 13 });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
 </body>
</html>

Pour résumer …
Nous avons créé une variable « map » puis nous avons assigné, via Leaflet, un objet « L.map » correspondant, dans l’élément Div.
De plus, nous avons ajouté une information sur la localisation du centre de la carte et le niveau de zoom de référence.
Maintenant la carte s’affiche, il est possible de la manipuler (déplacement / zoom).
Le fond de carte OSM est appelé via la fonction « L.tileLayer ». L’option « attribution » permet d’afficher les informations relatives au fond de carte.
D’autres fonds de carte peuvent être utilisés. Via ce site web, une liste de fonds de cartes non exhaustives

A suivre : Gestion des layers …

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

Categories: Solutions techniques

« QGIS – Récupérer des palettes de couleurs depuis ColourLovers.com

3 Comments

  1. Salut Arnaud !
    Je me permets d’ajouter un support de Boris Mericskay pour compléter ton post :
    https://www.academia.edu/31262418/Introduction_%C3%A0_Leaflet_cartographie_en_ligne_Javascript_

  2. Bonjour,

    je voulais vous féliciter pour ce très bon site!

    Avez-vous un avis ou une préférence entre l’utilisation des API OpenLayers et Leaflet en webmapping?

    Cordialement,

    FD
    http://geomatick.com

    • Bonjour,
      J’avoue ne pas avoir beaucoup utilisé Openlayers.
      Dans tout les cas, le fait qu’il s’agisse d’API open source est un plus des deux côtés.
      Pour avoir débuté très récemment dans la mise en ligne de carto web, je me suis rapidement dirigé vers Leaflet. Les sources de documentation étant, à mon sens, plus abondantes, que ce soit via des forums, ou Github (communauté plus large?).
      Etant débutant, Leaflet me semble assez « user friendly », en tout cas pour une utilisation « basique ». Concernant mes besoins, assez simples, Leaflet y répond très bien. A voir si dans le temps ce sera toujours le cas…
      Concernant Leaflet, si l’on souhaite intégrer des outils / plugins c’est quitte ou double en fonction des besoins. Il faut quelques fois mettre les mains dans le code pour modifier/adapter quelques variables (notamment concernant l’intégration de Leaflet avec des fonctions interactives (type pop-up) ou dès lors que l’on souhaite « sortir » du canevas standard de Leaflet. Sur ce point je ne peux dire à propos d’OpenLayer, ne l’ayant pas éprouvé suffisamment).
      Cordialement,
      Arnaud

Laisser un commentaire

Your email address will not be published.

*

Copyright © 2017 GIS-Blog.fr

Theme by Anders NorenUp ↑