DEVELOPPEMENT WEB
CARTOGRAPHIE AVEC OPENSTREETMAP

Introduction

Il s'agit ici d'étudier le fonctionnement d'OpenStreetMap, de créer des cartes et, éventuellement, de dessiner dessus.

Expérimenter

Carte seule

Tester et étudier le code ci-dessous. Comme à votre habitude :

Recopier le code avec l'éditeur de texte Notepad++.
Enregistrer, dans votre dossier personnel, sous un nom suivi de l'extension .html.
Tester le programme avec un navigateur.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <svg width="768" height="512">
    <image xlink:href="http://tile.openstreetmap.org/4/7/4.png" x="0" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/8/4.png" x="256" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/9/4.png" x="512" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/7/5.png" x="0" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/4/8/5.png" x="256" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/4/9/5.png" x="512" y="256"/>
  </svg>
</body>

</html>

Carte complétée de dessins

Tester et étudier le code ci-dessous :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <svg width="768" height="512">
    <!-- Carte -->
    <image xlink:href="http://tile.openstreetmap.org/4/7/4.png" x="0" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/8/4.png" x="256" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/9/4.png" x="512" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/4/7/5.png" x="0" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/4/8/5.png" x="256" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/4/9/5.png" x="512" y="256"/>
    <!-- Dessins sur le carte -->
    <circle cx="285" cy="420" r="15" fill="#c35"/>
    <polyline points="20,400 248,468 20,350" fill="#2d4"/>
    <text x="260" y="470" font-size="30" fill="#fa4">Ici!</text>
  </svg>
</body>

</html>

Résultat

Programmer

Trouver la latitude et la longitude

Les coordonnées géographiques s’expriment avec la latitude et la longitude. Exemples :

Ville	Système sexagésimal		Système décimal
Ville	Latitude	Longitude	Latitude	Longitude
Lyon	45° 45' 35" Nord	4° 50' 32" Est	45.759722222°	4.842222222°
Bayonne	43° 29' 37" Nord	1° 28' 30" Ouest	43.493611111°	-1.475000000°

La latitude ou la longitude peut s'écrire avec un nombre décimal en degrés, positif ou négatif :

Soixante secondes font une minute, soixante minutes font un degré : 1° = 60' = 3600"
La latitude est positive au Nord de l'équateur et négative au Sud.
La longitude est positive à l'Est du méridien de Greenwich et négative à l'Ouest.

Travail demandé

Rechercher, sur internet, les coordonnées géographiques de la ville de Dax.
Calculer la latitude et la longitude sous la forme de nombres décimaux en degrés (attention aux signes!).
Vérifier vos calculs avec le programme : dec_sexag.html

Identifier une tuile

Une carte issue du projet OpenStreetMap se construit en assemblant des morceaux de carte juxtaposés. Chaque morceau de carte est une image :

Au format png.
De dimensions 256x256 pixels.
Nommée tuile, pavé ou carreau.

Une tuile se retrouve à l'adresse web : http://tile.openstreetmap.org/z/x/y.png

z : Valeur du zoom, nombre entier allant de 0 à 18.
x : Partie entière de la valeur calculée avec la formule ci-dessous, lon étant la longitude en degrés.
x = lon + 180360 ⋅ 2 ^z
y : Partie entière de la valeur calculée avec la formule ci-dessous, lat étant la latitude en degrés.
y =1 – ln tanlat ⋅ π180 + 1coslat ⋅ π180 π

⋅ 2 ^z-1

Travail demandé

Déterminer x et de y pour la ville de Dax et un zoom de 9. Le calcul de y étant laborieux, utiliser le programme : OSM_tuiles.html
Retrouver l'adresse web de la tuile.
Ecrire cette adresse web dans la barre d'adresse d'un navigateur pour l'afficher.

Résultat

Dessiner une carte complète

Quelles sont les dimensions d'une carte constituée de trois tuiles alignées horizontalement?
Compléter le code ci-dessous pour afficher une carte de trois tuiles, la tuile centrale montrant l'emplacement de Dax.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <svg width="..." height="...">
    <image xlink:href="..." x="..." y="..."/>
    <image xlink:href="..." x="..." y="..."/>
    <image xlink:href="..." x="..." y="..."/>
  </svg>
</body>

</html>

Résultat

Pour aller plus loin

Dessiner en un lieu précis

Il s'agit de dessiner un petit cercle à un endroit précis de la carte, selon ses coordonnées géographiques. On propose la carte :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <svg width="768" height="512">
    <!-- Carte -->
    <image xlink:href="http://tile.openstreetmap.org/13/4071/2986.png" x="0" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/13/4072/2986.png" x="256" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/13/4073/2986.png" x="512" y="0"/>
    <image xlink:href="http://tile.openstreetmap.org/13/4071/2987.png" x="0" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/13/4072/2987.png" x="256" y="256"/>
    <image xlink:href="http://tile.openstreetmap.org/13/4073/2987.png" x="512" y="256"/>
    <!-- Point sur la carte -->
    <circle cx="200" cy="100" r="8" fill="#c35"/>
  </svg>
</body>

</html>

Procédure :

Le cercle se positionne avec ses coordonnées cx et cy en pixels, en partant d'en haut à gauche.
Les parties entières de x et y, pour la première tuile, ont pour valeurs 4071 et 2986.
Une tuile mesurant 256×256 pixels, les attributs cx et cy se calculent avec les relations ci-dessous, en prenant les valeurs arrondies aux entiers les plus proches.
- cx = (x-4071)×256
- cy = (y-2986)×256

Travail demandé

Afficher et placer sur la carte le point de coordonnées géographiques :
- 43° 43' 34" nord
- 1° 2' 42" ouest
A quoi correspond ce point?

Utiliser une bibliothèque

De nombreuses bibliothèques en JavaScript et CSS permettent d'afficher et de compléter des cartes pour des sites Web. Google Maps API, OpenLayers, PolyMaps ou OpenMapTiles en sont quelques exemples.

Pour tester la bibliothèque Leaflet :

Créer le fichier index.html contenant le code ci-dessous.
Sur le site https://leafletjs.com/download.html, cliquer sur le lien Leaflet 1.8.0 pour télécharger l'archive leaflet.zip.
Décompresser cette archive pour en extraire les fichiers leaflet.css et leaflet.js.
Placer les fichiers index.html, leaflet.css et leaflet.js dans un même dossier puis tester avec un navigateur.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="leaflet.css">
  <script src="leaflet.js"></script>
  <style>
    #map { height: 500px; }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = L.map('map').setView([43.7,-1],10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  </script>
</body>

</html>

DEVELOPPEMENT WEBCARTOGRAPHIE AVEC OPENSTREETMAP

Introduction

Expérimenter

Carte seule

Carte complétée de dessins

Résultat

Programmer

Trouver la latitude et la longitude

Travail demandé

Identifier une tuile

Travail demandé

Résultat

Dessiner une carte complète

Résultat

Pour aller plus loin

Dessiner en un lieu précis

Travail demandé

Utiliser une bibliothèque

DEVELOPPEMENT WEB
CARTOGRAPHIE AVEC OPENSTREETMAP