Live Coding : OpenStreetMap - Polygones et GeoJSON

Temps de lecture : 15 minutes environ.

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 au serveur Discord pour une entraide par chat

Live Coding : OpenStreetMap - Polygones et GeoJSON
Article publié le - Modifié le

Catégories : Javascript Tutoriel Live-Coding osm

Mots-clés : Tutoriel Javascript Ajax Openstreetmap Live-Coding livecoding osm

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn