add legendContainer to map options. External legends now specified as…

… HTML elements instead of string ids
eurostat · Dec 2, 2024 · 9b5f065 · 9b5f065
1 parent cccf95c
commit 9b5f065
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 41 deletions.
diff --git a/dist/gridviz.js b/dist/gridviz.js
diff --git a/dist/gridviz.min.js b/dist/gridviz.min.js
diff --git a/docs/reference.md b/docs/reference.md
@@ -102,7 +102,7 @@ new gridviz.Map(document.getElementById('map'), {
     x: 4500000,
     y: 2900000,
     z: 1000,
-    legendDivId: 'myLegendDiv', // if you want your legend in an external container
+    legendContainer: document.getElementById('myLegendDiv'), // if you want your legend in an external container
     selectionRectangleColor: 'red', // cell hover
     selectionRectangleWidthPix: (resolution, z) => '1',
     backgroundColor: 'white',

diff --git a/examples/legends/external_legend.html b/examples/legends/external_legend.html
@@ -1,5 +1,44 @@
+<style>
+    #myLegend {
+        background: linear-gradient(45deg, #ff6f61, #6b5b95);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        border-radius: 15px;
+        animation: pulse 3s infinite, colorChange 6s infinite;
+    }
+
+    /* Pulsing scale animation */
+    @keyframes pulse {
+        0%,
+        100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.1);
+        }
+    }
+
+    /* Smooth color gradient animation */
+    @keyframes colorChange {
+        0% {
+            background: linear-gradient(45deg, #ff6f61, #6b5b95);
+        }
+        50% {
+            background: linear-gradient(45deg, #6b5b95, #88b04b);
+        }
+        100% {
+            background: linear-gradient(45deg, #ff6f61, #6b5b95);
+        }
+    }
+</style>
+
 <div id="map" style="height: 100%; width: 100%"></div>
-<div id="ext_legend"></div>
+<div id="myLegend" style="position: absolute; top: 50px; left: 50px"></div>
 
 <script src="../../dist/gridviz.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
@@ -11,7 +50,7 @@
         x: 4500000,
         y: 2900000,
         z: 1000,
-        legendDivId: 'ext_legend',
+        legendContainer: document.getElementById('myLegend'),
     }).addZoomButtons()
 
     //define dataset

diff --git a/src/button/Button.js b/src/button/Button.js
@@ -46,7 +46,7 @@ export class Button {
         this.style('display', 'flex')
         this.style('justify-content', 'center')
         this.style('align-items', 'center')
-        this.style('width', '30px')
+        this.style('width', '35px')
         this.style('height', '30px')
         // this.style(padding , '4px'
 

diff --git a/src/core/GeoCanvas.js b/src/core/GeoCanvas.js
@@ -87,24 +87,29 @@ export class GeoCanvas {
                 .on('zoom', (e) => {
                     const t = e.transform
                     const f = tP.k / t.k
-                    if (f == 1) {
-                        //pan
+
+                    // Get container's bounding rect to adjust for offsets
+                    const containerRect = this.canvas.getBoundingClientRect()
+
+                    // Adjust for container's offset and zoom center
+                    const offsetX = e.sourceEvent.offsetX - containerRect.left
+                    const offsetY = e.sourceEvent.offsetY - containerRect.top
+
+                    if (f === 1) {
+                        // Pan logic
                         const dx = tP.x - t.x
                         const dy = tP.y - t.y
                         this.pan(dx * this.view.z, -dy * this.view.z)
                     } else {
                         const se = e.sourceEvent
+
                         if (se instanceof WheelEvent) {
-                            //zoom at the mouse position
-                            this.zoom(
-                                f,
-                                this.pixToGeoX(e.sourceEvent.offsetX),
-                                this.pixToGeoY(e.sourceEvent.offsetY)
-                            )
+                            // Zoom at mouse position, adjusted by container offset
+                            this.zoom(f, this.pixToGeoX(offsetX), this.pixToGeoY(offsetY))
                         } else if (se instanceof TouchEvent) {
                             if (!se.targetTouches.length) return
-                            //pinch zoom
-                            //compute average position of the touches
+
+                            // Compute average position of the touches
                             let tx = 0,
                                 ty = 0
                             for (let tt of se.targetTouches) {
@@ -113,7 +118,12 @@ export class GeoCanvas {
                             }
                             tx /= se.targetTouches.length
                             ty /= se.targetTouches.length
-                            //zoom at this average position
+
+                            // Adjust for container's offset
+                            tx -= containerRect.left
+                            ty -= containerRect.top
+
+                            // Zoom at the average touch position
                             this.zoom(f, this.pixToGeoX(tx), this.pixToGeoY(ty))
                         }
                     }

diff --git a/src/core/Map.js b/src/core/Map.js
@@ -60,9 +60,10 @@ export class Map {
         }
 
         // legend div
-        this.legendDivId = opts.legendDivId || 'gvizLegend'
-        this.legend = select('#' + this.legendDivId)
-        if (this.legend.empty()) this.initialiseLegend()
+        this.legend = opts.legendContainer
+            ? select(opts.legendContainer) // Wrap the provided HTML node in a D3 selection
+            : null
+        if (!this.legend) this.initialiseLegend()
 
         //tooltip
 
@@ -122,9 +123,9 @@ export class Map {
     }
 
     initialiseLegend() {
-        this.legend = select(this.container.id && this.container.id != '' ? '#' + this.container.id : 'body')
-            .append('div')
-            .attr('id', this.legendDivId)
+        this.legend = select(this.container)
+            .append('div') // Create a new container
+            .attr('id', 'gridviz-legend')
             .style('position', 'absolute')
             .style('width', 'auto')
             .style('height', 'auto')