deck.gl: Implement measure tool

fixes chairemobilite#115 Add TextLayer for text on map
tahini · Jan 30, 2025 · 6f27cfe · 6f27cfe
1 parent 4fa4dc3
commit 6f27cfe
Show file tree

Hide file tree

Showing 29 changed files with 750 additions and 105 deletions.
diff --git a/locales/en/main.json b/locales/en/main.json
@@ -296,5 +296,6 @@
     "ShowingNofX": "Showing {{n}} of {{x}} results",
     "PageNofX": "Page {{n}} of {{x}}",
     "GoToPage": "Go to page",
-    "ShowN": "Show {{n}}"
+    "ShowN": "Show {{n}}",
+    "MeasureTool": "Measure tool"
 }
diff --git a/locales/fr/main.json b/locales/fr/main.json
@@ -296,5 +296,6 @@
     "ShowingNofX": "{{n}} de {{x}} résultats",
     "PageNofX": "Page {{n}} de {{x}}",
     "GoToPage": "Aller à la page",
-    "ShowN": "{{n}} par page"
+    "ShowN": "{{n}} par page",
+    "MeasureTool": "Outil de mesure"
 }
diff --git a/packages/chaire-lib-common/src/config/defaultPreferences.config.ts b/packages/chaire-lib-common/src/config/defaultPreferences.config.ts
@@ -106,7 +106,15 @@ const defaultPreferences: PreferencesModel = {
         zoom: 10,
         enableMapAnimations: true,
         layers: {
-            simulations: ['aggregatedOD', 'odTripsProfile', 'transitStations', 'transitNodes'],
+            simulations: [
+                'aggregatedOD',
+                'odTripsProfile',
+                'transitStations',
+                'transitNodes',
+                'measureToolText',
+                'measureToolLine',
+                'measureToolPoint'
+            ],
             agencies: [
                 'aggregatedOD',
                 'transitNodesRoutingRadius',
@@ -119,7 +127,10 @@ const defaultPreferences: PreferencesModel = {
                 'transitNodes',
                 'transitNodesSelected',
                 'transitNodesSelectedErrors',
-                'transitPathWaypointsErrors'
+                'transitPathWaypointsErrors',
+                'measureToolText',
+                'measureToolLine',
+                'measureToolPoint'
             ],
             nodes: [
                 'aggregatedOD',
@@ -133,22 +144,31 @@ const defaultPreferences: PreferencesModel = {
                 'transitStations',
                 'transitStationsSelected',
                 'transitNodes',
-                'transitNodesSelected'
+                'transitNodesSelected',
+                'measureToolText',
+                'measureToolLine',
+                'measureToolPoint'
             ],
-            scenarios: ['transitPathsForServices'],
+            scenarios: ['transitPathsForServices', 'measureToolText', 'measureToolLine', 'measureToolPoint'],
             routing: [
                 'aggregatedOD' /*'transitPaths', 'transitNodes', 'transitStations', */,
                 'routingPathsStrokes',
                 'routingPaths',
-                'routingPoints'
+                'routingPoints',
+                'measureToolText',
+                'measureToolLine',
+                'measureToolPoint'
             ],
             accessibilityMap: [
                 'aggregatedOD',
                 'accessibilityMapPolygons',
                 'accessibilityMapPolygonStrokes',
-                'accessibilityMapPoints'
+                'accessibilityMapPoints',
+                'measureToolText',
+                'measureToolLine',
+                'measureToolPoint'
             ],
-            odRouting: ['aggregatedOD', 'odTripsProfile'],
+            odRouting: ['aggregatedOD', 'odTripsProfile', 'measureToolText', 'measureToolLine', 'measureToolPoint'],
             gtfsImport: [
                 'aggregatedOD',
                 'transitNodesRoutingRadius',

diff --git a/packages/chaire-lib-frontend/package.json b/packages/chaire-lib-frontend/package.json
@@ -30,7 +30,6 @@
     "chaire-lib-common": "^0.2.2",
     "child_process": "^1.0.2",
     "date-fns": "^2.30.0",
-    "deck.gl": "^8.9.32",
     "font-awesome": "^4.7.0",
     "geojson": "^0.5.0",
     "i18next": "^24.0.5",
@@ -81,7 +80,6 @@
     "@typescript-eslint/parser": "^8.17.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "deck.gl": "^8.9.32",
     "dotenv": "^16.4.7",
     "eslint": "^8.57.1",
     "eslint-plugin-n": "^15.7.0",

diff --git a/packages/chaire-lib-frontend/src/services/map/IMapEventHandler.ts b/packages/chaire-lib-frontend/src/services/map/IMapEventHandler.ts
@@ -5,7 +5,7 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import { MjolnirEvent } from 'mjolnir.js';
-import { PickingInfo, Deck } from 'deck.gl/typed';
+import { PickingInfo, Deck } from 'deck.gl';
 
 export type MapCallbacks = { pickMultipleObjects: typeof Deck.prototype.pickMultipleObjects };
 export type PointInfo = { coordinates: number[]; pixel: [number, number] };

diff --git a/packages/chaire-lib-frontend/src/services/map/layers/LayerDescription.ts b/packages/chaire-lib-frontend/src/services/map/layers/LayerDescription.ts
@@ -21,12 +21,15 @@ export type FeatureColor =
     | ConfigurationGetter
     | ((feature: GeoJSON.Feature) => string | [number, number, number] | [number, number, number, number]);
 export type FeatureNumber = number | ConfigurationGetter | ((feature: GeoJSON.Feature) => number);
+export type FeatureString = string | ConfigurationGetter | ((feature: GeoJSON.Feature) => string);
 
 export type CommonLayerConfiguration = {
     /**
      * Color of the feature
      */
     color?: FeatureColor;
+    fillColor?: FeatureColor;
+    lineColor?: FeatureColor;
     pickable?: boolean | (() => boolean);
     opacity?: FeatureNumber;
     /**
@@ -53,6 +56,11 @@ export type PointLayerConfiguration = CommonLayerConfiguration & {
      */
     radius?: FeatureNumber;
     radiusScale?: FeatureNumber;
+    radiusUnits?: 'pixels' | 'common' | 'meters';
+    strokeRadiusScale?: FeatureNumber;
+    strokeRadiusUnits?: 'pixels' | 'common' | 'meters';
+    lineWidthScale?: FeatureNumber;
+    lineWidthUnits?: 'pixels' | 'common' | 'meters';
     /**
      * Color of the contour of the feature
      */
@@ -70,6 +78,26 @@ export const layerIsCircle = (layer: LayerConfiguration): layer is PointLayerCon
     return layer.type === 'circle';
 };
 
+export type BaseTextLayerConfiguration = CommonLayerConfiguration & {
+    sizeScale?: FeatureNumber;
+    sizeUnits?: 'pixels' | 'common' | 'meters';
+    sizeMinPixels?: FeatureNumber;
+    sizeMaxPixels?: FeatureNumber;
+    background?: boolean;
+    backgroundPadding?: FeatureNumber;
+    fontFamily?: FeatureString;
+    fontWeight?: FeatureString;
+    // TODO: complete these from deck.gl TextLayer config
+};
+
+export type TextLayerConfiguration = BaseTextLayerConfiguration & {
+    type: 'text';
+};
+
+export const layerIsText = (layer: LayerConfiguration): layer is TextLayerConfiguration => {
+    return layer.type === 'text';
+};
+
 export type BaseLineLayerConfiguration = CommonLayerConfiguration & {
     /**
      * The line's width and scale
@@ -78,6 +106,7 @@ export type BaseLineLayerConfiguration = CommonLayerConfiguration & {
     widthScale?: FeatureNumber;
     widthMinPixels?: FeatureNumber;
     widthMaxPixels?: FeatureNumber;
+    widthUnits?: 'pixels' | 'common' | 'meters';
     /**
      * Whether the end of the lines should be rounded
      */
@@ -110,7 +139,6 @@ export type PolygonLayerConfiguration = CommonLayerConfiguration & {
      * fill and contour's color
      */
     color?: FeatureColor;
-    lineColor?: FeatureColor;
     lineWidth?: FeatureNumber;
     lineWidthMinPixels?: FeatureNumber;
 };
@@ -121,6 +149,7 @@ export const layerIsPolygon = (layer: LayerConfiguration): layer is PolygonLayer
 
 export type LayerConfiguration =
     | PointLayerConfiguration
+    | TextLayerConfiguration
     | LineLayerConfiguration
     | AnimatedPathLayerConfiguration
     | PolygonLayerConfiguration;

diff --git a/packages/chaire-lib-frontend/src/styles/_main.scss b/packages/chaire-lib-frontend/src/styles/_main.scss
@@ -1,55 +1,105 @@
 .apptr__separator-small {
-  height: 0.5rem;
+    height: 0.5rem;
 }
 
 .apptr__separator-medium {
-  height: 1rem;
+    height: 1rem;
 }
 
 .apptr__separator-large {
-  height: 2rem;
+    height: 2rem;
 }
 
 .tr__main-map-context-menu {
-  z-index:1000;
-  position: absolute;
-  background-color: rgba(0,0,0,0.7);
-  border: 1px solid $border-white;
-  font-size: $font-size-small;
-  padding: 0.5rem;
-  display: none;
-  margin: 0;
-  list-style-type: none;
-  list-style: none;
-
-  ul {
+    z-index: 1000;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.7);
+    border: 1px solid $border-white;
+    font-size: $font-size-small;
     padding: 0.5rem;
+    display: none;
     margin: 0;
-  }
+    list-style-type: none;
+    list-style: none;
 
-  li {
-    margin-bottom: 0.2rem;
-  }
+    ul {
+        padding: 0.5rem;
+        margin: 0;
+    }
 
-  li:hover {
-    background-color: rgba(0,0,0,1.0);
-    color: rgba(255,255,255,1.0);
-    font-weight: 700;
-    cursor: pointer;
-  }
+    li {
+        margin-bottom: 0.2rem;
+    }
+
+    li:hover {
+        background-color: rgba(0, 0, 0, 1.0);
+        color: rgba(255, 255, 255, 1.0);
+        font-weight: 700;
+        cursor: pointer;
+    }
 
 }
 
 /* Mathjax styles */
-.mjx-math, ._latex {
-  color: rgba(255, 245, 151, 0.9);
-  font-size: 110%;
+.mjx-math,
+._latex {
+    color: rgba(255, 245, 151, 0.9);
+    font-size: 110%;
 }
 
 .tr__exception {
-  white-space: pre-wrap;
-  margin: 1rem;
-  padding: 1rem;
-  background-color: rgb(43, 24, 23);
-  color: rgba(241, 112, 123, 1);
+    white-space: pre-wrap;
+    margin: 1rem;
+    padding: 1rem;
+    background-color: rgb(43, 24, 23);
+    color: rgba(241, 112, 123, 1);
+}
+
+.tr__map-button-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 1rem 1rem 0 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.tr__map-button {
+    display: flex;
+    align-items: right;
+    justify-content: right;
+    width: 3rem;
+    height: 3rem;
+    background-color: rgba(0,0,0,0.8);
+    border: 0.15rem solid rgba(255,255,255,0.3);
+    border-radius: 0.3rem;
+    margin-bottom: 0.3rem;
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgba(0,0,0,1.0);
+        border: 0.15rem solid rgba(255,255,255,0.7) !important;
+    }
+
+    &.active {
+        background-color: $very-dark-blue;
+        border: 0.15rem solid rgba(255,255,255,0.3);
+    }
+}
+
+.tr__map-button-icon {
+    width: 100%;
+    height: 100%;
+}
+
+.tr__measure-distance-display {
+    position: absolute;
+    bottom: 2rem;
+    left: 2rem;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: rgba(255,255,255,0.5);
+    padding: 0.5rem 1rem;
+    border-radius: 0.3rem;
+    font-size: 1.2rem;
+    z-index: 1000;
 }
diff --git a/packages/chaire-lib-frontend/src/styles/_settings.scss b/packages/chaire-lib-frontend/src/styles/_settings.scss
@@ -15,6 +15,7 @@ $blue: rgba(0, 143, 214, 1.0);
 $blue-semi-transparent: rgba(0, 143, 214, 0.5);
 $blue-very-transparent: rgba(0, 143, 214, 0.2);
 $dark-blue: rgba(51, 90, 124, 1.0);
+$very-dark-blue: rgba(20, 47, 72, 1.0);
 $radio: rgba(73, 64, 44, 0.7);
 $label: rgba(207, 224, 232, 0.85);
 $error: rgba(206, 93, 93, 1.0);