Méthodologie de carte Clusters avec fond orthophoto

Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see https://quarto.org.

Running Code

When you click the Render button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

1 + 1

[1] 2

You can add options to executable code like this

knitr::opts_chunk$set(echo = TRUE)
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

library(leaflet.extras)

Warning: le package 'leaflet.extras' a été compilé avec la version R 4.4.3

Objectif

Cette carte interactive présente les départements français, ainsi que des villes clusterisées, avec un focus particulier sur Toulouse représentée par une icône personnalisée.

Un fond orthophoto est affiché par défaut, et plusieurs outils d’habillage permettent une lecture intuitive (échelle, coordonnées, retour à la vue initiale, etc.).

Données utilisées

Fichier depts.geojson : contours des départements

Fichier villes.geojson : localisation des villes

Carte interactive

# Chargement des données
villes <- st_read("C:/Users/aguene/Downloads/abdou_modul_3/geojson/villes.geojson", quiet = TRUE)
depts <- st_read("C:/Users/aguene/Downloads/abdou_modul_3/geojson/depts.geojson", quiet = TRUE)

# Reprojection
villes <- st_transform(villes, 4326)
depts <- st_transform(depts, 4326)

# Séparation de Toulouse
toulouse <- villes[villes$NOM == "Toulouse", ]
autres_villes <- villes[villes$NOM != "Toulouse", ]

# Icône pour Toulouse
icon_toulouse <- makeIcon(
  iconUrl = "https://abdouguene.alwaysdata.net/epinglerouge.png",
  iconWidth = 32, iconHeight = 32
)

# Carte leaflet
leaflet() %>%
  setView(lng = 2.2137, lat = 46.2276, zoom = 6) %>%
  addProviderTiles(providers$Esri.WorldImagery, group = "Orthophoto") %>%
  addTiles(group = "OSM") %>%
  addPolygons(data = depts, color = "blue", weight = 2, fill = FALSE, group = "Départements") %>%
  addCircleMarkers(data = autres_villes, radius = 5, color = "#b38f00", stroke = FALSE,
                   fillOpacity = 0.9, label = ~NOM, clusterOptions = markerClusterOptions(), group = "Villes") %>%
  addMarkers(data = toulouse, icon = icon_toulouse, label = ~NOM, group = "Toulouse") %>%
  htmlwidgets::onRender("
    function(el, x) {
      L.control.scale({position: 'bottomleft', imperial: false}).addTo(this);
      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(this);
      this.on('mousemove', function(e) {
        coordsControl.update(e.latlng);
      });
      this.on('mouseout', function(e) {
        coordsControl.update();
      });
    }
  ") %>%
  addEasyButton(easyButton(
    icon = "fa-home",
    title = "Vue initiale",
    onClick = JS("function(btn, map){ map.setView([46.2276, 2.2137], 6); }")
  )) %>%
  addLayersControl(
    baseGroups = c("Orthophoto", "OSM"),
    overlayGroups = c("Départements", "Villes", "Toulouse"),
    options = layersControlOptions(collapsed = FALSE)
  )