Upload 2 files

depth_interactive_map_alpha.R

@@ -248,6 +248,35 @@ POBREZA_COLS <- list(
                            breaks = c(2, 5, 10, 20, 35, 55))
 )
 
+# Temporal-strip layers. Each entry drives the bottom-of-map year filter:
+#   year_col  -- the column carrying the integer year (used in WHERE / GROUP)
+#   year_expr -- optional: full DuckDB expression when the year isn't a column
+#                directly (e.g. PAM stores DATE; we extract date_part('year', ...))
+#   agg       -- aggregation used in the strip chart (default COUNT(*); PAM
+#                sums pam_n so the line tracks total events not muni-row count)
+#   color     -- line/series colour matching the map layer paint
+#   kind      -- "point" (client-side set_filter) or "polygon" (server re-query)
+TEMPORAL_LAYERS <- list(
+  "migrants-pts" = list(label = "Missing migrants", color = COL_YEL,
+                        table = "migrants",     year_col = "incident_year",
+                        kind  = "point"),
+  "ocved-pts"    = list(label = "OCVED violence",  color = COL_AMBER,
+                        table = "ocved_events", year_col = "year",
+                        kind  = "point"),
+  "ged-pts"      = list(label = "GED conflict",    color = COL_LIGHT_BLUE,
+                        table = "ged_events",   year_col = "year",
+                        kind  = "point"),
+  "pam-choro"    = list(label = "PAM events",      color = COL_COUNT,
+                        table = "dim_pam_mun",
+                        year_col  = "yr",
+                        year_expr = "CAST(date_part('year', date) AS INTEGER)",
+                        agg       = "SUM(pam_n)",
+                        kind      = "polygon")
+)
+# Outer bounds for the slider (union across the four tables, with a safety
+# margin). Inner per-layer ranges are computed at startup from the data.
+TEMPORAL_RANGE <- c(2010L, 2026L)
+
 #######################################################################################
 # WEB_SQL -- canonical query templates (single source for Shiny + docs converter)
 #   Static templates use {placeholder} tokens substituted by web_sql().
@@ -539,6 +568,33 @@ WEB_SQL_TEMPLATES <- list(
      FROM dim_fosas_mun
      WHERE CVEGEO IN ({cvegeo_list})",
 
+  # --- Temporal strip support -----------------------------------------------
+  # Counts per year for each of the 4 temporal layers. Used to draw the
+  # histogram in the strip. `yr_expr` is either the raw year column or a
+  # date_part() expression; `agg` is COUNT(*) for point tables / SUM(pam_n)
+  # for PAM. Cached at startup -- they don't change.
+  ts_yr_counts =
+    "SELECT {yr_expr} AS yr, {agg} AS n
+     FROM {tbl}
+     WHERE {yr_col_or_expr} IS NOT NULL
+     GROUP BY yr HAVING yr >= 2000 AND yr <= 2030
+     ORDER BY yr",
+
+  # Year-window-filtered PAM aggregate (used when the user moves the strip
+  # handles). Same shape as src_pam but with a WHERE on date_part(year).
+  src_pam_year =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            COALESCE(CAST(p.pam_total AS INTEGER), 0) AS pam_n,
+            c.wkt
+     FROM crime_mun c
+     LEFT JOIN (
+       SELECT CVEGEO, SUM(pam_n) AS pam_total
+       FROM dim_pam_mun
+       WHERE date IS NOT NULL
+         AND CAST(date_part('year', date) AS INTEGER) BETWEEN {yr_lo} AND {yr_hi}
+       GROUP BY CVEGEO
+     ) p ON c.CVEGEO = p.CVEGEO",
+
   temporal_yr_all =
     "SELECT {yr_expr} AS yr, COUNT(*) AS n FROM {tbl}
      WHERE {yr_col} IS NOT NULL
@@ -775,7 +831,23 @@ ddb_minmax <- function(con, tbl, col, filter_zero = TRUE) {
       pop    = ddb_minmax(con, "crime_mun",      "poblacion",                  TRUE),
       fosas  = ddb_minmax(con, "dim_fosas_mun",  "fosas_total",                TRUE),
       envipe = ddb_minmax(con, "state_polygons", "perception_insecurity_perc", FALSE)
-    )
+    ),
+    # Per-year counts for each temporal-strip layer. Each entry is a tidy
+    # data.frame(yr, n) or NULL when the table isn't available.
+    temporal = lapply(TEMPORAL_LAYERS, function(info) {
+      yr_expr   <- info$year_expr %||% info$year_col
+      yr_chk    <- info$year_col   %||% "yr"
+      yr_chk    <- if (is.null(info$year_expr)) info$year_col else info$year_expr
+      agg_expr  <- info$agg %||% "COUNT(*)"
+      sql <- glue::glue_data(
+        list(yr_expr = yr_expr, agg = agg_expr,
+             tbl = info$table, yr_col_or_expr = yr_chk),
+        WEB_SQL_TEMPLATES$ts_yr_counts,
+        .open = "{", .close = "}"
+      )
+      tryCatch(DBI::dbGetQuery(con, sql),
+               error = function(e) { message("[cache] temporal ", info$label, ": ", e$message); NULL })
+    })
   )
 }
 .APP_CACHE <- .load_app_cache()
