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());
      });
    }
  ")