Test Leaflet

Mon, 01 Nov 2021 00:00:00 +0000

Sur le site R bloggers, j’ai trouvé un article montrant comment placer des photos sur un fond de carte OpenStreetMap à partir des coordonnées GPS présentes dans les métadonnées (exif). Tout cela en utilisant des outils libres :

pour les photos :
- digikam pour intégrer les coordonées GPS aux images
- ART pour convertir les images raw en jpg
pour le reste :
- R et quelques librairies pour générer une table listant les photos, et leurs coordonnées GPS (via exiftool)
- R Studio pour écrire ce blog dans le language rmarkdown
- pandoc pour convertir les pages rmarkdown en pages HTML

Voici la liste des librairies R utilisées :

library(tidyverse)
library(leaflet)
library(leafpop)
library(htmlwidgets)
library(widgetframe)
library(exiftoolr)

Maintenant, le code :

# Extraction des noms de fichiers images et des coordonnées GPS
# (métadonnées EXIF) et écriture dans un dataframe
files <- dir("venise", full.names=T)
df <- data.frame(exif_read(
files, quiet=T, tags = c("Location","GPSLatitude","GPSLongitude")))
# Construction du widget leaflet
map <- leaflet(df[,c("GPSLatitude","GPSLongitude")], height=700) %>%
addTiles() %>%
addCircleMarkers(
clusterOptions = markerClusterOptions(),
fillOpacity = 0.6, radius = 3,
lng = ~GPSLongitude, lat =~GPSLatitude,
popup = popupImage(as.character(df$SourceFile),
src="local", embed=F, width=400),
popupOptions = popupOptions(maxWidth = 1000, keepInView=T)
)
# Il faut corriger le chemin vers les images dans le widget créé,
# pour garder la structure initiale et faire que les photos s'affichent bien
for (i in 1:length(map[["x"]][["calls"]][[2]][["args"]][[9]])){
map[["x"]][["calls"]][[2]][["args"]][[9]][[i]] <- str_replace_all(
map[["x"]][["calls"]][[2]][["args"]][[9]][[i]], "../graphs", "venise")
}

Enregistrer le widget au format HTML :

saveWidget(frameableWidget(map),"leaflet.html")

Ensuite il faut mettre <iframe height="700" width="100%" frameborder="no" src="leaflet.html"></iframe> dans le corps HTML pour afficher la carte :

Sur cette carte on peut zoomer, et cliquer sur les marqueurs pour afficher les vignettes des photos. Pour voir les photos en taille originale, il suffit de faire un clic droit puis “Afficher l’image”.

Sachant que certaines photos ont des coordonnées GPS identiques (ou très proches), l’ajout de l’option clusterOptions = markerClusterOptions() pour construire la carte permet de visualiser le recouvrement des marqueurs et d’accéder aux photos individuelles en cliquant sur les marqueurs de groupe. Le chiffre au centre d’un marqueur indique le nombre de marqueurs (et donc de photos) rassemblés.

Blog | Sébastien Guyader - Blog

Test Leaflet