DEVELOPPEMENT WEB
CARTOGRAPHIE AVEC OPENSTREETMAP

Objectif

Après l'étude du HTML associé au CSS et au JavaScript vient celle du HTML complété par le SVG. Le SVG est un langage vectoriel permettant de dessiner des cercles, des polygones, en somme des figures géométriques.

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

Comprendre

Carte seule

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

Recopier le code avec un éditeur de texte, NotePad++ ou Sublime Text.
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="#c03050"/>
    <polyline points="20,400 248,468 20,350" fill="#20d040"/>
    <text x="260" y="470" font-size="30" fill="#f0a040">Ici!</text>
  </svg>
</body>

</html>

Résultat

Pratiquer

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.7597°	4.8422°
Bayonne	43° 29' 37" nord	1° 28' 30" ouest	43.4936°	-1.4750°

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.
Dans le cas de coordonnées dans le système sexagésimal, calculer la latitude et la longitude en notation décimale (attention aux signes!).
Utiliser 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 = [div]lon + 180[sur]360[/div] ⋅ 2 ^z
y : Partie entière de la valeur calculée avec la formule ci-dessous, lat étant la latitude en degrés.
y =[par]1 – [div]ln[par] tan[par]lat ⋅ [div]π[sur]180[/div][/par] + [div]1[sur]cos[par]lat ⋅ [div]π[sur]180[/div][/par][/div] [/par][sur]π

[/div][/par] ⋅ 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 en pixels 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

Approfondir

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-opacity=0.2 stroke="#ff0000" stroke-width="3"/>
  </svg>
</body>

</html>

Travail demandé

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

Procédure :

Ecrire les coordonnées géographiques sous la forme décimale.
Identifier, dans le code ci-dessus, le zoom utilisé.
En déduire les valeurs de x et y à l'aide de l'application en ligne.
Calculer les valeurs de cx et cy à l'aide des relations :
- cx = (x-4071)×256
- cy = (y-2986)×256
Modifier la ligne 18 du programme en prenant, pour cx et cy, les valeurs arrondies aux entiers les plus proches.

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.9.4 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 {
      width: 800px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = L.map('map').setView([43.73,-1.05],13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    L.circle([43.7267,-1.0425],{color:'#ff0000',radius: 120}).addTo(map);
  </script>
</body>

</html>

DEVELOPPEMENT WEBCARTOGRAPHIE AVEC OPENSTREETMAP

Objectif

Comprendre

Carte seule

Carte complétée de dessins

Résultat

Pratiquer

Trouver la latitude et la longitude

Travail demandé

Identifier une tuile

Travail demandé

Résultat

Dessiner une carte complète

Résultat

Approfondir

Dessiner en un lieu précis

Travail demandé

Procédure :

Utiliser une bibliothèque

DEVELOPPEMENT WEB
CARTOGRAPHIE AVEC OPENSTREETMAP