Objectif :

Le but essentiel de ce TP est d'établir un Dashboard GeoAnalytique avec la bibliothèque

Streamlit, tout en intégrant les fonctionnalités spatiales supplémentaires. L'une des étapes les
plus importantes dans cette procédure consiste à élaborer un jeu de données cohérent avec le
modèle défini tout en utilisant des données fictives. Pour ce jeu de données, il est important
d'inclure au moins 1000 points qui seront placés aléatoirement sur toute l'étendue du Maroc.
Après avoir défini le schéma de données, il faut ensuite procéder à la sauvegarde dans un
format spécialisé appelée geoparquet qui permettra d'obtenir une meilleure précision pour
l'information géographique. Il est préférable d'utiliser Streamlit geospatial pour afficher
directement ces données depuis le format géoparquet, ce qui permettra ensuite d'avoir une
visualisation interactive sur Dashboard GeoAnalytique.

Et cela par répondre aux différentes questions :

1/- Construire un dataset à partir de ce schéma par des données fictives (minimum 1000
points répartis aléatoirement sur le Maroc), et sauvegarder l’en format geoparquet ?
Pour bien répondre à cette question nous avons utilisé un script python qui permet de génèrer
des points géographiques aléatoires répartis sur le Maroc, attribue des valeurs aléatoires à
différentes propriétés, stocke ces données dans un GeoDataFrame, puis les sauvegarde au
format Geoparquet.

2
Après avoir généré les données de manière arbitraire en incluant les coordonnées de longitude
et latitude, nous les avons enregistrées au format Geoparquet

Le format Geoparquet semble bien adapté pour ce cas, en particulier si vous travaillez avec
des ensembles de données géospatiales de taille importante. Ses avantages en termes de
stockage efficace, performances élevées et support spécifique aux données géographiques en
font un choix judicieux pour les applications impliquant une manipulation fréquente de
données géospatiales.
2/-Utiliser streamlit geospatial (ou autre) pour afficher ces données (depuis le format
geoparquet) ?
a) Volet Cartographie du jour J :
Pour représenter graphiquement mes données discrètes, réparties sous forme de points
à travers tout le Maroc, nous avons choisi deux approches. La première utilise le
heatmap, permettant d'interpoler ces points et de générer une première carte en
extrapolant les valeurs de chaque colonne de nos données. La seconde approche
repose sur l'utilisation de symboles proportionnels, ajustant la taille du symbole pour
refléter l'importance de la variable cartographiée

3
 cette application permet à l'utilisateur de sélectionner une colonne à cartographier, puis
affiche une carte thématique interactive du Maroc avec une couche de heatmap et une
couche de symboles proportionnels. La visualisation est réalisée grâce aux bibliothèques
Leafmap et Folium.
b) A l’aide d’un Slider, possibilité de naviguer entre les cartes (obligatoirement en
format raster) du jour 0, Jour -1, …Jour –5 ?
Afin de pouvoir utiliser un curseur permettant de naviguer entre différentes cartes au format
raster, il est impératif d'effectuer une interpolation sur les données aléatoires que nous avons
générées au début. Pour ce faire, nous avons utilisé le logiciel QGIS pour exécuter une
interpolation IDW sur l'ensemble des attributs.
Et nous avons utilisé ce script pour visualiser le résultat et naviguer entre différentes cartes.
import streamlit as st
import leafmap.foliumap as leafmap
import os

st.set_page_config(layout="wide")
st.title("Création d'un slider pour naviguer entre les cartes")
# Sélection du jour
selected_day = st.slider("Sélectionnez le jour", -6, 0, -1)

# Sélection de l'attribut
selected_attribute = st.selectbox("Choisissez l'attribut", ["Attibut1", "Attibut2",
"Attibut3"])

# Construction du chemin du fichier image

image_path = os.path.join("interpolation", f"{selected_attribute}Jour{selected_day}.tif")

4
# Création de la carte Leaflet
legend_dict = {
"Faible": "#f1eef6",
"Moyen": "#bdc9e1",
"Fort": "#74a9cf",
"Tres fort": "#0570b0",
}

m = leafmap.Map()
style = {
'position': 'fixed',
'z-index': '9999',
'border': '2px solid grey',
'background-color': 'rgba(255, 255, 255, 0.8)',
'border-radius': '10px',
'padding': '5px',
'font-size': '14px',
'bottom': '20px',
'right': '5px',
}

m.add_legend(
title='Legende', legend_dict=legend_dict, draggable=False, style=style
)

m.add_raster(image_path, colormap='terrain', layer_name='carte')

# Affichage de la carte dans Streamlit

m.to_streamlit(height=700)

cette application Streamlit offre une interface utilisateur interactive pour explorer des cartes
raster générées à partir de fichiers image spécifiques, en fonction des choix de jour et
d'attribut de l'utilisateur. La visualisation est réalisée grâce à la bibliothèque Leafmap, qui
simplifie l'intégration de cartes Leaflet dans l'environnement Streamlit.
Voici l’interface de l’application affichée exécutant ce code :

