Une carte des sites d’escalade à proximité

Camptocamp.org met à disposition ses données géoréférencées (sommets, sites d’escalade, parkings, refuges, …) sous forme de shapefiles, sous double licence Creative Commons BY SA et Open Database License. Il est donc possible d’utiliser ces données pour afficher sur une carte des sites d’escalade (par exemple) situé à proximité. Pour réaliser ceci, j’ai utilisé la bibliothèque javascript Leaflet, qui permet d’utiliser les données géographiques d’OpenStreetMap.

Note

La démo n’est plus fonctionnelle, elle se basait sur une version de leaflet qui n’est plus disponible sur leur CDN.

Le résultat se trouve ici: http://saimon.org/public/c2c/leaflet/map.html

carte des sites d'escalade

Création des fichiers GeoJSON

Première étape, la conversion des shapefiles au format GeoJSON, avec la commande ogr2ogr de GDAL:

for i in 'climbing_sites' 'huts' 'parkings' 'routes' 'summits'
do
    ogr2ogr -f geoJSON $i.json -t_srs EPSG:4326 $i.shp
done

Je n’ai pas encore tout compris au système de coordonnées, mais ca donne ce qu’il faut avec EPSG:4326. Pour réduire le poids du fichier GeoJSON, il est possible de sélectionner les données utiles avec Quantum GIS.

Le fichier GeoJSON contient les informations nécessaires pour afficher les objets sur la carte: longitude, latitude, nom, ainsi que l’identifiant qui permet de faire un lien vers le document correspondant sur C2C:

{
    "type": "Feature",
    "properties": {
        "OID": "786918",
        "ID": 102357.000000,
        "LON": 5.385830,
        "LAT": 43.823510,
        "ELEVATION": 450,
        "NAME": "Buoux",
        "CULTURE": "fr"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            5.385830,
            43.823510,
            450.000000
        ]
    }
},

Utilisation de Leaflet

Leaflet est une bibliothèque javascript légère qui permet d’afficher une carte avec les fonds OpenStreetMap, adaptée pour les mobiles, et qui permet d’utiliser des données GeoJSON. La fonction map.locateAndSetView(12); permet d’utiliser facilement la géolocalisation. Le code de cette expérimentation montre également comment utiliser plusieurs couches (avec Mapquest).

Par contre, ce code n’est qu’une expérimentation, pas optimisé pour un usage intensif: à chaque changement de l’affichage de la carte, le fichier GeoJSON est parsé à nouveau pour trouver les objets à afficher.

Commentaires