- 1 - Le fond de carte de base
- 2 - Balise GPS
- 3 - Cercle GPS
- 4 - Affichage des coordonnées GPS
- 5 - Bouton de reset (zoom et position)
- 6 - Passage en mode plein écran
- 7 - Barre de recherche OSM
- 8 - Mesure des distances
- Measure distances and areas
- Measure distances and areas
- 9 - Echelle de la carte
- 10 - Mini carte
- 11 - Set-up (zoom et position)
- 12 - Titre (HTML)
CARTOGRAPHIE AVEC Leaflet & R
Tutoriel n°1 : Elements de base
Benoit TOUZOT | Ingénieur en santé publique | touzot.benoit.1417r@gmail.com
Mise à jour le 24/01/2022
1 - Le fond de carte de base
Dans ce tutoriel nous nous limiterons à la carte OSM (open street map) par défaut, mais j’écrirais dans les prochains jours un tuto dédié aux fonds de carte. Certains sont fixes alors que d’autres sont continuellement mis à jour comme celui de la NASA.
library(dplyr)##
## Attachement du package : 'dplyr'## Les objets suivants sont masqués depuis 'package:stats':
##
## filter, lag## Les objets suivants sont masqués depuis 'package:base':
##
## intersect, setdiff, setequal, union## ETAPE 1 : préparer le support de base de cartographie
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
##Création d'une carte de base--------------------------------------------------
base<- leaflet() %>% #utilisation de leaflet
addTiles() # Ajout de la carte openstreet map par défaut
#édition de la carte de base----------------------------------------------------
base
2 - Balise GPS
On utilisera ce type de balise pour positionner sur une carte des éléments individuels (personne, structures, …)
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole") #ajout du texte qui apparait au clic souris sur la balise
#édition de la carte de base----------------------------------------------------
base
3 - Cercle GPS
A l’instar de la balise GPS, on peut utiliser le cercle GSP pour positionner des élements individuels mais aussi des valeurs numériques. Dans le cas de valeurs numériques, il sera possible de changer la taille du cercle en fonction de la valeur ainsi que ça couleur et son opacité.
library(leaflet) #package de base
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))
#édition de la carte de base----------------------------------------------------
base4 - Affichage des coordonnées GPS
L’affichage des coordonnées GPS du point situé sous le pointeur de la souris permet le contrôle de concordance entre coordonnées GPS et situation. Cela permet aussi à l’inverse de récupéré des coordonnées GPS d’un élément de cartograhie que l’on souhaiterait pointer. Par exemple les coordonnées GPS du sommet du Canigou.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates() # Ajout des coordonnées GPS du pointeur de la souris
#édition de la carte de base----------------------------------------------------
base5 - Bouton de reset (zoom et position)
Cette option permet un recentrage et un réajustement de la carte lorsque après différents déplacements on souhaite retrouver de façon simple la position d’origine.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton() # ajout du bouton "reset" pour recentrage carte
#édition de la carte de base----------------------------------------------------
base6 - Passage en mode plein écran
Cette option s’avère utile si l’on souhaite profiter complétement de l’environnement cartographique et s’affranchir du navigateur internet.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl() #ajout du basculement en mode plein écran
#édition de la carte de base----------------------------------------------------
base7 - Barre de recherche OSM
Cette option permet de situer n’importe quel élément sur la carte produite. On peut par exemple, sur une carte situant toutes les pharmacies de France, connaitre celle à proximité d’une adresse définie.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl()%>% #ajout du basculement en mode plein écran
addSearchOSM() #ajout de la barre de recherche Openstreetmap
#édition de la carte de base----------------------------------------------------
base8 - Mesure des distances
Cette option ne permet que la mesure de distance euclidienne, nous verrons dans un autre tutoriel comment réaliser le calcul des distances géodésiques.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl()%>% #ajout du basculement en mode plein écran
addSearchOSM()%>% #ajout de la barre de recherche Openstreetmap
addMeasure(position = "topleft", #positionnement de l'outil en haut à gauche de la carte
primaryLengthUnit = "kilometers", # choix de l'unité de mesure
secondaryAreaUnit = FALSE)
#édition de la carte de base----------------------------------------------------
base9 - Echelle de la carte
Element primordial de votre carte, l’échelle est ajuster en fonction du niveau de zoom.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl()%>% #ajout du basculement en mode plein écran
addSearchOSM()%>% #ajout de la barre de recherche Openstreetmap
addScaleBar( #ajout de l'échelle
position = "bottomleft" #positionnement de l'échelle en bas à gauche
)
#édition de la carte de base----------------------------------------------------
base10 - Mini carte
Cette option s’avère utile lorsque l’on travail sur un territoire qui manque de repères spatiaux. La minicarte offre un repérage de la zone cartographiée et permet donc à l’utilisateur de se repérer.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl()%>% #ajout du basculement en mode plein écran
addSearchOSM()%>% #ajout de la barre de recherche Openstreetmap
addMiniMap(
toggleDisplay = FALSE) # posibilité de réduite la minimap
#édition de la carte de base----------------------------------------------------
base
11 - Set-up (zoom et position)
Cette élément n’est pas optionnel et doit impérativement être défini à moins que l’on utiliser la fonction BBox que l’onverra dans un autre tutoriel. La fonction setview permet le parametrage du point de centrage de la carte ainsi que son niveau de zoom. La fonction bbox, elle permet de définir par calcul un cardre autour de points positionnés sur la carte.
library(leaflet) #package de base
library(leafem) #package de widgets dont "addMouseCoordinates"
library(leaflet.extras)
base<- leaflet() %>% #utilisation de leaflet
addTiles() %>% # Ajout de la carte openstreet map par défaut
#ajout d'un marker de type balise gps
addMarkers(lng=1.443370 , lat=43.604333, #ajout d'une balise aux cooordonnées gps de la place du capitole à Toulouse
label="place du capitole", #ajout du texte qui apparait au survole de la balise
popup="Toulouse, place du capitole")%>% #ajout du texte qui apparait au clic souris sur la balise
#ajout d'un marker de type cercle
addCircleMarkers(radius =50, #taille du cercle
stroke = FALSE,
fillOpacity = 0.4, #opacité du remplissage du cercle
lng=1.443370 , lat=43.604333, #position gps du cercle
label = " mon cercle", #titre du cercle
labelOptions =
labelOptions(noHide = F, # F pour cacher automatiquement le titre du cercle, T pour le concerver à l'affichage
direction = "bottom", #position du titre par rapport au centre du cercle...ici ... en dessous
style = list(
"color" = "black", # couleur tu titre du cercle
"font-family" = "arial", #police de character du titre
"font-style" = "bold",
"box-shadow" = "3px 3px rgba(0,0,0,0.25)", # taille de la boite de titre de l'ombre
"font-size" = "12px" #taille de la police de character
)))%>%
addMouseCoordinates()%>% # Ajout des coordonnées GPS du pointeur de la souris
addResetMapButton()%>% # ajout du bouton "reset" pour recentrage carte
addFullscreenControl()%>% #ajout du basculement en mode plein écran
addSearchOSM()%>% #ajout de la barre de recherche Openstreetmap
addMiniMap(
toggleDisplay = FALSE) %>% # posibilité de réduite la minimap
setView(lng = 1.4437, lat = 43.6043, zoom = 12)
#édition de la carte de base----------------------------------------------------
base
12 - Titre (HTML)
Il y a différentes modalités pour intégrer un titre sur une carte leaflet, mais cette version et celle qui me parait la plus pertinente même si elle demeure plus complexe en ce qui concerne son écriture. Le fait de définir un format HTML ouvre à de nombreuses possibilités en terme de mise en page (fond, taille de police, police de caractères,…) et chose importante cela permet l’insertion du logo de l’établissement si besoin. Vous comprendrez rapidement que l’on peut aller bien plus loin avec cette fonction….
#chargement des packages necessaires
library(htmlwidgets)
library(htmltools)
# définition des parametres du bandeau de titre
tag.map.title <- tags$style(HTML("
.leaflet-control.map-title {
transform: translate(-50%,20%);
position: topright;
left: 50%;
text-align: center;
padding-left: 10px;
padding-right: 10px;
background: rgba(50, 111, 168,0.5);
#font-weight: bold;
font-size: 18px;
color: white;
}
"))
Titre_carte <- tags$div(
tag.map.title, HTML("<table><tr>
<td align=center><b> MA DEMO de CARTOGRAPHIE</b> </td>
<td><img src='http://www.freepngclipart.com/download/leaf/85251-leaf-green-euclidean-vector-design-logo.png' alt='Image Load Error' width='180' height='100'> </td></tr></table>") # ajout du titre de la carte et d'un lien vers un logo
)
b1<- base %>%
addControl(Titre_carte, position = "topright")
#édition de la carte b1----------------------------------------------------
b1