@@ -1297,6 +1369,11 @@ LUCIDE_JS <- tags$head(
               description: 'Tilt the map into a 3D perspective view.',
               side: 'bottom', align: 'end'
           }},
+          { element: '#tooltip-toggle-btn', popover: {
+              title: 'Hover tooltips',
+              description: 'Toggle the dark info bubble that appears when you hover a municipality, grid cell, or point. Useful when you want to read the map without it popping up over every feature.',
+              side: 'bottom', align: 'end'
+          }},
           { element: '#layer-ctrl-body', popover: {
               title: 'Data layers',
               description: 'Turn indicators on and off here. They are grouped into Hazards, Exposure and Vulnerability. Each layer has a short description and its own legend.',
@@ -1363,15 +1440,163 @@ LUCIDE_JS <- tags$head(
         var isOn     = !!(input && input.checked);
         var primary  = wrap.querySelector(':scope > .acc-legend');
         if (primary) primary.classList.toggle('legend-visible', isOn);
-        // Variant legends (categorical chips) -- gate visibility on toggle ON
         wrap.querySelectorAll(':scope > .acc-legend-extra').forEach(function(v) {
           v.classList.toggle('legend-visible', isOn);
         });
       });
-      // Re-apply the active-variant marker so the right extras stay visible.
       if (typeof refreshLegendVariants === 'function') refreshLegendVariants();
       if (typeof Shiny !== 'undefined')
         Shiny.setInputValue('active_layers', checked, { priority: 'event' });
+      // Update temporal strip visibility + which layers it's tracking
+      if (typeof syncTemporalStrip === 'function') syncTemporalStrip(checked);
+    }
+
+    // -- Temporal strip: bottom-of-map year-range filter ------------------------
+    // _temporal.active holds the LAST 2 toggled-on temporal layers (most recent
+    // first). The chart and the dual y-axis follow them. yrLo/yrHi drive the
+    // map filter for those layers (client-side for points, server for PAM).
+    var TEMPORAL_LAYER_IDS = ['migrants-pts','ocved-pts','ged-pts','pam-choro'];
+    var TEMPORAL_POINT_COL = {
+      'migrants-pts': 'incident_year',
+      'ocved-pts':    'year',
+      'ged-pts':      'year'
+    };
+    var _temporal = {
+      active: [],   // most-recent-first
+      yrLo: null,
+      yrHi: null,
+      playing: false,
+      playTimer: null
+    };
+
+    function syncTemporalStrip(checkedIds) {
+      var prevActive = _temporal.active.slice();
+      var nowOn = (checkedIds || []).filter(function(id) {
+        return TEMPORAL_LAYER_IDS.indexOf(id) !== -1;
+      });
+      // Keep MRU order: anything newly turned on goes to the front; anything
+      // turned off drops out. Then trim to the most recent 2.
+      var stillOn = prevActive.filter(function(id) { return nowOn.indexOf(id) !== -1; });
+      var newOnes = nowOn.filter(function(id)   { return stillOn.indexOf(id) === -1; });
+      _temporal.active = newOnes.concat(stillOn).slice(0, 2);
+      var strip = document.getElementById('temporal-strip');
+      if (strip) strip.style.display = _temporal.active.length ? 'flex' : 'none';
+      // Tell Shiny which layers the chart should draw (server reactive)
+      if (typeof Shiny !== 'undefined') {
+        Shiny.setInputValue('temporal_active', _temporal.active, { priority: 'event' });
+      }
+      // Re-apply current year filter to the newly-active layers
+      pushTemporalFilter();
+    }
+
+    function _getMap() {
+      var widget = window.HTMLWidgets && HTMLWidgets.find('#map');
+      if (!widget) return null;
+      return widget.map || (widget.getMap && widget.getMap()) || null;
+    }
+
+    function applyTemporalFilterClient(layerId, yrLo, yrHi) {
+      var m = _getMap();
+      if (!m || !m.getLayer || !m.getLayer(layerId)) return;
+      var col = TEMPORAL_POINT_COL[layerId];
+      if (!col) return;
+      // Full-range = clear the filter so feature culling is fastest
+      var startMin = parseInt(document.getElementById('temporal-start').min, 10);
+      var endMax   = parseInt(document.getElementById('temporal-end').max, 10);
+      if (yrLo <= startMin && yrHi >= endMax) {
+        m.setFilter(layerId, null);
+      } else {
+        m.setFilter(layerId, ['all',
+          ['>=', ['to-number', ['get', col]], yrLo],
+          ['<=', ['to-number', ['get', col]], yrHi]
+        ]);
+      }
+    }
+
+    function pushTemporalFilter() {
+      var startEl = document.getElementById('temporal-start');
+      var endEl   = document.getElementById('temporal-end');
+      if (!startEl || !endEl) return;
+      var yrLo = parseInt(startEl.value, 10);
+      var yrHi = parseInt(endEl.value,   10);
+      if (yrLo > yrHi) { var t = yrLo; yrLo = yrHi; yrHi = t; }
+      _temporal.yrLo = yrLo; _temporal.yrHi = yrHi;
+      // Client: apply for each active POINT layer
+      _temporal.active.forEach(function(id) {
+        if (TEMPORAL_POINT_COL[id]) applyTemporalFilterClient(id, yrLo, yrHi);
+      });
+      // Server: send range so PAM can re-query if it's active
+      if (typeof Shiny !== 'undefined') {
+        Shiny.setInputValue('temporal_filter', {
+          start: yrLo, end: yrHi, active: _temporal.active, ts: Date.now()
+        }, { priority: 'event' });
+      }
+    }
+
+    function onTemporalSliderInput() {
+      var startEl = document.getElementById('temporal-start');
+      var endEl   = document.getElementById('temporal-end');
+      var fill    = document.getElementById('temporal-slider-fill');
+      var label   = document.getElementById('temporal-year-label');
+      if (!startEl || !endEl) return;
+      var lo = parseInt(startEl.value, 10);
+      var hi = parseInt(endEl.value,   10);
+      // Prevent crossing handles
+      if (lo > hi) {
+        if (document.activeElement === startEl) { hi = lo; endEl.value = hi; }
+        else                                     { lo = hi; startEl.value = lo; }
+      }
+      if (label) label.textContent = lo + ' — ' + hi;
+      if (fill) {
+        var min = parseInt(startEl.min, 10);
+        var max = parseInt(startEl.max, 10);
+        var span = (max - min) || 1;
+        fill.style.left  = (((lo - min) / span) * 100) + '%';
+        fill.style.right = ((1 - ((hi - min) / span)) * 100) + '%';
+      }
+      pushTemporalFilter();
+    }
+
+    function toggleTemporalPlay() {
+      _temporal.playing = !_temporal.playing;
+      var btn = document.getElementById('temporal-play-btn');
+      var icon = btn ? btn.querySelector('i') : null;
+      if (icon) {
+        icon.setAttribute('data-lucide', _temporal.playing ? 'pause' : 'play');
+        if (window.lucide) lucide.createIcons();
+      }
+      if (_temporal.playing) {
+        _temporal.playTimer = setInterval(function() {
+          var endEl = document.getElementById('temporal-end');
+          if (!endEl) return;
+          var max = parseInt(endEl.max, 10);
+          var cur = parseInt(endEl.value, 10);
+          var next = cur + 1;
+          if (next > max) {
+            // Loop back to start: reset both handles
+            var startEl = document.getElementById('temporal-start');
+            var min = parseInt(endEl.min, 10);
+            if (startEl) startEl.value = min;
+            endEl.value = min + 1;
+          } else {
+            endEl.value = next;
+          }
+          onTemporalSliderInput();
+        }, 600);
+      } else if (_temporal.playTimer) {
+        clearInterval(_temporal.playTimer);
+        _temporal.playTimer = null;
+      }
+    }
+
+    function resetTemporalRange() {
+      var startEl = document.getElementById('temporal-start');
+      var endEl   = document.getElementById('temporal-end');
+      if (!startEl || !endEl) return;
+      startEl.value = startEl.min;
+      endEl.value   = endEl.max;
+      if (_temporal.playing) toggleTemporalPlay();
+      onTemporalSliderInput();
     }
 
     // Selects which legend variant is visible for each layer family. Called
