[FE-15599] Add ruler control to mapbox map (#689)

* Add mapbox ruler, add control to mapbox map, style a bit * Don't use their css
heavyai · Jan 24, 2025 · 703ef1a · 703ef1a
1 parent f7e0de7
commit 703ef1a
Show file tree

Hide file tree

Showing 6 changed files with 358 additions and 231 deletions.
diff --git a/dist/charting.css b/dist/charting.css
@@ -1730,6 +1730,13 @@ body {
   overflow: hidden;
   box-shadow: none !important;
   border: 1px solid #e2e2e2; }
+  .mapboxgl-ctrl-group.mapbox-ctrl-ruler {
+    bottom: 86px; }
+    .mapboxgl-ctrl-group.mapbox-ctrl-ruler button {
+      width: 28px;
+      height: 28px; }
+      .mapboxgl-ctrl-group.mapbox-ctrl-ruler button svg {
+        margin-top: 3px; }
 
 .mapboxgl-ctrl-compass {
   display: none !important; }

diff --git a/dist/charting.js b/dist/charting.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
   "dependencies": {
     "@heavyai/data-layer": "npm:[email protected]",
     "@heavyai/draw": "https://github.com/heavyai/mapd-draw.git#fc0b065",
+    "@mapbox-controls/ruler": "^3.0.0",
     "@mapbox/unitbezier": "0.0.0",
     "@mapd/connector": "github:omnisci/mapd-connector#d75148077a2a4b23d66d89c63d05c20e5735af2e",
     "@mapd/crossfilter": "github:omnisci/mapd-crossfilter#6f291ac",

diff --git a/scss/chart.scss b/scss/chart.scss
@@ -2141,6 +2141,18 @@ body {
   overflow:hidden;
   box-shadow: none !important;
   border: 1px solid $gray2;
+
+  &.mapbox-ctrl-ruler {
+    // Just above the zoom controls, below the zoom to filters overlay
+    bottom: 86px;
+    button {
+        width: 28px;
+        height: 28px;
+        svg {
+            margin-top: 3px;
+        }
+    }
+  }
 }
 
 .mapboxgl-ctrl-compass {

diff --git a/src/mixins/map-mixin.js b/src/mixins/map-mixin.js
@@ -3,6 +3,7 @@ import * as _ from "lodash"
 import { redrawAllAsync, resetRedrawStack } from "../core/core-async"
 import { utils } from "../utils/utils"
 import { rasterDrawMixin } from "./raster-draw-mixin"
+import RulerControl from "@mapbox-controls/ruler"
 
 function valuesOb(obj) {
   return Object.keys(obj).map(key => obj[key])
@@ -736,6 +737,16 @@ export default function mapMixin(
 
     _map.dragRotate.disable()
     _map.touchZoomRotate.disableRotation()
+
+    _map.addControl(
+      new RulerControl({
+        linePaint: {
+          "line-color": "#999",
+          "line-width": 2
+        }
+      }),
+      "bottom-right"
+    )
     _map.addControl(new _mapboxgl.NavigationControl(), "bottom-right")
     _map.addControl(new _mapboxgl.AttributionControl(), _attribLocation)
     _map.addControl(