5
c)-Utiliser des Timelapses pour naviguer entre les différents jours ?
Dans cette partie nous avons utiliser la bibliothèque LeafMap pour prendre une série d'images
de cartes raster stockées dans le dossier spécifié, puis nous avons génèrer un time-lapse animé
qui montre comment ces cartes raster évoluent au fil du temps. Le résultat est une animation
(GIF dans ce cas, nommé 'carte.gif') montrant les changements ou les variations des données
géospatiales au cours de la période couverte par la série d'images.
import streamlit as st
import leafmap

st.set_page_config(layout="centered")

markdown = """
Web App URL: <https://geotemplate.streamlit.app>
GitHub Repository: <https://github.com/giswqs/streamlit-multipage-template>
"""

st.sidebar.title("About")
st.sidebar.info(markdown)
logo = "https://i.imgur.com/UbOXYAU.png"
st.sidebar.image(logo)

st.title("Time-lapse des cartes Raster")

url = 'interpolation'
images = 'interpolation/*.tif'
leafmap.create_timelapse(

6
 images,
out_gif='carte.gif',
bands=[0, 1, 2],
fps=7,
progress_bar_color='blue',
add_text=True,
text_xy=('3%', '3%'),
text_sequence =1,
font_size=20,
font_color='white',
mp4=False,
reduce_size=False,
)
leafmap.show_image('carte.gif')

st.image('carte.gif', width=600)

d)-Créer un SplitMap pour comparer deux cartes (obligatoirement en format raster) de

deux jours différents l’une à côté de l’autre ?
Nous avons recouru à l'option "splitMap", qui permet de diviser la carte en deux. Ainsi, nous
avons la possibilité de sélectionner l'attribut lié à la journée pour l'image de gauche, et nous
disposons de la même fonctionnalité pour l'image de droite.
import folium
import leafmap.foliumap as leafmap
import streamlit as st
import os
st.set_page_config(layout="wide")

7
st.title("Split Map des cartes Raster")
# Dossier contenant les fichiers
interpolation_folder = 'interpolation'

# Obtenez la liste des noms de fichiers sans extension

file_names = [os.path.splitext(file)[0] for file in os.listdir(interpolation_folder) if
file.endswith(".tif")]

# Sélectionnez les fichiers à l'aide de selectboxes

selected_file_1 = st.selectbox("Choisissez l'image gauche :", file_names)
selected_file_2 = st.selectbox("Choisissez l'image droite :", file_names)

# Utilisez les fichiers sélectionnés pour créer la carte

url = os.path.join(interpolation_folder, f'{selected_file_1}.tif')
url2 = os.path.join(interpolation_folder, f'{selected_file_2}.tif')

# Créez la carte et utilisez les fichiers sélectionnés

m = leafmap.Map(height=600, center=[39.4948, -108.5492], zoom=12)
m.split_map(url, url2)

# Affichez la carte dans Streamlit

st.write(m.to_streamlit(height=700))

Ainsi le résultat de l’exécution de ce script sera comme suit :

e) - Créer une Pop-up en cliquant sur les points affichant la série temporelle
AttributiJourj (j allant de jour 0 à jour -6) ?

8
Dans cette partie nous avons crée une application web interactive utilisant Streamlit pour
afficher une carte interactive avec des marqueurs pour chaque point d'un GeoDataFrame.
Chaque marqueur est associé à un pop-up contenant un graphique linéaire combiné
représentant l'évolution des attributs spécifiques du point sélectionné. Cette application est
particulièrement utile pour explorer et visualiser des données géospatiales de manière
dynamique.
import streamlit as st
import geopandas as gpd
import folium
from streamlit_folium import folium_static
from io import BytesIO
import base64
import matplotlib.pyplot as plt
st.set_page_config(layout="wide")

# Charger les données

gdf = gpd.read_parquet("donnee.parquet")

# Titre de l'application
st.title("Cartographie Thématique par Coordonnées")

# Fonction pour créer un graphe linéaire et le convertir en base64

def create_combined_chart(row):
days = ['Jour0', 'Jour-1', 'Jour-2', 'Jour-3', 'Jour-4', 'Jour-5', 'Jour-6']
# Définir la taille de la figure
plt.figure(figsize=(5, 3)) # Ajustez les dimensions selon vos besoins

