Choisissez une zone que vous connaissez bien (quartier, village...), de préférence loin de Grenoble (pour éviter de tous contribuer au même endroit). Vous allez vérifier si la zone est complète. Dans le cas contraire, vous pourrez compléter les données (avec précaution).
Pour contribuer, vous allez utiliser soit JOSM (de préférence), le principal éditeur spécialisé, soit l'éditeur ID, intégré au navigateur (programme JavaScript). ID est plutôt destiné aux débutants : il est plus rapide à comprendre, mais ne permet que les modifications simples. De son côté, JOSM accepte un grand nombre de plugins pour des travaux de modifications plus spécialisés et plus fins.
Sur la zone cible que vous avez choisie, chargez les données, et vérifiez les données présentes. Comme sources vous pourrez utilisez
Vous pouvez essayez de complétez les principaux types d'objets :
Vous pouvez aussi préciser des attributs secondaires sur un objet existant : nom (name), description, ref (référence), etc.
Consignes :
Dans votre compte-rendu, signalez la zone que vous avez traitée, les objets ajoutés/modifiés et, si vous voulez le compte OSM utilisé.
Dans cette partie, vous allez confectionner une carte personnalisée de type "plan de secours" pour le bâtiment de l'UFRIMAG. Pour cela, vous allez extraire des données d'OpenStreetMap avec Overpass Turbo et les mettre en forme graphiquement avec uMap.
Utilisez le service uMap pour créer une carte personnalisée, sur la zone de votre choix. Ajoutez quelques données "subjectives" qui n'auraient pas leur place dans OSM. Par exemple, quelques lieux favoris (marqueurs ou polygones), un ou deux trajets habituels.
Quelques fonctionnalités à tester :
Pour le partage, les exports importants sont le code html à embarquer (embed) dans un autre site, l'url à partager, et l'export en GeoJson, qui vous fournit une sauvegarde locale de vos objets.
Si vous créez cette carte avec votre compte OSM, vous pourrez la retrouver plus tard, et éventuellement la partager. Vous pouvez aussi la détruire à la fin de la session si vous préférez.
À noter que uMap est un service bâti sur Leaflet, qu'on utilisera en 3e partie. Il fournit donc une interface de prototypage rapide pour vos projets de rendu cartographique : tout ce que vous pourrez faire avec uMap, vous pourrez le refaire en JavaScript avec Leaflet.
Overpass Turbo (Doc wiki) permet de tester des requêtes pour extraire des données issues d'OSM, notamment grâce à l'assistant (wizard) qui facilite grandement les premiers pas. On va s'en servir pour extraire d'OSM les données du "plan de secours" concernant le bâtiment UFR IMAG.
Extraire toutes les bornes d'incendie (emergency=fire_hydrant) dans une bounding box (boîte englobante) entourant le bâtiment de l'UFR IMAG. L'assistant fournit un code de base très utile, mais qui reste optimisable. Dans quel sens peut-on faire cette optimisation ? Conservez la requête "optimisée" dans un fichier, puis faites en un export en GeoJSON.
Dans une autre requête, extraire également toutes les issues (entrance) du bâtiment, éventuellement classées par type (voir cet attribut sur le wiki) et faites un nouvel export de cette requête.
Sur uMap, vous pouvez importer directement un fichier GeoJSON. Utilisez les exports effectués auparavant pour afficher les objets extraits aux deux premières questions dans deux calques séparés : affichez sous forme d'épingle rouge les bornes incendie et sous forme d'icone verte les issues.
D'après vous, y a-t-il d'autres éléments OSM intéressants à visualiser pour un plan de secours ? Des informations manquantes à ajouter à OpenStreetMap ?
Leaflet est une bibliothèque JavaScript très simple pour afficher une "carte glissante". Le début du TP est très fortement inspiré du tutoriel Quick Start de Leaflet. En plus du tutoriel, vous pouvez vous référer à la documentation de référence.
visu0.html et visu0.css pour obtenir une ébauche de visualisation en carte glissante à l'écran. Vérifiez que ça marche dans votre navigateur !Avec cet exemple basique, par défaut, combien (approximativement) de tuiles sont montrées à l'écran ? (détaillez vos hypothèses si elles ne sont pas évidentes). Vérifiez vos prédictions à l'aide de l'Inspecteur de votre navigateur (Ctrl + Shift + I), en particulier de la console réseau.
Adaptez le cadre précédent pour visualiser la carte dans un canevas de 1280 x 1024 pixels représentant la totalité du campus. Combien de tuiles (environ) sont affichées cette fois ?
Ajoutez un marqueur sur l'entrée de l'UFRIM2AG, et une "zone d'influence" de 300 m de rayon centrée sur Polytech. Ensuite, ajoutez un itinéraire (à vol d'oiseau) entre Polytech et l'UFR passant par l'arrêt de tram Berlioz, et ajoutez un cercle sur cet arrêt de 20 pixels de rayon. Des deux cercles, lequel est le plus grand à l'écran et pourquoi ? Quelle est la meilleure méthode de visualisation ?
Indiquez les coordonnées du point cliqué par l'utilisateur, d'abord par une alert() JavaScript, puis par une infobulle popup pointant le point cliqué.
Ensuite, utilisez deux points consécutifs pour définir un rectangle orange à afficher, et enfin déclenchez un zoom sur cette zone rectangulaire (fitBounds()).
Sélectionnez dans la liste des rendus disponibles (par exemple à l'aide de uMap) deux ou trois rendus qui vous conviennent, et ajoutez à la carte le contrôle utilisateur qui lui permet de choisir le fond de carte parmi ceux-ci.
Ajoutez le contrôle "mini-carte" (MiniMap) qui permet à l'utilisateur de voir une carte contextuelle réduite dans un coin de l'écran. C'est un plugin Leaflet qui fournit ce contrôle. Ce plugin est très simple d'emploi et la documentation livrée avec le code est largement suffisante.
(optionnelle, s'il vous reste du temps) Parmi la liste des plugins, choisissez-en un autre qui vous semble adapté à la visualisation en cours, ajoutez-le et expliquez votre choix.
Maintenant, on reprend l'exercice portant sur le plan de secours de l'UFR IMAG en mode "développeur". On va se passer de uMap et tout faire dans Leaflet.
Récupérez les données propres à l'affichage avec OverPass Turbo. Comparez les données JSON brutes de l'Overpass API et les données GeoJSON. Lesquelles sont les plus adaptées à l'affichage ? au post-traitement ?
Utilisez deux couches vectorielle dans Leaflet pour afficher les données, avec la méthode L.geoJson().
(subsidiaire, difficile) utilisez les données brutes OSM de l'Overpass API. Quel est le point de blocage, et comment le contourner ?