--- tags: tuto, IA-IPR, carto title: Outils pour l'inspecteur. Comment créer une carte interactive ? description: Placer ses PPCR ou établissements sur une carte OpenStreetMap --- # Créer une carte OpenStreetMap pour IA-IPR `Auteur : Vincent Pantaloni` :::info 🎯 Objectif : apprendre à créer une carte intéractive. Comme ci-dessous, l'ensemble des PPCR de maths à effectuer dans l'académie, une couleur par IPR avec un popup d'informations quand on clique sur une épingle. :::  :::spoiler <i class="fa fa-list-ol"></i> **Sommaire** [toc] ::: ## Ajouter des éléments de géolocalisation (latitude, longitude) à un fichier CSV comportant des adresses. Sur Siiprien (ou SIRHEN) on peut exporter des fichiers au format CSV. A partir d'Excel on peut aussi enregistrer une feuille au format CSV (point virgule). Par exemple ici on va exporter la liste de tous les collèges PU & PR du bassin de Massy.  Ce fichier ne comporte pas les coordonnées géographiques pour localiser les établissements. Pour convertir les adresses en coordonnées géographiques on va sur ce site : https://adresse.data.gouv.fr/tools Et on y verse notre fichier CSV.  Ensuite on doit choisir des colonnes du fichier :  On choisit avec les ➕ les colonnes **Nom, adresse, ville, code postal** pour construire les adresses complètes et le géocodage.  On lance le Géocodage et on télécharge le fichier CSV créé qui porte alors le suffixe `.geocoded` ## Créer une carte à partir d'un fichier CSV comportant une géolocalisation. On ouvre OpenStreetMap en ligne : https://umap.openstreetmap.fr/fr/  Il faut se créer un compte pour sauvegarder ses cartes. On crée alors une nouvelle carte. On importe les données au format CSV dans un nouveau calque.  On peut modifier la forme et la couleur des icones sur chaque calque en ciquant sur le crayon ✏. Personnellement je préfère la forme "épingle"   ## Placer ses rendez-vous de carrière sur une carte ### Se créer un fichier de tous les EPLE géolocalisés. Pour gagner du temps, il est pratique de se créer un fichier tableur avec une géolocalisation (longitude, latitude) de tous les établissements scolaires de l'académie. Pour ce faire on applique la méthode vue au début à partir d'un téléchargement de tous les établissements. Disons que ce fichier s'appelle `EPLE-geoloc` (csv ou xlsx). On utilisera ensuite juste l'UAI comme clé. ### Télécharger depuis SIRHEN la liste de ses PPCR.  On obtient un fichier CSV comme `Liste entretiens_MC_2_ND_DEGRE_ENS_PUBLIC` qui comporte en particulier l'UAI de chaque établissement (ici en colonne R : Code établissement).  Au besoin, concaténer les quatre fichiers (certifiés et agrégés du public et du privé) sur un seul onglet qu'on nommera par exemple `PPCR`. ### Utiliser le fichier `EPLE-geoloc` Copier et coller le contenu du fichier `EPLE-geoloc` dans un deuxième onglet qu'on nomme par exemple `GEOCODED`. Ce fichier a cette allure, avec l'UAI en colonne A et comporte latitude et longitude, c'est tout ce dont on a besoin.  ### Récupérer latitude et longitude par une `RECHERCHEV` De retour dans l'onglet PPCR, l'objectif est d'insérer des colonnes latitude et longitude avec les valeurs récupérées dans l'onglet GEOCODED.  Je parlerai de la colonne Q (*Résumé*) ensuite. On a l'UAI ici en colonne L. On se place dans la cellule R2 et on entre : `=RECHERCHEV($L2;GEOCODED!$A:$N;12;FAUX)` qui signifie rechercher la valeur en L2 (c'est l'UAI) dans l'onglet GEOCODED dans les colonnes de A à N et renvoyer l'indice 12, c'est à dire la valeur dans la 12e colonne à partir de l'UAI trouvé dans l'onglet GEOCODED. De même pour avoir la longitude : `=RECHERCHEV($L2;GEOCODED!$A:$N;13;FAUX)` Le FAUX signifie qu'on ne veut pas une recherche *approchée*. ### Colonne `Resume` Cette colonne comporte pour chaque ligne un résumé des informations utiles que l'on voudra voir apparaitre sur la carte quand on cliquera sur un point placé. On l'obtient on concatenant (fonction `CONCATENER()`) différents champs comme le numéro de rendez-vous de carrière, le nom de l'établissement, le tout entre accolades. Par exemple en Q2 : `=CONCATENER("{";B2;" ";C2;" ";D2;" ";G2;" ";H2;" ";M2;" ";N2;"}")` ### Copier et coller ces trois colonnes dans OpenStreetMap Copier le contenu des trois colonnes Q, R, S (ou juste un certain nombre de lignes) **avec la ligne de titres** : Resume, latitude, longitude. Aller dans sa carte OpenStreetMap. Au lieu de verser un fichier CSV, il suffit de coller le contenu du presse papier dans le champ `Coller vos données ici`:  Choisir plus bas le format CSV et importer dans un nouveau calque. Puis importer.  Dans le menu calques, aller éditer le calque (ensuite ce sera inutile pour les autres calques).  On va régler les options d'interaction.  On va autoriser les interactions et indiquer que le popup doit contenir le champ `Resume` en tapant entre accolades {Resume} dans le Gabarit manuel de popup  On n'oublie pas d'enregistrer...  On peut alors avoir un aperçu du rendu (tout en restant en mode édition).  Comme voulu, quand on clique sur une épingle on a notre résumé qui apparaît.  ### Partager On peut ajouter les contours des départements en versant un calque comme le fichier `departements-20170102.kml` trouvé à l'adresse : https://www.data.gouv.fr/fr/datasets/contours-des-departements-francais-issus-d-openstreetmap/ On peut ensuite faire un calque par IA-IPR, avec des couleurs différentes, et partager cette carte à nos collègues.  #### Carte imbriquée par iframe Le partage peut se faire par un lien, par exemple : http://u.osmfr.org/m/1093927/ Mais la carte peut aussi être publiée sur une page web (carte des labomaths ou des clubs par exemple) ou encore sur un CodiMD comme ici en utilisant un iframe :  Ce qui donne pour cette carte des établissements du Cher et du Loiret : <iframe width="100%" height="500px" frameborder="0" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/fr/map/essai-exemple_1093927?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&editMode=disabled&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true"></iframe><p><a href="//umap.openstreetmap.fr/fr/map/essai-exemple_1093927?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true">Voir en plein écran</a></p> <!-- Ne pas toucher à ce qui est ci-dessous, c'est pour le style --> <style> body a {cursor: pointer; font-weight: bold; } body p {text-align: justify;} h2{color:#361669;padding-top:0.5em;border-bottom:3px solid #6e3dba!important;margin-bottom:.75em!important;background-color: rgba(197, 161, 255,0.1);} details { margin-bottom: 10px; border-radius: 6px; padding-top: 0.4em; box-shadow: 0 5px 10px -9px rgba(0, 0, 0.5, 0.5), 0 10px 10px -5px rgba(0.2, 0, 0.7, 0.2); } details > summary{ cursor: pointer; transition: .3s; user-select: none; padding: 0.3em; background-color: #f5f5f5; border-radius: 4px; font-family: 'Marianne'; } </style>