@@ -2438,6 +2663,58 @@ ui <- page_fillable(
 
       maplibreOutput("map", width = "100%", height = "100%"),
 
+      # --- Temporal strip (bottom-of-map, hidden until a temporal layer is on)
+      # Built for migrants / OCVED / GED / PAM. Filter applies via JS for
+      # point layers and via server re-query for PAM (polygon).
+      div(id = "temporal-strip", class = "temporal-strip",
+          style = "display:none;",
+          role  = "region",
+          `aria-label` = "Temporal year-range filter",
+          div(class = "temporal-strip-chart",
+              plotOutput("temporal_strip_chart",
+                         width = "100%", height = "85px")),
+          div(class = "temporal-strip-controls",
+              tags$button(id = "temporal-play-btn",
+                          type = "button",
+                          class = "temporal-play-btn",
+                          onclick = "toggleTemporalPlay()",
+                          `aria-label` = "Play or pause the temporal animation",
+                          title = "Play / pause",
+                          HTML('<i data-lucide="play" style="width:16px;height:16px;stroke-width:2"></i>')),
+              div(class = "temporal-slider-wrap",
+                  div(class = "temporal-slider-track"),
+                  div(id = "temporal-slider-fill",
+                      class = "temporal-slider-fill"),
+                  tags$input(type  = "range",
+                             id    = "temporal-start",
+                             class = "temporal-slider-input temporal-slider-start",
+                             min   = TEMPORAL_RANGE[1],
+                             max   = TEMPORAL_RANGE[2],
+                             step  = "1",
+                             value = TEMPORAL_RANGE[1],
+                             oninput = "onTemporalSliderInput()",
+                             `aria-label` = "Start year"),
+                  tags$input(type  = "range",
+                             id    = "temporal-end",
+                             class = "temporal-slider-input temporal-slider-end",
+                             min   = TEMPORAL_RANGE[1],
+                             max   = TEMPORAL_RANGE[2],
+                             step  = "1",
+                             value = TEMPORAL_RANGE[2],
+                             oninput = "onTemporalSliderInput()",
+                             `aria-label` = "End year")),
+              tags$span(id = "temporal-year-label",
+                        class = "temporal-year-label",
+                        paste0(TEMPORAL_RANGE[1], " — ", TEMPORAL_RANGE[2])),
+              tags$button(id = "temporal-reset-btn",
+                          type = "button",
+                          class = "temporal-reset-btn",
+                          onclick = "resetTemporalRange()",
+                          `aria-label` = "Reset to full range",
+                          title = "Reset to all years",
+                          "All"))
+      ),
+
       # --- Accordion layer panel (bottom-left) --------------------------------
       tags$section(class = "layer-ctrl-panel",
           role         = "region",
@@ -2765,12 +3042,22 @@ server <- function(input, output, session) {
     list("case", list("==", list("get", col), 0), "rgba(0,0,0,0)", inner)
   }
 
+  # Wrap any paint expression so that cells whose column is NULL / missing
+  # render fully transparent (instead of the lightest palette stop, which
+  # makes "no data" indistinguishable from "minimum data").
+  na_transparent <- function(col, expr) {
+    list("case",
+         list("==", list("typeof", list("get", col)), "null"), "rgba(0,0,0,0)",
+         expr)
+  }
+
   giim_match_expr <- function() {
     pairs <- unlist(
       lapply(names(GIIM_COLORS), function(nm) list(nm, unname(GIIM_COLORS[[nm]]))),
       recursive = FALSE
     )
-    c(list("match", list("get", "giim_mun")), pairs, list("#cccccc"))
+    # No-match fallback is transparent so munis with NULL giim_mun show no fill.
+    c(list("match", list("get", "giim_mun")), pairs, list("rgba(0,0,0,0)"))
   }
 
   # Categorical paint expression for infra-pts (colour by normalised category).
@@ -2797,7 +3084,8 @@ server <- function(input, output, session) {
 
   desap_qstep_expr <- function() {
     breaks <- qb$desap %||% c(5, 15, 40, 80, 150)
-    step_expr("desap_per_100k", breaks, DESAP_PAL)
+    na_transparent("desap_per_100k",
+                   step_expr("desap_per_100k", breaks, DESAP_PAL))
   }
 
   pam_qstep_expr <- function() {
@@ -2811,7 +3099,7 @@ server <- function(input, output, session) {
   pop_grid_expr <- function(pop_type = "POBTOT", mode = "grid") {
     info   <- POP_COLS[[pop_type]] %||% POP_COLS[["POBTOT"]]
     breaks <- if (identical(mode, "mun")) info$breaks_mun else info$breaks_grid
-    step_expr(info$col, breaks, POP_PAL)
+    na_transparent(info$col, step_expr(info$col, breaks, POP_PAL))
   }
 
   # Envipe on the GRID: each grid cell carries its containing state's
@@ -2819,11 +3107,12 @@ server <- function(input, output, session) {
   # grid query). The sub-type radio swaps the column the step expression reads.
   envipe_grid_expr <- function(envipe_type = "insecurity") {
     info <- ENVIPE_COLS[[envipe_type]] %||% ENVIPE_COLS[["insecurity"]]
-    step_expr(info$col, info$breaks, ENVIPE_PAL)
+    na_transparent(info$col, step_expr(info$col, info$breaks, ENVIPE_PAL))
   }
 
   # PATP-CONEVAL on the GRID. Each sub-type is either "num" (step paint via
   # TRY_CAST'd column) or "cat" (match paint over a fixed Spanish-label palette).
+  # In both cases, NULL / unmatched values render fully transparent.
   patp_grid_expr <- function(patp_type = "t_part") {
     info <- PATP_COLS[[patp_type]] %||% PATP_COLS[["t_part"]]
     if (identical(info$kind, "cat")) {
@@ -2834,16 +3123,18 @@ server <- function(input, output, session) {
         lapply(names(pal), function(nm) list(nm, unname(pal[[nm]]))),
         recursive = FALSE
       )
-      c(list("match", list("get", info$col)), pairs, list("#bdbdbd"))
+      # No-match fallback transparent; wrap in na_transparent in case the col is NULL
+      na_transparent(info$col,
+        c(list("match", list("get", info$col)), pairs, list("rgba(0,0,0,0)")))
     } else {
-      step_expr(info$col, info$breaks, PATP_PAL)
+      na_transparent(info$col, step_expr(info$col, info$breaks, PATP_PAL))
     }
   }
 
   # Pobreza (CONEVAL 2020). Two numeric sub-types only.
   pobreza_grid_expr <- function(pobreza_type = "pobreza_pct") {
     info <- POBREZA_COLS[[pobreza_type]] %||% POBREZA_COLS[["pobreza_pct"]]
-    step_expr(info$col, info$breaks, POBREZA_PAL)
+    na_transparent(info$col, step_expr(info$col, info$breaks, POBREZA_PAL))
   }
 
   # Return the fill-color expression for a given original layer ID
@@ -4027,6 +4318,114 @@ server <- function(input, output, session) {
   output$temporal_ocved <- make_temporal_yr("ocved_events", "year", COL_AMBER)
   output$temporal_ged   <- make_temporal_yr("ged_events",   "year", COL_LIGHT_BLUE)
 
+  # --- Temporal strip chart (bottom-of-map year-range filter) ---------------
+  # Renders up to 2 lines from .APP_CACHE$temporal, one per active temporal
+  # layer (active list driven by input$temporal_active). When 2 are active,
+  # the chart has dual y-axes (left = first/primary, right = secondary)
+  # because event magnitudes differ wildly (PAM ~1.6M vs migrants ~6k).
+  output$temporal_strip_chart <- renderPlot({
+    active <- input$temporal_active %||% character(0)
+    if (length(active) == 0) return(NULL)
+    yr_range  <- TEMPORAL_RANGE
+    rect_df   <- {
+      pl <- input$temporal_filter
+      if (is.null(pl)) NULL
+      else data.frame(xmin = (pl$start %||% yr_range[1]) - 0.5,
+                      xmax = (pl$end   %||% yr_range[2]) + 0.5)
+    }
+    pull_df <- function(id) {
+      df <- .APP_CACHE$temporal[[id]]
+      if (is.null(df) || nrow(df) == 0) return(NULL)
+      info <- TEMPORAL_LAYERS[[id]]
+      data.frame(yr = df$yr, n = df$n, layer = info$label,
+                 color = info$color, stringsAsFactors = FALSE)
+    }
+    primary   <- pull_df(active[1])
+    secondary <- if (length(active) >= 2) pull_df(active[2]) else NULL
+    if (is.null(primary)) return(NULL)
+
+    base_thm <- theme_minimal(base_size = 9) +
+      theme(plot.background    = element_rect(fill = "transparent", color = NA),
+            panel.background   = element_rect(fill = "transparent", color = NA),
+            panel.grid         = element_blank(),
+            panel.grid.major.y = element_line(color = "#ffffff20", linewidth = 0.3),
+            axis.title.x       = element_blank(),
+            axis.text.x        = element_text(size = 8, color = "#cbd5e1"),
+            axis.title.y       = element_text(size = 8, color = "#cbd5e1"),
+            axis.text.y        = element_text(size = 7, color = "#94a3b8"),
+            axis.title.y.right = element_text(size = 8, color = "#cbd5e1"),
+            axis.text.y.right  = element_text(size = 7, color = "#94a3b8"),
+            axis.ticks         = element_blank(),
+            legend.position    = "none",
+            plot.margin        = margin(2, 8, 2, 8))
+
+    p <- ggplot()
+    if (!is.null(rect_df))
+      p <- p + geom_rect(data = rect_df,
+                         aes(xmin = xmin, xmax = xmax,
+                             ymin = -Inf,   ymax = Inf),
+                         fill = "#ffffff", alpha = 0.06,
+                         inherit.aes = FALSE)
+
+    if (is.null(secondary)) {
+      p <- p +
+        geom_line(data = primary, aes(x = yr, y = n),
+                  color = primary$color[1], linewidth = 1) +
+        geom_point(data = primary, aes(x = yr, y = n),
+                   color = primary$color[1], size = 1.4) +
+        scale_y_continuous(primary$layer[1])
+    } else {
+      max_p <- max(primary$n,   na.rm = TRUE)
+      max_s <- max(secondary$n, na.rm = TRUE)
+      scale_factor <- if (max_s > 0) max_p / max_s else 1
+      p <- p +
+        geom_line(data = primary, aes(x = yr, y = n),
+                  color = primary$color[1], linewidth = 1) +
+        geom_point(data = primary, aes(x = yr, y = n),
+                   color = primary$color[1], size = 1.4) +
+        geom_line(data = secondary, aes(x = yr, y = n * scale_factor),
+                  color = secondary$color[1], linewidth = 1, linetype = "32") +
+        geom_point(data = secondary, aes(x = yr, y = n * scale_factor),
+                   color = secondary$color[1], size = 1.4) +
+        scale_y_continuous(
+          name     = primary$layer[1],
+          sec.axis = sec_axis(~ . / scale_factor, name = secondary$layer[1]))
+    }
+    p +
+      scale_x_continuous(breaks = scales::pretty_breaks(n = 6),
+                         limits = c(yr_range[1] - 0.5, yr_range[2] + 0.5)) +
+      base_thm
+  }, bg = "transparent", res = 110)
+
+  # PAM year-window re-aggregation: when the strip range changes and PAM is
+  # active, re-query src_pam_year + push the new fill via the proxy. The
+  # current layer is removed and re-added with the year-filtered source.
+  observeEvent(input$temporal_filter, {
+    pl <- input$temporal_filter
+    if (is.null(pl)) return()
+    active <- pl$active %||% character(0)
+    if (!("pam-choro" %in% active) || !isTRUE(lazy_added$pam)) return()
+    yr_lo <- pl$start %||% TEMPORAL_RANGE[1]
+    yr_hi <- pl$end   %||% TEMPORAL_RANGE[2]
+    sf_data <- tryCatch({
+      DBI::dbGetQuery(con,
+        web_sql("src_pam_year", yr_lo = yr_lo, yr_hi = yr_hi)) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("PAM year re-query: ", e$message); NULL })
+    if (is.null(sf_data)) return()
+    maplibre_proxy("map") |>
+      remove_layer("pam-choro") |>
+      add_fill_layer(
+        id           = "pam-choro",
+        source       = sf_data,
+        fill_color   = pam_qstep_expr(),
+        fill_opacity = 0.7,
+        tooltip      = list("concat", "<b>", list("get","municipio"), "</b>",
+                            "<br>Irregular migration events: ",
+                            list("to-string", list("get","pam_n"))))
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
   # --- PAM temporal plot (irregular migration events over time) ---------------
   # dim_pam_mun is municipality-aggregated by date. National = SUM over all
   # munis; selection = SUM over munis in rv$mun_df (CVEGEO list).

styles.css

@@ -2463,3 +2463,162 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
 .acc-legend.acc-legend-hidden-by-variant {
   display: none !important;
 }
+
+/* =========================================================================
+   Temporal strip (bottom-of-map year-range filter)
+   ========================================================================= */
+.temporal-strip {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 950;                    /* below nav (1000) + popovers, above map */
+  background: oklch(15% 0.012 250 / 0.92);
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  border-top: 1px solid oklch(100% 0 0 / 0.08);
+  padding: 6px 14px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: auto;
+}
+
+.temporal-strip-chart {
+  width: 100%;
+}
+.temporal-strip-chart .shiny-plot-output {
+  background: transparent;
+}
+
+.temporal-strip-controls {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.temporal-play-btn,
+.temporal-reset-btn {
+  background: transparent;
+  color: oklch(95% 0 0);
+  border: 1px solid oklch(100% 0 0 / 0.18);
+  cursor: pointer;
+  font-family: var(--font-ui);
+  transition: background var(--t-fast) var(--ease-out),
+              border-color var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out);
+}
+.temporal-play-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.temporal-reset-btn {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+.temporal-play-btn:hover,
+.temporal-reset-btn:hover {
+  background: oklch(100% 0 0 / 0.10);
+  border-color: oklch(100% 0 0 / 0.3);
+}
+.temporal-play-btn:focus-visible,
+.temporal-reset-btn:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+/* ---- Dual-handle range slider ---- */
+.temporal-slider-wrap {
+  position: relative;
+  flex: 1;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+.temporal-slider-track {
+  position: absolute;
+  left: 0; right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 3px;
+  background: oklch(100% 0 0 / 0.2);
+  border-radius: 2px;
+  pointer-events: none;
+}
+.temporal-slider-fill {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 3px;
+  background: var(--c-accent);
+  border-radius: 2px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+.temporal-slider-input {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 24px;
+  background: transparent;
+  pointer-events: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+.temporal-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid oklch(15% 0.012 250);
+  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.4);
+  cursor: pointer;
+  margin-top: 0;
+}
+.temporal-slider-input::-moz-range-thumb {
+  pointer-events: auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid oklch(15% 0.012 250);
+  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.4);
+  cursor: pointer;
+}
+.temporal-slider-input::-webkit-slider-runnable-track,
+.temporal-slider-input::-moz-range-track {
+  background: transparent;
+  border: none;
+}
+/* The 'end' input sits on top of 'start' so dragging the end thumb works at
+   the right edge; pointer-events on the thumb only (above). */
+.temporal-slider-end { z-index: 2; }
+.temporal-slider-start { z-index: 1; }
+
+.temporal-year-label {
+  color: oklch(95% 0 0);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 110px;
+  text-align: center;
+  letter-spacing: -0.01em;
+  flex-shrink: 0;
+}