Live Coding : OpenStreetMap, Polygones et GeoJSON

2 novembre 2019 - : Javascript Tutoriel Live-Coding - : 0 commentaire - : 153 - Tutoriel Javascript Ajax Openstreetmap Live-Coding

Cet article est lié au live coding de ce jour visible ci-dessous.

Il est fortement conseillé de lire le tutoriel Pas à pas – Insérer une carte OpenStreetMap sur votre site avant de se lancer dans celui-ci.

Pous simplifier la lecture, nous allons écrire tout le code dans un seul et unique fichier, il est cependant conseillé de séparer le HTML, le CSS et je Javascript en production.

Notre fichier "index.html" de départ est le suivant

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>OpenStreetMap</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
        <!-- CSS -->
        <style>
            #maCarte{
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="maCarte"></div>

        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
        <script>
            // On initialise la carte
            var carte = L.map('maCarte').setView([48.852969, 2.349903], 13);
            
            // On charge les "tuiles"
            L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
                // Il est toujours bien de laisser le lien vers la source des données
                attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
                minZoom: 1,
                maxZoom: 20
            }).addTo(carte);
        </script>
    </body>
</html>

Il initialise la carte et l'affiche, c'est tout.

Créer un cercle

Avec OpenStreetMap, il est possible de créer des cercles et de les manipuler simplement. Il faut avant tout définir son centre (latitude et longitude) ainsi que son rayon en mètres.

Nous utiliserons ensuite la méthode "circle" de Leaflet pour dessiner ce cercle.

// Nous créons un cercle aux coordonnées 48.852969, 2.349903, le colorons en rouge et lui donnons un rayon de 5000 mètres
let cercle = L.circle([48.852969, 2.349903], {
    color: 'red',
    fillColor: 'red',
    fillOpacity: 0.5,
    radius: 5000
}).addTo(carte);

Ce cercle doit apparaître sur Paris.

Si nous voulons ajouter une bulle d'information, il suffit d'utiliser la méthode "bindPopup"

cercle.bindPopup("Ville de Paris");

Créer des polygones

Un polygone est une figure géométrique à 3 côtés ou plus.

Pour créer un polygone avec Leaflet, nous allons devoir le décomposer en coordonnées latitude et longitude pour chacun de ses angles, puis les insérer dans la méthode "polygon" de Leaflet.

Prenons l'exemple d'un triangle sur Paris, nous écrirons ceci

let triangle = L.polygon([
    [48.85779, 2.3392724],
    [48.852630, 2.3523187],
    [48.86, 2.35223293],
], {
    color: 'green',
    fillColor: 'green',
    fillOpacity: 0.5
}).addTo(carte);
triangle.bindPopup("Triangle sur Paris");

Il s'agit d'un triangle en raison des 3 paires de coordonnées. Si vous ajoutez une quatrième paire de coordonnées, vous obtiendrez un quadrilatère, et ainsi de suite.

Voici le code pour délimiter l'Ile de la Cité à Paris

let polygon = L.polygon([
    [48.85779759188263, 2.339272499084472],
    [48.85703523304221, 2.3406243324279785],
    [48.85663993129474, 2.3412251472473145],
    [48.85505869308853, 2.342963218688965],
    [48.85497398248938, 2.3431777954101562],
    [48.854268055255545, 2.3447656631469727],
    [48.853646831055556, 2.3463964462280273],
    [48.852940885107614, 2.3480701446533203],
    [48.852220809985745, 2.3499369621276855],
    [48.85159956038226, 2.3526835441589355],
    [48.85206549830757, 2.3524260520935054],
    [48.852630265737005, 2.35231876373291],
    [48.853251502551096, 2.3522329330444336],
    [48.85394332538533, 2.351932525634765],
    [48.854536308777014, 2.3514175415039062],
    [48.85511516674166, 2.35032320022583],
    [48.85570813625314, 2.3483705520629883],
    [48.856244626425635, 2.3465466499328613],
    [48.85671052112145, 2.345151901245117],
    [48.85689405420504, 2.3442506790161133],
    [48.85703523304221, 2.343113422393799],
    [48.85727523615161, 2.3412466049194336],
    [48.85779759188263, 2.339272499084472],
]).addTo(carte);
polygon.bindPopup("Ile de la cité");

Les données GeoJSON

Grâce aux polygones, nous pouvons délimiter les contours de toute forme géométrique. En allant plus loin, nous pouvons délimiter des villes, départements, régions, pays ou tout autre zone géographique.

C'est ici qu'interviennent les données GeoJSON, qui sont des ensembles de points géographiques qui délimitent une zone donnée.

Vous pouvez imaginer que le nombre de points est important, je vous invite à regarder l'exemple sur le Git.

Nous allons, dans cet exemple, charger le fichier GeoJSON du département de l'Yonne en Ajax, puis utiliser la méthode "geoJSON" de Leaflet qui nous permettra de dessiner les contours.

let xmlhttp = new XMLHttpRequest();

// Sur changement de statut
xmlhttp.onreadystatechange = () => {
    // Si la transaction est terminée
    if (xmlhttp.readyState == 4){
        // Si la transaction est un succès
        if(xmlhttp.status == 200) {
            // On traite le json reçu
            let geojson = JSON.parse(xmlhttp.responseText)

            // On dessine le polygone
            let geojsonLayer = L.geoJSON(geojson, {
                style: {
                    "color": "#839c49",
                    "opacity": 1,
                    "weight": 1,
                    "fillColor": "#839c49",
                    "fillOpacity": 0.5
                }
            });
            // On ajoute une popup
            geojsonLayer.bindPopup("Département 89");

            // On ajoute à la carte
            geojsonLayer.addTo(carte);

        } else {
            console.log(req.status);
        }
    }
}

// On ouvre la connexion vers le fichier geojson
xmlhttp.open('GET', 'departement-89.geojson', true);

// On envoie la requête
xmlhttp.send(null);

Et voilà, il suffit de répéter l'opération pour les différentes zones.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire