Créer un site internet

Activité 2: Cartographie

Séance 2: Préparation du voyage en guadeloupe

Capacités attendues:

  • Retrouver les métadonnées d’un fichier personnel.
  • Utiliser un support de stockage dans le nuage.
  • Identifier les différentes couches d’information de GeoPortail pour extraire différents types de données.
  • Contribuer à OpenStreetMap de façon collaborative.
  • Écrire et développer des programmes pour répondre à des problèmes

Documents à rendre:
Un dossier par binome est à rendre sur le réseau en fin de séance. Il devra contenir les fichiers

  • "photos_binomeX.csv"
  • "carte_binomeX.html"
  • "ma_carte_test.py"
  • "ma_carte_test.html"
  • "visite_du_jourX.py"
  • "visite_du_jourX.html"

Organisation de la séance:
La séance s'organise autour d'une activité à réaliser par binome sur Pc en 1h25 maximum.

  • Récupérer les coordonnées GPS dans les données EXIF des photos
  • Stocker les photos sur un Cloud
  • Créer un fichier de données au format .CSV pour définir les marqueurs
  • Créer une carte avec le module Folium de Python

Voyage en guadeloupe

Un ami vous à envoyé des photos de son voyage en guadeloupe. Vous pensez y séjourner 12 jours lors de vos prochains congés. Apres avoir fait un tri vous avez regroupé 4 lieux à visiter par jour pour votre séjour. Pour vous aider lors de votre séjour, vous désirer créer une carte interactive par jour, reprenant les lieux à visiter sous forme de marqueurs géolocalisés intégrant la photo de votre ami, un titre et un petit descriptif.

Dans un dossier "Carte-binomeX" que vous crérez sur le bureau de l'ordinateur copier:

Dans les fichiers télécharger ci dessous, vous trouverez pour chaque binome:

  • La photo du gite
  • 4 photos représentant les 4 lieux à visiter dans la journée.

Télécharger aussi le fichier

  • Le fichier "uMap_Photos_Geolocalisees.ODS" à compléter pour chaque marqueur et à enregistrer en .CSV
  • Nom du fichier : Umap_photos_geolocalisees.ods
  • Taille : 34.92 Ko
Télécharger
  • Nom du fichier : Binome 1
  • Taille : 9.25 Mo
Télécharger
  • Nom du fichier : Binome 2
  • Taille : 9.25 Mo
Télécharger
  • Nom du fichier : Binome 3
  • Taille : 2.67 Mo
Télécharger
  • Nom du fichier : Binome 4
  • Taille : 9.27 Mo
Télécharger
  • Nom du fichier : Binome 5
  • Taille : 8.92 Mo
Télécharger
  • Nom du fichier : Binome 6
  • Taille : 1.83 Mo
Télécharger
  • Nom du fichier : Binome 7
  • Taille : 1.89 Mo
Télécharger
  • Nom du fichier : Binome 8
  • Taille : 8.51 Mo
Télécharger
  • Nom du fichier : Binome 9
  • Taille : 7.52 Mo
Télécharger
  • Nom du fichier : Binome 10
  • Taille : 5.35 Mo
Télécharger
  • Nom du fichier : Binome 11
  • Taille : 10.03 Mo
Télécharger
  • Nom du fichier : Binome 12
  • Taille : 6.72 Mo
Télécharger

Récupération des données Exif des photographies

Pour les 5 photos de votre dossier, récupérer les coordonnées GPS présente dans les données EXIF du fichier .JPG, puis de les saisir dans le ficher "uMap_Photos_Geolocalisees.ODS"

pour cela :

  • Uploader une photo sur le site exifinfo.org   Ou sur le site metapicz.com
  •  Saisissez les coordonnées GPS sur l'ongle "Conversion" du fichier "uMap_Photos_Geolocalisees.ODS" au format DD:MM:SS,SS