plt.plot(days, row[['Attibut1Jour0', 'Attibut1Jour-1', 'Attibut1Jour-2', 'Attibut1Jour-

3', 'Attibut1Jour-4', 'Attibut1Jour-5', 'Attibut1Jour-6']], label='Attibut1')
plt.plot(days, row[['Attibut2Jour0', 'Attibut2Jour-1', 'Attibut2Jour-2', 'Attibut2Jour-
3', 'Attibut2Jour-4', 'Attibut2Jour-5', 'Attibut2Jour-6']], label='Attibut2')
plt.plot(days, row[['Attibut3Jour0', 'Attibut3Jour-1', 'Attibut3Jour-2', 'Attibut3Jour-
3', 'Attibut3Jour-4', 'Attibut3Jour-5', 'Attibut3Jour-6']], label='Attibut3')

plt.title('Graphe linéaire')
plt.xlabel('Jours')
plt.ylabel('Valeurs')
plt.legend()

buffer = BytesIO()
plt.savefig(buffer, format='png')
plt.close()
return base64.b64encode(buffer.getvalue()).decode()

# Créer une carte Folium avec le fond de carte ESRI World Street Map

9
m = folium.Map(location=[gdf['Latitude'].mean(), gdf['Longitude'].mean()], zoom_start=6,
tiles="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile
/{z}/{y}/{x}", attr="ESRI World Street Map")

# Ajouter les points sur la carte

for _, row in gdf.iterrows():
# Créer le graphe linéaire combiné et le convertir en base64
combined_chart_data = create_combined_chart(row)
# Ajouter le marqueur avec le pop-up contenant l'image du graphe combiné
folium.Marker([row['Latitude'], row['Longitude']], popup=f'<img
src="data:image/png;base64,{combined_chart_data}">').add_to(m)

# Afficher la carte
folium_static(m, width=1200, height=700)

Nous avons aussi penser à l’utilisation du graphiques intéractives dans le pop up mais ceci ne
marche pas vue que le pop up n’acceptent pas Javascript dédié à l’intéractivité . Cependant
nous avons pensé à les générer indépendamment à partir d’un selectbox

10
f) -Possibilité de chercher un point par ses coordonnées dans une textbox ?

Dans cette partie nous avons essayer de chercher un point à partir de ces
coordonnées et pour se faire nous avons afficher en premier lieu un tabeau
indiquant la longitude et la latitude de notre point

Puis nous allons essayer de copier les coordonnées d’un point sur une zone de texte et une fois
qu’on tape sur entrer on est dirigé vers notre point specifié :

11
g) -Possibilité de filtrer les données affichées sur la carte en utilisant des requêtes
attributaires ou spatiales (la requête doit être construite à la volée et non stockée) ?
A ce niveau nous avons essayer de créer des requêtes attributaires pour essayer de filtrer les
données affichées sur la carte
On pourra choisir autant d’options qu’on veut et on indique nos conditons dans la zone du
texte .une fois qu’on clique sur Ok , les points qui satisfaisent les conditions s’affichent sur la
carte

Une fois qu’on clique sur Ok , les points qui satisfaisent les conditions s’affichent sur la carte

12
h) -Explorer l’utilisation du format COG au lieu de geotiff pour les cartes Raster ?

Les Formats Géospatiaux Optimisés pour le Cloud (COGs) représentent une avancée cruciale
dans la gestion des données géospatiales. Leur efficacité de stockage, leur récupération rapide
et leur adaptabilité les rendent indispensables pour diverses applications.
COG nous a permis de réduire la taille de l’image et de gagner en temps pendant l’exécution
dans l’application.
Tout d’abord nous avons essayer de convertir nos données ‘Tif’ vers le format COG en
utilisant le script suivant :

import os
import leafmap

# Dossier source contenant les fichiers TIFF

dossier_source = "C:/Users/HP/Downloads/streamlit/interpolation"

# Dossier de destination pour les fichiers COG

dossier_destination = "C:/Users/HP/Downloads/streamlit/COG"

# Assurez-vous que le dossier de destination existe, sinon créez-le

if not os.path.exists(dossier_destination):
os.makedirs(dossier_destination)

# Parcours des fichiers TIFF dans le dossier source

for fichier_tiff in os.listdir(dossier_source):
if fichier_tiff.endswith(".tif") or fichier_tiff.endswith(".tiff"):
# Construire le chemin complet du fichier source
chemin_source = os.path.join(dossier_source, fichier_tiff)

# Construire le chemin complet du fichier de destination COG

fichier_cog = os.path.splitext(fichier_tiff)[0] + "_cog.tif"
chemin_destination = os.path.join(dossier_destination, fichier_cog)

# Conversion du fichier TIFF en COG

leafmap.image_to_cog(chemin_source, chemin_destination)
print(f"Conversion réussie : {fichier_tiff} -> {fichier_cog}")

print("Conversion terminée.")

Puis nous avons évaluer que la taille des images tif s’est réduit lors de la conversion vers le
format cog

13
Lors du chargement de l’image COG on remarque que celle-ci est découpé en en petites
images rectangulaires (tuiles) pour permettre une visualisation rapide et interactive.

e) Explorer la possibilité d’exporter le contenu du dashboard sous forme de rapport en

pdf.
A l’aide des 3 points qui se trouvent en haut de la page on pourra
exporter le contenu de notre application en format PDF

14
Conclusion :

En guise de conclusion, ce projet a réussi à créer une application interactive et complète pour
explorer, analyser et visualiser des données géospatiales fictives. Les fonctionnalités mises en
œuvre offrent une expérience utilisateur riche et flexible, répondant aux besoins d'exploration
temporelle, de comparaison, de filtrage et d'exportation de résultats. La combinaison de
Streamlit Geospatial et des formats de données efficaces a permis de créer un outil puissant
pour l'analyse géospatiale.

15