À faire vous-même 2.1

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js

var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
        

Comme vous pouvez le constater, il est possible de se "déplacer" sur la carte, de zoomer et de dézoomer.

---

Voici quelques informations sur ce code :

var map = L.map('map');
        

nous permet de créer un objet de type "map".

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
        

La variable "osmUrl" contient l'url qui nous permettra de récupérer les images qui constitueront le fond de notre carte. Je reviendrai un peu plus bas sur cette url.

La variable "osmAttrib" contient des informations sur la carte affichée

var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
        

Nous créons un objet de type "TileLayer" qui correspond aux images du fond de carte. La fonction "TileLayer" prend 2 paramètres :

• le premier paramètre correspond à l'url
• le second paramètre est un objet. Nous définissons ici un seul attribut, "attribution", qui permettra d'afficher la provenance de la carte.

map.setView([47.0, 3.0], 6);
        

Nous appliquons la méthode "setView" à l'objet "map". Cette méthode prend 2 paramètres :

• "[47.0, 3.0]" est un tableau, le premier élément correspond à la latitude du centre de la carte, le second élément correspond à la longitude du centre de la carte.
• "6" correspond au niveau du zoom, plus la valeur sera grande, plus le zoom sur la carte sera important.

map.addLayer(osm);
        

nous lions l'objet de type "TileLayer" à la carte que nous avons à la première ligne. Cela permet donc d'afficher le fond de carte.

Revenons maintenant sur l'url :

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
        

Openstreetmap d'après Wikipédia :

OpenStreetMap (OSM) est un projet qui a pour but de constituer une base de données géographiques libre du monde (permettant par exemple de créer des cartes sous licence libre), en utilisant le système GPS et d'autres données libres. Il a été initié en juillet 2004 par Steve Coast au University College de Londres. Par l'utilisation de moyens informatiques basés sur Internet qui permettent l'intervention et la collaboration de tout utilisateur volontaire, OpenStreetMap relève de la géomatique 2.0 et est aussi une contribution à ce qui est appelé la néogéographie, dont les outils composent le GeoWeb.

N'hésitez pas à visiter le site d'OpenStreetMap version française : http://openstreetmap.fr/

OpenStreetMap va donc nous fournir les cartes que nous allons utiliser avec Leaflet. L'url "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" nous permet de récupérer le fond de carte depuis les serveurs d'openStreetMap. Je ne rentrerai pas dans les détails de cette url, pour en savoir plus, je vous conseille de consulter ce site.