Par exemple pour saisir les coordonnées du gite " 16 deg 9' 1.72" N, 61 deg 46' 13.31" W" saisissez "16:09:1.72" pour la latitude et "-61:46:13.31" pour la longitude. La valeur de la longitude est négative car à l'Ouest (W). Le fichier converti ces coordonnées °, mn et secondes en coordonnées décimales.

  • Dans l'onglet "Umap" saisissez le nom de la photo (par exemple: "Notre gite") sous le descripteur "Nom"
  • Toujours dans cet onglet  compléter en quelques lignes un petit commentaire sous le descripteur "Description". (vous pouvez faire un recherche internet pour avoir des informations sur le lieu à visiter. Par exemple sur https://fr.guadeloupe-tourisme.com/)
  • Uploader la photo sur l'espace de partage en ligne temporaire https://pic.infini.fr/ ou https://wtf.roflcopter.fr/pics/
  • Récupérer l'URL et la rajouter dans le fichier crée précédent, en les mettant entre 2 accolades de cette manière {{url_photo}}sous le descripteur "URL"
  • Enregister votre fichier dans le dossier "Carte-binomeX" sous le nom "uMap_Photos_Geolocalisees.ODS"
Position gps gite

Création du fichier .csv

Pour utiliser le fichier "uMap_Photos_Geolocalisees.ODS" pour définir les marqueurs il faut l'enregistrer au format .csv, ce qui nous permettra de nous en servir comme base de données.

Pour cela mettez vous dans l'onglet "Umap" puis enregistrer dans le dossier "Carte-binomeX" votre fichier sous le nom "photos_binomeX.csv" en remplaçant le X par votre numéro de binome puis choisissez:

  • "Enregistrer sous"
  • Format d'extention ".CSV"
  • Jeu de caractère " Europe occidentale (ASCII/US)"
  • Séparateur de champs "," choisir une virgule.

Découverte du module Folium de Python

Il existe un module Python, nommé « folium », qui permet de travailler avec des cartes OpenStreetMap et des marqueurs que l’on géolocalise. Une fois le programme exécuté, il génère une carte au format HTML que l’on peut ouvrir avec un navigateur.

Principe d'utilisation du module


#importation du module
import folium

#création de l’objet Python carte, centrée sur les coordonnées #latitude et longitude en décimale avec un zoom de départ de 15
carte = folium.Map(location=[latitude, longitude],zoom_start=15)
#création d’un marqueur
folium.Marker(
[latitude_marqueur, longitude_marqueur],
popup="texte dans le popup",
).add_to(carte)

#création du fichier HTML
carte.save(‘ma_carte_test.html’)


A faire vous même:
  Avec le logiciel "EduPython", créer une carte "ma_carte_test.html" centrée sur le Gite avec un Zoom permettant de voir uniquement la guadeloupe mais dans son intégralité. Si la carte obtenue correspond à l'image ci contre vous pouvez passer à l'étape suivante. Enregistrer aussi votre programme python sous le nom: "ma_carte_test.py"

Création de la carte "Visite du jour"

Pour cela on va utiliser le fichier "photos_binomeX.csv" en utilisant chaque ligne du fichier pour créer un marqueur. Pour centrer votre carte au mieux on va faire une moyenne des coordonnées longitude et latitude des 5 lieux à visiter dans votre journée.

Créer un nouveau fichier Python "visite_du_jourX.py" , enregistrer le dans le dossier  "Carte-binomeX" avec le programme suivant:


#Création de la "Carte_du_JourX" avec le module Folium
import csv
                 #importe le module csv pour lire des fichiers .csv
import folium            #importe le module folium pour créer les cartes
import webbrowser   #importe le module webbrowser pour créer les fichiers .html

# Constante
NOM_FICHIER_CSV  = '
photos.csv'                                                #remplacer le nom du fichier par votre fichier .csv
NOM_FICHIER_HTML = 'Carte_Photos_Geolocalisees.html'        #remplacer le nom du fihier par le nom du fichier .html à créer
ZOOM_CARTE       = 15                                                                   #défini la variable Zoom par défaut de la carte à créer (à ajuster pour optimiser votre carte)
TUILES      = 'OpenStreetMap'
ATTRIBUTION = '© Contributeurs OpenStreetMap'

# Fonction
def csv_vers_liste(nom_fichier):
#Fonction principale qui prend comme argument le nom du fichier et le traite pour créer une liste de liste
    with open(nom_fichier, 'r') as fichier_csv:
# On ignore l'entête.
        fichier_csv.readline()
        lecture_fichier = csv.reader(fichier_csv, delimiter=',')
        liste_totale = []
        for lignes in lecture_fichier:

# on ignore les éventuelles lignes vides du fichier
            if lignes[3] != '0':
                liste_totale.append(lignes)
    return liste_totale


def coord_centre(liste):
    '''Fonction qui renvoie la moyenne de la latitude et longitude de toutes les photos (lignes du fichier), cela permet de centrer la carte'''
    somme_lat = 0
    somme_lon = 0
    moyenne_lat = 0
    moyenne_lon = 0
    for lignes in liste:

        latitude  = float(lignes[3])     
#recupere la latitude comme 4ieme descripteur'
        longitude = float(lignes[4])
   #recupere la longitude comme 5ieme descripteur'
        somme_lat += latitude
        somme_lon += longitude
    nombre_ligne = len(liste)
    moyenne_lat = somme_lat / nombre_ligne
  
#Expliquer ce que font ces deux lignes
    moyenne_lon = somme_lon / nombre_ligne #Expliquer ce que font ces deux lignes
    print("Latitude moyenne =", moyenne_lat, "Longitude moyenne =", moyenne_lon)
    return (moyenne_lat, moyenne_lon)

# Corps du code
liste_fichier = csv_vers_liste(NOM_FICHIER_CSV)
moyenne_lat , moyenne_lon = coord_centre(liste_fichier)

#Création de la carte avec le module folium
carte = folium.Map(
    location   = [moyenne_lat, moyenne_lon],
    zoom_start = ZOOM_CARTE,
    tiles      = TUILES,
    attr       = ATTRIBUTION
)

#Boucle de création des marqueurs
for donnees in liste_fichier:
    aide        = 'Clique-moi !'
    titre       = donnees[0] 
    
   #recupere le titre à afficher comme descripteur 0 (premiere valeur)'
    description = donnees[1]
  #recupere la description à afficher comme descripteur 1 (deuxième valeur)'

# Suppressions des accolades qui étaient nécessaires pour uMap
    image = donnees[2].strip('{}')                   #recupere l'URL de la photo du marqueur comme descripteur 2 (troisième valeur) et enlève les {}'
    latitute_marqueur  = float(donnees[3])
     #recupere la latitude du marqueur comme descripteur 3 (quatrième valeur)'
    longitude_marqueur = float(donnees[4])  #recupere la longitude du marqueur comme descripteur 4 (cinqième valeur)'

#Création du marqueur avec le module Folium
    folium.Marker(
        [latitute_marqueur, longitude_marqueur],
        popup="<h4>{}</h4> <br> <i>{}</i> <br><br> <img src='{}' width='300' ".format(titre,description,image),
        tooltip = aide,
        icon    = folium.Icon(color='green', icon='camera')
    ).add_to(carte)

#On sauve la carte au format HTML
carte.save(NOM_FICHIER_HTML)
print("Carte HTML générée dans le dossier courant")
webbrowser.open(NOM_FICHIER_HTML)


Optimiser la carte obtenue en modifiant le Zoom.
Enregistrer vos documents et rendez les sur le réseau.