DEVELOPPEMENT WEB
CARTOGRAPHIE AVEC OPENSTREETMAP

Objectif

Après l'étude du HTML associé 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 :

  1. Recopier le code avec un éditeur de texte, NotePad++ ou Sublime Text.
  2. Enregistrer, dans votre dossier personnel, sous un nom suivi de l'extension .html.
  3. 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 :

VilleSystème sexagésimalSystème décimal
LatitudeLongitudeLatitudeLongitude
Lyon45° 45' 35" Nord4° 50' 32" Est45.759722222°4.842222222°
Bayonne43° 29' 37" Nord1° 28' 30" Ouest43.493611111°-1.475000000°

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

Travail demandé

  1. Rechercher, sur internet, les coordonnées géographiques de la ville de Dax, dans le système sexagésimal.
  2. Calculer la latitude et la longitude sous la forme de nombres décimaux en degrés (attention aux signes!).
  3. 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 :

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

Travail demandé

  1. 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
  2. Retrouver l'adresse web de la tuile.
  3. Ecrire cette adresse web dans la barre d'adresse d'un navigateur pour l'afficher.

Résultat

Dessiner une carte complète

  1. Quelles sont les dimensions d'une carte constituée de trois tuiles alignées horizontalement?
  2. 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é

  1. Afficher et placer sur la carte le point de coordonnées géographiques :
  2. A quoi correspond ce point?

Procédure :

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. Relativement volumineuses, elles nécessitent une connexion à Internet.

Pour tester la bibliothèque Leaflet :

<!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.7263479,-1.0452385],{color:'#ff0000',radius: 120}).addTo(map);
  </script>
</body>

</html>