This is an R Markdown Notebook. When you execute code within the notebook, the results appear beneath the code.
Ce script permet de visualiser les départements français dans une carte interactive avec Leaflet. Les polygones sont colorés selon leur superficie grâce à une palette adaptée. Il inclut deux fonds de carte (OpenStreetMap et IGN) avec un contrôle de couches. Chaque département affiche une infobulle contenant son nom et sa superficie. Un effet de surbrillance améliore l’interaction utilisateur au survol. Une légende dynamique aide à lire la variation des superficies. Des outils avancés (échelle, coordonnées en direct, console zoom/emprise) enrichissent l’expérience. Le code illustre une intégration complète entre données spatiales et interface web.
library(leaflet)
## Warning: le package 'leaflet' a été compilé avec la version R 4.4.3
library(sf)
## Warning: le package 'sf' a été compilé avec la version R 4.4.3
## Linking to GEOS 3.13.0, GDAL 3.10.1, PROJ 9.5.1; sf_use_s2() is TRUE
library(htmlwidgets)
## Warning: le package 'htmlwidgets' a été compilé avec la version R 4.4.3
# === 1. Charger la couche GPKG ===
depts_path <- "C:/Users/aguene/Downloads/abdou_modul_3/rstudio/depts.gpkg"
depts <- st_read(depts_path, quiet = TRUE)
# === 2. Reprojeter si besoin (EPSG:4326) ===
depts <- st_transform(depts, 4326)
# === 3. Palette de couleurs basée sur la colonne 'sup' ===
pal <- colorNumeric(palette = "Greens", domain = depts$sup)
# === 4. Créer la carte leaflet ===
leaflet(data = depts) %>%
setView(lng = 2.2137, lat = 46.2276, zoom = 6) %>%
# Fond de carte
addTiles(group = "OpenStreetMap") %>%
addWMSTiles(
baseUrl = "https://wxs.ign.fr/essentiels/geoportail/r/wms",
layers = "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
options = WMSTileOptions(format = "image/png", transparent = TRUE),
attribution = "IGN Géoportail",
group = "IGN"
) %>%
# Polygones des départements
addPolygons(
fillColor = ~pal(sup),
fillOpacity = 0.8,
color = "black",
weight = 1,
label = ~NOM_DEP,
popup = ~paste0("<b>", NOM_DEP, "</b><br>Superficie : ", round(sup, 2), " km²"),
highlightOptions = highlightOptions(
weight = 3,
color = "gray",
fillOpacity = 0.4,
bringToFront = TRUE
),
group = "Départements"
) %>%
# Légende
addLegend(
pal = pal,
values = ~sup,
title = "Superficie (km²)",
position = "bottomright"
) %>%
# Contrôle de couches
addLayersControl(
baseGroups = c("OpenStreetMap", "IGN"),
overlayGroups = c("Départements"),
options = layersControlOptions(collapsed = FALSE)
) %>%
# JavaScript pour interaction avancée
onRender("
function(el, x) {
var map = this;
// Ajout de l'échelle
L.control.scale({position: 'bottomleft', imperial: false}).addTo(map);
// Affichage des coordonnées de la souris
var coordsControl = L.control({position: 'bottomright'});
coordsControl.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'mouse-coords');
this._div.style.padding = '5px';
this._div.style.background = 'rgba(255,255,255,0.7)';
this._div.style.fontFamily = 'Arial, sans-serif';
this._div.style.fontSize = '12px';
this._div.style.minWidth = '140px';
this.update();
return this._div;
};
coordsControl.update = function(latlng) {
this._div.innerHTML = latlng ?
'<b>Coordonnées :</b><br>Lat : ' + latlng.lat.toFixed(5) +
'<br>Lng : ' + latlng.lng.toFixed(5) :
'Déplacez la souris sur la carte';
};
coordsControl.addTo(map);
map.on('mousemove', function(e) {
coordsControl.update(e.latlng);
});
map.on('mouseout', function(e) {
coordsControl.update();
});
// Gestion d'événements
map.on('zoomend', function() {
console.log('Zoom terminé. Niveau de zoom actuel : ' + map.getZoom());
});
map.on('moveend', function() {
var b = map.getBounds();
console.log('Emprise : ' + b.toBBoxString());
});
}
")