implement draggable legend

Author: walkerke

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: mapgl
 Title: Interactive Maps with 'Mapbox GL JS' and 'MapLibre GL JS'
-Version: 0.4.4
-Date: 2026-01-12
+Version: 0.4.4.9000
+Date: 2026-01-13
 Authors@R:
     person(given = "Kyle", family = "Walker", email = "kyle@walker-data.com", role = c("aut", "cre"))
 Description: Provides an interface to the 'Mapbox GL JS' (<https://docs.mapbox.com/mapbox-gl-js/guides>)

R/legends.R

@@ -186,6 +186,7 @@
 #' @param filter_values For interactive legends, the actual data values to filter on. For categorical legends, use this when your display labels differ from the data values (e.g., values = c("Music", "Bar") for display, filter_values = c("music", "bar") for filtering). For continuous legends, provide numeric break values when using formatted display labels (e.g., values = get_legend_labels(scale), filter_values = get_breaks(scale)). If NULL (default), uses values.
 #' @param classification A mapgl_classification object (from step_quantile, step_equal_interval, etc.) to use for the legend. When provided, values and colors will be automatically extracted. For interactive legends, range-based filtering will be used based on the classification breaks.
 #' @param breaks Numeric vector of break points for filtering with classification-based legends. Typically extracted automatically from the classification object. Only needed if you want to override the default breaks.
+#' @param draggable Logical, whether the legend can be dragged to a new position by the user. Default is FALSE.
 #' @export
 add_legend <- function(
   map,
@@ -211,7 +212,8 @@ add_legend <- function(
   filter_column = NULL,
   filter_values = NULL,
   classification = NULL,
-  breaks = NULL
+  breaks = NULL,
+  draggable = FALSE
 ) {
   type <- match.arg(type)
   if (is.null(unique_id)) {
@@ -263,7 +265,8 @@ if (is.null(values) || is.null(colors)) {
         style,
         interactive,
         filter_column,
-        filter_values
+        filter_values,
+        draggable
       )
     } else {
       add_categorical_legend(
@@ -287,7 +290,8 @@ if (is.null(values) || is.null(colors)) {
         interactive,
         filter_column,
         filter_values,
-        breaks
+        breaks,
+        draggable
       )
     }
   }
@@ -317,7 +321,8 @@ add_categorical_legend <- function(
   interactive = FALSE,
   filter_column = NULL,
   filter_values = NULL,
-  breaks = NULL
+  breaks = NULL,
+  draggable = FALSE
 ) {
   # Handle deprecation of circular_patches
   if (!missing(circular_patches) && circular_patches) {
@@ -632,6 +637,9 @@ add_categorical_legend <- function(
     ""
   }
 
+  # Add draggable attribute if draggable is TRUE
+  draggable_attr <- if (draggable) ' data-draggable="true"' else ""
+
   legend_html <- paste0(
     '<div id="',
     unique_id,
@@ -640,6 +648,7 @@ add_categorical_legend <- function(
     '"',
     layer_attr,
     interactive_attr,
+    draggable_attr,
     ">",
     "<h2>",
     legend_title,
@@ -887,7 +896,8 @@ add_continuous_legend <- function(
   style = NULL,
   interactive = FALSE,
   filter_column = NULL,
-  filter_values = NULL
+  filter_values = NULL,
+  draggable = FALSE
 ) {
   if (is.null(unique_id)) {
     unique_id <- paste0("legend-", as.hexmode(sample(1:1000000, 1)))
@@ -972,6 +982,9 @@ add_continuous_legend <- function(
     ""
   }
 
+  # Add draggable attribute if draggable is TRUE
+  draggable_attr <- if (draggable) ' data-draggable="true"' else ""
+
   legend_html <- paste0(
     '<div id="',
     unique_id,
@@ -980,6 +993,7 @@ add_continuous_legend <- function(
     '"',
     layer_attr,
     interactive_attr,
+    draggable_attr,
     ">",
     "<h2>",
     legend_title,

R/legends_compare.R

@@ -24,7 +24,8 @@ add_legend.mapboxgl_compare <- function(
   filter_column = NULL,
   filter_values = NULL,
   classification = NULL,
-  breaks = NULL
+  breaks = NULL,
+  draggable = FALSE
 ) {
 
   # Warn if interactive features are requested (not yet supported for compare maps)

inst/htmlwidgets/lib/legend-interactivity/legend-interactivity.css

@@ -203,3 +203,45 @@
     background: #444;
     border-color: #666;
 }
+
+/* ===========================================
+   Draggable Legends
+   =========================================== */
+
+/* Draggable legend styling */
+.mapboxgl-legend.legend-draggable {
+    cursor: grab;
+}
+
+.mapboxgl-legend.legend-draggable h2 {
+    cursor: grab;
+}
+
+/* While dragging */
+.mapboxgl-legend.legend-dragging {
+    cursor: grabbing;
+    opacity: 0.9;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 2000 !important;
+}
+
+.mapboxgl-legend.legend-dragging h2 {
+    cursor: grabbing;
+}
+
+/* Allow clicking on interactive elements without starting drag */
+.mapboxgl-legend.legend-draggable .legend-item {
+    cursor: pointer;
+}
+
+.mapboxgl-legend.legend-draggable .legend-gradient-handle {
+    cursor: ew-resize;
+}
+
+.mapboxgl-legend.legend-draggable .legend-gradient-middle {
+    cursor: grab;
+}
+
+.mapboxgl-legend.legend-dragging .legend-gradient-middle {
+    cursor: grabbing;
+}

inst/htmlwidgets/lib/legend-interactivity/legend-interactivity.js

@@ -891,3 +891,172 @@ function formatValue(value) {
         return value.toFixed(2);
     }
 }
+
+/**
+ * Initialize draggable functionality for legends
+ * Called automatically when legends are rendered
+ * @param {HTMLElement} container - The map container element
+ */
+function initializeDraggableLegends(container) {
+    var legends = container.querySelectorAll('.mapboxgl-legend[data-draggable="true"]');
+    legends.forEach(function(legend) {
+        // Skip if already initialized
+        if (legend._draggableInitialized) return;
+        legend._draggableInitialized = true;
+
+        makeLegendDraggable(legend);
+    });
+}
+
+/**
+ * Make a single legend element draggable
+ * @param {HTMLElement} legend - The legend element
+ */
+function makeLegendDraggable(legend) {
+    var isDragging = false;
+    var startX, startY;
+    var startLeft, startTop;
+
+    // Add draggable class for styling
+    legend.classList.add('legend-draggable');
+
+    // Get the map container (parent of legend)
+    var mapContainer = legend.closest('.mapboxgl-map, .maplibregl-map') || legend.parentElement;
+
+    function onMouseDown(e) {
+        // Don't start drag if clicking on interactive elements (including slider handles)
+        if (e.target.closest('.legend-item, .legend-reset-btn, .continuous-slider-container, .legend-gradient-handle, .legend-gradient-middle, .legend-gradient-overlay-container, input, button')) {
+            return;
+        }
+
+        isDragging = true;
+        legend.classList.add('legend-dragging');
+
+        startX = e.clientX;
+        startY = e.clientY;
+
+        // Get current position
+        var rect = legend.getBoundingClientRect();
+        var containerRect = mapContainer.getBoundingClientRect();
+
+        // Calculate position relative to container
+        startLeft = rect.left - containerRect.left;
+        startTop = rect.top - containerRect.top;
+
+        // Switch to absolute positioning with explicit coordinates
+        legend.style.position = 'absolute';
+        legend.style.left = startLeft + 'px';
+        legend.style.top = startTop + 'px';
+        legend.style.right = 'auto';
+        legend.style.bottom = 'auto';
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+
+    function onMouseMove(e) {
+        if (!isDragging) return;
+
+        var deltaX = e.clientX - startX;
+        var deltaY = e.clientY - startY;
+
+        var newLeft = startLeft + deltaX;
+        var newTop = startTop + deltaY;
+
+        // Constrain to container bounds
+        var containerRect = mapContainer.getBoundingClientRect();
+        var legendRect = legend.getBoundingClientRect();
+
+        var maxLeft = containerRect.width - legendRect.width;
+        var maxTop = containerRect.height - legendRect.height;
+
+        newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+        newTop = Math.max(0, Math.min(newTop, maxTop));
+
+        legend.style.left = newLeft + 'px';
+        legend.style.top = newTop + 'px';
+
+        e.preventDefault();
+    }
+
+    function onMouseUp(e) {
+        if (!isDragging) return;
+
+        isDragging = false;
+        legend.classList.remove('legend-dragging');
+
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    }
+
+    // Add touch support
+    function onTouchStart(e) {
+        if (e.touches.length !== 1) return;
+
+        var touch = e.touches[0];
+        // Don't start drag if touching interactive elements (including slider handles)
+        if (e.target.closest('.legend-item, .legend-reset-btn, .continuous-slider-container, .legend-gradient-handle, .legend-gradient-middle, .legend-gradient-overlay-container, input, button')) {
+            return;
+        }
+
+        isDragging = true;
+        legend.classList.add('legend-dragging');
+
+        startX = touch.clientX;
+        startY = touch.clientY;
+
+        var rect = legend.getBoundingClientRect();
+        var containerRect = mapContainer.getBoundingClientRect();
+
+        startLeft = rect.left - containerRect.left;
+        startTop = rect.top - containerRect.top;
+
+        legend.style.position = 'absolute';
+        legend.style.left = startLeft + 'px';
+        legend.style.top = startTop + 'px';
+        legend.style.right = 'auto';
+        legend.style.bottom = 'auto';
+
+        e.preventDefault();
+    }
+
+    function onTouchMove(e) {
+        if (!isDragging || e.touches.length !== 1) return;
+
+        var touch = e.touches[0];
+        var deltaX = touch.clientX - startX;
+        var deltaY = touch.clientY - startY;
+
+        var newLeft = startLeft + deltaX;
+        var newTop = startTop + deltaY;
+
+        var containerRect = mapContainer.getBoundingClientRect();
+        var legendRect = legend.getBoundingClientRect();
+
+        var maxLeft = containerRect.width - legendRect.width;
+        var maxTop = containerRect.height - legendRect.height;
+
+        newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+        newTop = Math.max(0, Math.min(newTop, maxTop));
+
+        legend.style.left = newLeft + 'px';
+        legend.style.top = newTop + 'px';
+
+        e.preventDefault();
+    }
+
+    function onTouchEnd(e) {
+        if (!isDragging) return;
+
+        isDragging = false;
+        legend.classList.remove('legend-dragging');
+    }
+
+    legend.addEventListener('mousedown', onMouseDown);
+    legend.addEventListener('touchstart', onTouchStart, { passive: false });
+    legend.addEventListener('touchmove', onTouchMove, { passive: false });
+    legend.addEventListener('touchend', onTouchEnd);
+}

inst/htmlwidgets/mapboxgl.js

@@ -1940,6 +1940,11 @@ HTMLWidgets.widget({
             });
           }
 
+          // Initialize draggable legends
+          if (typeof initializeDraggableLegends === "function") {
+            initializeDraggableLegends(el);
+          }
+
           // Add fullscreen control if enabled
           if (x.fullscreen_control && x.fullscreen_control.enabled) {
             const position = x.fullscreen_control.position || "top-right";

inst/htmlwidgets/maplibregl.js

@@ -2032,6 +2032,11 @@ HTMLWidgets.widget({
             });
           }
 
+          // Initialize draggable legends
+          if (typeof initializeDraggableLegends === "function") {
+            initializeDraggableLegends(el);
+          }
+
           // Add fullscreen control if enabled
           if (x.fullscreen_control && x.fullscreen_control.enabled) {
             const position = x.fullscreen_control.position || "top-right";