OpenStreetmap : Créer des itinéraires

Par Nouvelle-Techno.fr le 15 janvier 2020 - Catégories : Javascript Tutoriel

Lire l'article sur le site d'origine

Les outils de cartographie permettent de faire de nombreuses choses parmi lesquels le calcul d'itinéraires.

OpenStreetMap ne déroge pas à la règle et fournit un outil assez complet permettant de calculer différents types d'itinéraires et de les afficher.

ATTENTION : depuis le 6 avril 2020 cette méthode ne fonctionne plus avec Leaflet Routing Machine (https://github.com/perliedman/leaflet-routing-machine)

Bien sûr, comme pour les autres fonctionnalités d'OpenStreetMap, nous allons devoir faire appel à des bibliothèques tierces pour parvenir à nos fins.

Ces bibliothèques permettront, entre autres options :

Nous allons, dans cet article, traiter les bases de la création et l'affichage d'un itinéraire en utilisant ces bibliothèques.

Le résultat attendu sera similaire à ceci

Les bibliothèques

LeafletJS

La première bibliothèque utilisée dans ce tutoriel sera LeafletJS, qui nous permettra d'afficher une carte OpenStreetMap dans notre page. Elle nous fournira donc une carte qui sera le support de notre itinéraire.

Nominatim

Nominatim est une bibliothèque qui permet de faire du Geocoding, et donc de "traduire" des adresses en coordonnées GPS et inversement.

Pour pouvoir l'utiliser sur la première partie, nous aurons besoin de l'installer sur notre site au moyen de la bibliothèque "Leaflet Control Geocoder"

Leaflet Routing Machine

Enfin, nous utiliserons la bibliothèque Leaflet Routing Machine, qui permettra d'effectuer le calcul d'itinéraires.

Gestion des itinéraires

Avec ces bibliothèque, il est possible de mettre en place facilement un outil de calcul d'itinéraires, étant donné qu'elles ont été prévues pour "travailler ensemble".

Initialiser la carte

Pour mettre en place notre carte, nous allons l'initialiser. Nous avons déjà traité ces parties dans l'article "Pas à pas – Insérer une carte OpenStreetMap sur votre site".

Vvoici le code html nécessaire pour initialiser cette carte

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- Fichiers CSS -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="carte"></div>

        <!-- Fichiers JS -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
        <script src="js/scripts.js"></script>
    </body>
</html>

Nous intégrons donc le CSS et le Javascript de LeafletJS dans notre page, et réservons une balise "div" pour la carte.

Dans le CSS, nous nous assurons que notre carte aura une hauteur non nulle

#carte{
    height: 80vh;
}

Enfin, nous allons initialiser la carte en Javascript

// On s'assure que la page est chargée
window.onload = function(){
    // On initialise la carte sur les coordonnées GPS de Paris
    let macarte = L.map('carte').setView([48.852969, 2.349903], 13)

    // On charge les tuiles depuis un serveur au choix, ici OpenStreetMap France
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
        attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
        minZoom: 1,
        maxZoom: 20
    }).addTo(macarte)

}

Mettre en place la gestion d'itinéraires

Après avoir initialisé la carte, nous allons mettre en place les bibliothèques permettant de gérer les itinéraires.

Il nous faut tout d'abord déclarer le CSS et le javascript de ces bibliothèques.

<!-- Fichiers CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

<!-- Ces deux balises link sont à insérer entre les deux balises existantes -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />

<link rel="stylesheet" href="css/styles.css">
<!-- Fichiers JS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<!-- Ces deux balises script sont à insérer entre les deux balises existantes -->
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

<script src="js/scripts.js"></script>

Une fois les bibliothèques chargées, nous pouvons les utiliser.

Le géodoceur est directement utilisé par la bibliothèque "Leaflet Routing Machine", ce qui permet de simplifier le code.

// Cette méthode est à insérer juste après avoir initialisé la carte
L.Routing.control({
    geocoder: L.Control.Geocoder.nominatim()
}).addTo(macarte)

Nous pouvons ensuite ajouter des options pour personnaliser les intéractions

L.Routing.control({
    // Nous personnalisons le tracé
    lineOptions: {
        styles: [{color: '#ff8f00', opacity: 1, weight: 7}]
    },

    // Nous personnalisons la langue et le moyen de transport
    router: new L.Routing.osrmv1({
        language: 'fr',
        profile: 'car', // car, bike, foot
    }),

    geocoder: L.Control.Geocoder.nominatim()
}).addTo(macarte)

Voilà pour les bases. Si vous souhaitez aller plus loin, les tutoriels officlels de Leaflet Routing Machine peuvent vous y aider.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

#Tutoriel #Javascript #Openstreetmap