Update app.R

app.R

@@ -9,8 +9,7 @@ library(sf)
 library(rnaturalearth)
 library(rnaturalearthdata)
 library(countrycode)
-library(ggplot2)
-library(ggiraph)  # For interactive hover tooltips and selections
+library(leaflet)     # <-- New: for OpenStreetMap-based map
 
 # =============================
 #            UI
@@ -43,9 +42,7 @@ ui <- dashboardPage(
       )
     ),
     
-    # ---- Here is the minimal "Share" button HTML + JS inlined in Shiny ----
-    # We wrap it in tags$div(...) and tags$script(HTML(...)) so it is recognized
-    # by Shiny. You can adjust the styling or placement as needed.
+    # ---- Minimal "Share" button HTML + JS inlined ----
     tags$div(
       style = "text-align: left; margin: 1em 0 1em 2em;",
       HTML('
@@ -76,7 +73,6 @@ ui <- dashboardPage(
           <strong>Share</strong>
         </button>
       '),
-      # Insert the JS as well
       tags$script(
         HTML("
           (function() {
@@ -231,7 +227,7 @@ ui <- dashboardPage(
             solidHeader = TRUE,
             div(
               class = "map-container",
-              girafeOutput("cartogramPlot", width = "100%", height = "100%")
+              leafletOutput("cartogramPlot", width = "100%", height = "100%")
             )
           )
         ),
@@ -248,7 +244,6 @@ ui <- dashboardPage(
         )
       ),
       
-      # -- 2nd row: citation spanning the full width below --
       fluidRow(
         column(
           width = 9,
@@ -300,100 +295,92 @@ server <- function(input, output, session) {
       ))
   })
   
-  # 3. Read/prepare world map shapefile
+  # 3. Read/prepare world map shapefile (still from Natural Earth),
+  #    but transform to lat/lon (EPSG:4326) to align with Leaflet.
   world_sf <- reactive({
     ne_countries(scale = "medium", returnclass = "sf") %>%
       dplyr::select(name, iso_a3, pop_est, geometry) %>%
-      st_transform(crs = "ESRI:54009")  # Mollweide projection
+      st_transform(crs = 4326)  # Leaflet requires lat/lon
   })
   
-  # 4. Create the joined sf object (currently just a regular map)
+  # 4. Create the joined sf object
   cartogram_sf <- reactive({
     merged_sf <- world_sf() %>%
       left_join(rankings_data(), by = "iso_a3")
-    merged_sf <- merged_sf[!is.na(merged_sf$Overall),]
-    merged_sf
+    # Filter out countries with no data in "Overall"
+    merged_sf[!is.na(merged_sf$Overall), ]
   })
   
-  # 5. Render the interactive map with ggiraph
-  output$cartogramPlot <- renderGirafe({
-    req(input$indexChoice)
+  # 5. Create the Leaflet map with OSM tiles
+  #    and dynamically add polygons based on index choice.
+  
+  # Initialize the leaflet map (empty) so it renders once:
+  output$cartogramPlot <- renderLeaflet({
+    leaflet() %>%
+      addProviderTiles("OpenStreetMap.Mapnik") %>%
+      setView(lng = 0, lat = 20, zoom = 2)  # A broad global view
+  })
+  
+  # Observe changes in the chosen index and update polygons
+  observeEvent(input$indexChoice, {
     
     plot_data <- cartogram_sf()
     index_col <- input$indexChoice
     
-    # Build a tooltip string (same as data to display on click)
-    plot_data$tooltip_text <- paste0(
-      "<b>Country:</b> ", plot_data$Country, "<br/>",
-      "<b>Overall:</b> ", ifelse(!is.na(plot_data$Overall), plot_data$Overall, "N/A"), "<br/>",
-      "<b>Representation Gap:</b> ", ifelse(!is.na(plot_data$RepresentationGap), plot_data$RepresentationGap, "N/A"), "<br/>",
-      "<b>Ethnicity:</b> ", ifelse(!is.na(plot_data$Ethnicity), plot_data$Ethnicity, "N/A"), "<br/>",
-      "<b>Gender:</b> ", ifelse(!is.na(plot_data$Gender), plot_data$Gender, "N/A"), "<br/>",
-      "<b>Religion:</b> ", ifelse(!is.na(plot_data$Religion), plot_data$Religion, "N/A"), "<br/>",
-      "<b>Language:</b> ", ifelse(!is.na(plot_data$Language), plot_data$Language, "N/A")
+    # Build a color palette based on the chosen index
+    pal <- colorNumeric(
+      palette = "viridis",
+      domain = plot_data[[index_col]],
+      na.color = "white"
     )
     
-    p <- ggplot(plot_data) +
-      geom_sf_interactive(
-        aes(
-          fill = get(index_col),
-          tooltip = tooltip_text,
-          data_id = iso_a3  # Enable selection with unique identifier
-        ),
-        color = "grey20",
-        size = 0.1
-      ) +
-      scale_fill_viridis_c(option = "D", na.value = "white") +
-      coord_sf(expand = FALSE) +
-      theme_void(base_size = 14, base_family = "sans") +
-      labs(
-        fill = paste(index_col, "Index"),
-        title = "Country-level Representation",
-        subtitle = "Map Colored by Selected Representation Index",
-        caption = "Source: Global Leadership Project (GLP) & Natural Earth"
-      ) +
-      theme(
-        plot.title      = element_text(face = "bold", hjust = 0.5, size = 20),
-        plot.subtitle   = element_text(hjust = 0.5, size = 14),
-        plot.caption    = element_text(hjust = 1, size = 10),
-        legend.position = "bottom",
-        legend.direction = "horizontal",
-        legend.key.width = unit(2, "cm")
-      )
+    # Construct a label/popup-like text
+    # (You could use labelOptions, popup, or separate tooltips)
+    # We'll just use label here for quick hover info:
+    labels <- sprintf(
+      "<strong>Country:</strong> %s<br/>
+       <strong>%s Index:</strong> %s",
+      plot_data$Country,
+      index_col,
+      ifelse(is.na(plot_data[[index_col]]), "N/A", plot_data[[index_col]])
+    ) %>% lapply(htmltools::HTML)
     
-    girafe(
-      ggobj = p,
-      width_svg  = 10,
-      height_svg = 6,
-      options = list(
-        opts_tooltip(
-          css = "background-color: white; 
-                 font-family: 'OCR A Extended', monospace; 
-                 color: black;"
-        ),
-        opts_selection(type = "single"),  # Single selection: one country at a time
-        opts_zoom(min = 1, max = 10),           # <-- Enables zooming
-        opts_toolbar(position = "topright")    # <-- Adds a small toolbar
+    leafletProxy("cartogramPlot", data = plot_data) %>%
+      clearShapes() %>%
+      addPolygons(
+        fillColor = ~pal(get(index_col)),
+        fillOpacity = 0.7,
+        color = "grey20",
+        weight = 0.4,
+        layerId = ~iso_a3,
+        label = labels,
+        highlightOptions = highlightOptions(
+          color = "white",
+          weight = 2,
+          bringToFront = TRUE
+        )
       )
-    )
-  })
+  }, ignoreNULL = FALSE)  # Trigger once on startup too
+  
+  # Track which country was clicked
+  selected_iso <- reactiveVal(NULL)
   
-  # Reactive to track the selected country's ISO code
-  selected_iso <- reactive({
-    input$cartogramPlot_selected  # Returns the data_id of the selected country or NULL
+  observeEvent(input$cartogramPlot_shape_click, {
+    click <- input$cartogramPlot_shape_click
+    if (!is.null(click$id)) {
+      selected_iso(click$id)
+    }
   })
   
   # Reactive to fetch the selected country's data
   selected_data <- reactive({
-    if (is.null(selected_iso())) {
-      return(NULL)
-    } else {
-      rankings_data() %>%
-        filter(iso_a3 == selected_iso())
-    }
+    iso <- selected_iso()
+    if (is.null(iso)) return(NULL)
+    rankings_data() %>%
+      filter(iso_a3 == iso)
   })
   
-  # Render the selected country data below the map
+  # Render the selected country data in the box
   output$selectedCountryData <- renderUI({
     if (is.null(selected_data())) {
       HTML("<p>Select a country by clicking on the map.</p>")
@@ -416,4 +403,4 @@ server <- function(input, output, session) {
 # =============================
 #   Launch the Shiny App
 # =============================
-shinyApp(ui = ui, server = server)
+shinyApp(ui = ui, server = server)