Le geoJSON est un format (http://geojson.org/) qui permet d'encoder des données à "caractère géographiques". Voici ce que dit Wikipédia à propos de ce format :
GeoJSON (de l'anglais Geographic JSON, signifiant littéralement JSON géographique) est un format ouvert d'encodage d'ensemble de données géospatiales simples utilisant la norme JSON (JavaScript Object Notation). Il permet de décrire des données de type point, ligne, chaîne de caractères, polygone, ainsi que des ensembles et sous-ensembles de ces types de données et d'y ajouter des attributs d'information qui ne sont pas spatiale. Le format GeoJSON, contrairement à la majorité des standards de systèmes d'informations géographiques, n'est pas écrit par l'Open Geospatial Consortium, mais par un groupe de travail de développeurs au travers d'internet.
Comme indiqué dans Wikipédia, le geoJSON est avant tout du JSON et nous le traiterons comme tel.
Dans la barre d'adresse de votre navigateur, tapez l'adresse suivante :
http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson
Vous devriez obtenir quelque chose ressemblant à ceci :
Le site "earthquake.usgs.gov", comme le site "http://openweathermap.org/", propose une API qui renvoie des données à partir d'une simple url. Le site "earthquake.usgs.gov" renvoie des données au format geoJSON (c'est donc du JSON), ces données contiennent des informations sur les tremblements de terre détectés dans le monde sur une période de 30 jours. Le site vous propose différentes options pour la requête, vous trouverez une description complète de ces options ici
En vous aidant de la documentation présente sur le site http://earthquake.usgs.gov, écrivez une requête sous forme d'url qui permettra d'obtenir des données (au format geoJSON) sur les tremblements de terre, d'une magnitude supérieure à 5, ayant eu lieu ces 30 derniers jours partout dans le monde.
Testez votre requête en la copiant dans la barre d'adresse de votre navigateur. Une fois les données obtenues, étudiez-les afin de comprendre la structure de ces données.
Il est possible d'utiliser la bibliothèque Leaflet afin d'afficher une carte sur votre page web. Si vous ne connaissez pas encore leaflet, je vous invite à suivre cette série d'activités.
Crée un nouvel exemple en modifiant les fichiers index.html, style.css et script.js comme suit :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script src="script.js"></script>
</html>
style.css
#map {
width: 800px;
height: 600px;
}
script.js
var map;
function setup(){
noCanvas();
map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
}
function draw(){
}
Vous devriez obtenir ceci :
En vous aidant de ce que vous avez vu sur leaflet et sur les données renvoyées par le site http://earthquake.usgs.gov, créez une page web qui affichera une carte des séismes d'une magnitude supérieure ou égale à 6 (sur les 30 derniers jours). Chaque séisme sera représenté par un "marker". Un "pop-up" affichant les informations suivantes : lieu, date et heure du séisme et sa magnitude, devra être associé à chaque "marker" (si les notions de "marker" et de "pop-up" vous sont inconnues, n'hésitez pas à vous replonger dans les activités consacrées à leaflet.
N.B : le site http://earthquake.usgs.gov renvoie les informations de "timestamp" directement en millisecondes, inutile de multiplier la valeur par 1000.
ATTENTION : les coordonnées d'un point au format geoJSON sont données par le couple [longitude, latitude], alors que dans leaflet, les coordonnées d'un point sont données par le couple [latitude, longitude] !
Vous devriez obtenir ceci
Leaflet propose la méthode "geoJson" qui va permettre de traiter automatiquement l'ensemble des données contenues dans un fichier geoJSON.
Nous allons utiliser un fichier geoJSON contenant les contours (polygones), les noms et les codes de tous les départements français. Vous pouvez télécharger le fichier contenant ces informations ici (ces données proviennent de ce site, l'auteur est Grégoire David).
Créez un nouvel exemple et modifiez le fichier script.js comme suit (sans oublier de placer "departements.geojson" dans le même répertoire que le fichier "script.js")
script.js
var map;
function setup(){
noCanvas();
gotData();
map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
}
function gotData(){
loadJSON("departements.geojson",afficheData);
}
function afficheData(data){
var geo=L.geoJson(data)
geo.addTo(map);
}
function draw(){
}
Voici ce que vous devriez obtenir :
L'utilisation de la méthode "geoJson" est très simple :
Pour l'instant, nous n'avons pas utilisé les informations "nom" et "code" présentes dans le fichier "departements.geojson". Il est possible d'utiliser ces données en ajoutant un argument à la méthode "geoJson" :
Créez un nouvel exemple et modifiez le fichier script.js comme suit (sans oublier de placer "departements.geojson" dans le même répertoire que le fichier "script.js")
script.js
var map;
function setup(){
noCanvas();
gotData();
map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
}
function gotData(){
loadJSON("departements.geojson",afficheData);
}
function afficheData(data){
var geo=L.geoJson(data,{onEachFeature:affDep});
geo.addTo(map);
}
function affDep(feature,layer){
layer.bindPopup("<p>Nom : "+feature.properties.nom+"</p><p>Code : "+feature.properties.code+"</p>");
}
function draw(){
}
Voici ce que vous devriez obtenir (cliquez sur les départements) :
Cet exemple est plus complexe et nécessite quelques explications :
Tout cela est un peu complexe, n'hésitez pas à demander des explications supplémentaires si nécessaire.
L'objet JavaScript qui correspond au second paramètre de la méthode "geoJson" accepte d'autres attributs en plus de "onEachFeature" : "style", "filter",... Pour en savoir plus sur ces options, n'hésitez pas consulter la documentation officielle
Si vous voulez créer vos propres fichiers geojson, il existe un outil en ligne très pratique et très intuitif : http://geojson.io/