Migrate the main map to Deck.gl

.env.docker

@@ -12,10 +12,6 @@ EXPRESS_SESSION_SECRET_KEY=DefaultDockerSessionKey
 # Host and port for the trRouting server
 #TR_ROUTING_HOST_URL=http://locahost
 #TR_ROUTING_HOST_PORT=4000
-# Required for the mapbox map
-MAPBOX_ACCESS_TOKEN=MYMAPBOXACCESSTOKEN
-MAPBOX_USER_ID=mapbox
-MAPBOX_STYLE_ID=dark-v10
 #MAGIC_LINK_SECRET_KEY=MYVERYLONGSECRETKEYTOENCRYPTTOKENTOSENDTOUSERFORPASSWORDLESSLOGIN
 #CUSTOM_RASTER_TILES_XYZ_URL=https://exampltest/{z}/{x}/{y}
 #CUSTOM_RASTER_TILES_MIN_ZOOM=8

.env.example

@@ -20,10 +20,6 @@ GOOGLE_OAUTH_SECRET_KEY=GOOGLEOAUTHSECRETKEY
 # To support Facebook login
 FACEBOOK_APP_ID=FACEBOOKAPPID
 FACEBOOK_APP_SECRET=FACEBOOKAPPSECRET
-# Required for the mapbox map
-MAPBOX_ACCESS_TOKEN=MYMAPBOXACCESSTOKEN
-MAPBOX_USER_ID=mapbox
-MAPBOX_STYLE_ID=dark-v10
 #MAGIC_LINK_SECRET_KEY=MYVERYLONGSECRETKEYTOENCRYPTTOKENTOSENDTOUSERFORPASSWORDLESSLOGIN
 #CUSTOM_RASTER_TILES_XYZ_URL=https://exampltest/{z}/{x}/{y}
 #CUSTOM_RASTER_TILES_MIN_ZOOM=8

locales/en/main.json

@@ -265,11 +265,17 @@
         "General": "General preferences",
         "DefaultSection": "Default section at opening",
         "InfoPanelPosition": "Info panel position",
+        "MapStyle": "Map background",
         "DefaultColor": "Default color",
         "DefaultWalkingSpeedKph": "Default walking speed (km/h)",
         "DefaultWalkingSpeedKphHelp": "Walking speed varies according to age and gender between 3 km/h (elderly people and young children) and 7 km/h (young and/or very active people). Men are on average a little faster than women and in general, walking speed decreases with age. The speed of a person in a manual wheelchair varies between 2 and 3 km/h depending on physical strength.",
         "ExperimentalFeatures": "Experimental features",
         "MapPrettyDisplay": "Display pretty lines and nodes on map",
+        "mapStyles": {
+            "osmBright": "OpenStreetMap",
+            "positron": "Light (positron)",
+            "darkMatter": "Dark (dark matter)"
+        },
         "transit": {
             "nodes": {}
         },
@@ -279,7 +285,8 @@
         },
         "DateTimeFormat": "Date/Time format",
         "DateTimeFormat24H": "24 hours ({{formatted}})",
-        "DateTimeFormat12H": "12 hours ({{formatted}})"
+        "DateTimeFormat12H": "12 hours ({{formatted}})",
+        "EnableMapAnimations": "Enable map animations"
     },
     "ShowingNofX": "Showing {{n}} of {{x}} results",
     "PageNofX": "Page {{n}} of {{x}}",

locales/fr/main.json

@@ -265,11 +265,17 @@
         "General": "Préférences générales",
         "DefaultSection": "Section par défaut lors de l'ouverture",
         "InfoPanelPosition": "Position du panneau d'information",
+        "MapStyle": "Fond de carte",
         "DefaultColor": "Couleur par défaut",
         "DefaultWalkingSpeedKph": "Vitesse de marche par défaut (km/h)",
         "DefaultWalkingSpeedKphHelp": "La vitesse de marche varie selon l'âge et le genre entre 3 km/h (personnes âges et jeunes enfants) et 7 km/h (personnes jeunes et/ou très actives). Les hommes sont en moyenne un peu plus rapides que les femmes et de manière générale, la vitesse de marche diminue avec l'âge. La vitesse d'une personne en chaise roulante manuelle varie entre 2 et 3 km/h selon la force physique.",
         "ExperimentalFeatures": "Fonctionnalités expérimentales",
         "MapPrettyDisplay": "Affichage esthétique des lignes et noeuds sur la carte",
+        "mapStyles": {
+            "osmBright": "OpenStreetMap",
+            "positron": "Clair (positron)",
+            "darkMatter": "Foncé (dark matter)"
+        },
         "transit": {
             "nodes": {}
         },
@@ -279,7 +285,8 @@
         },
         "DateTimeFormat": "Format de date/heure",
         "DateTimeFormat24H": "24 heures ({{formatted}})",
-        "DateTimeFormat12H": "12 heures ({{formatted}})"
+        "DateTimeFormat12H": "12 heures ({{formatted}})",
+        "EnableMapAnimations": "Activer les animations de cartes"
     },
     "ShowingNofX": "{{n}} de {{x}} résultats",
     "PageNofX": "Page {{n}} de {{x}}",

packages/chaire-lib-common/src/config/defaultPreferences.config.ts

@@ -20,6 +20,7 @@ export interface PreferencesModel {
     defaultSection: string;
     infoPanelPosition: string;
     dateTimeFormat: string;
+    mapStyleURL: string;
     sections: {
         [key: string]: {
             [key: string]: SectionDescription;
@@ -37,6 +38,7 @@ const defaultPreferences: PreferencesModel = {
     defaultSection: 'agencies',
     infoPanelPosition: 'right',
     dateTimeFormat: 'YYYY-MM-DD HH:mm',
+    mapStyleURL: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
     sections: {
         transition: {
             agencies: {
@@ -100,6 +102,7 @@ const defaultPreferences: PreferencesModel = {
     map: {
         center: [config.mapDefaultCenter.lon, config.mapDefaultCenter.lat],
         zoom: 10,
+        enableMapAnimations: true,
         layers: {
             simulations: ['aggregatedOD', 'odTripsProfile', 'transitStations', 'transitNodes'],
             agencies: [
@@ -564,20 +567,20 @@ const defaultPreferences: PreferencesModel = {
                 maxTotalTravelTimeSeconds: 10800,
                 walkingSpeedMps: 1.3888888888,
                 walkingSpeedFactor: 1.0, // walking travel times are weighted using this factor: Example: > 1.0 means faster walking, < 1.0 means slower walking
-                originLocationColor: 'rgba(140, 212, 0, 1.0)',
-                destinationLocationColor: 'rgba(212, 35, 14, 1.0)',
-                walkingSegmentsColor: 'rgba(160,160,160,1.0)',
+                originLocationColor: '#8cd400',
+                destinationLocationColor: '#d4230e',
+                walkingSegmentsColor: '#a0a0a0',
                 walking: {
-                    color: 'rgba(255, 238, 0,1.0)'
+                    color: '#ffee00'
                 },
                 cycling: {
-                    color: 'rgba(0, 204, 51,1.0)'
+                    color: '#00cc33'
                 },
                 driving: {
-                    color: 'rgba(229, 45, 0,1.0)'
+                    color: '#e52d00'
                 },
                 default: {
-                    color: 'rgba(160,160,160,1.0)'
+                    color: '#a0a0a0'
                 }
             },
             transitAccessibilityMap: {
@@ -594,8 +597,8 @@ const defaultPreferences: PreferencesModel = {
                 walkingSpeedMps: 1.3888888888,
                 walkingSpeedFactor: 1.0, // walking travel times are weighted using this factor: Example: > 1.0 means faster walking, < 1.0 means slower walking
                 maxTotalTravelTimeSeconds: 1800,
-                locationColor: 'rgba(47, 138, 243, 1.0)',
-                polygonColor: 'rgba(47, 138, 243, 0.4)'
+                locationColor: '#2f8af3',
+                polygonColor: '#2f8af366'
             },
             transitOdTrips: {
                 minWaitingTimeSeconds: 180,

packages/chaire-lib-common/src/services/geodata/GeoJSONUtils.ts

@@ -45,3 +45,5 @@ export const getPointCoordinates = (geojson: GeoJSON.GeoJSON): number[] | undefi
     }
     return undefined;
 };
+
+export const emptyFeatureCollection = { type: 'FeatureCollection', features: [] } as GeoJSON.FeatureCollection;

packages/chaire-lib-frontend/package.json

@@ -27,7 +27,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@turf/helpers": "^6.1.4",
     "@turf/length": "^6.0.2",
     "@turf/turf": "^6.3.0",
@@ -38,6 +37,7 @@
     "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",
     "history": "^4.9.0",
@@ -46,7 +46,7 @@
     "i18next-http-backend": "^2.1.0",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",
-    "mapbox-gl": "chairemobilite/mapbox-gl-js#39bbf9aeb1859424e29cff2584715fddc9d018b9",
+    "mjolnir.js": "^2.7.0",
     "moment": "^2.29.4",
     "moment-business-days": "^1.2.0",
     "papaparse": "^5.3.1",
@@ -79,7 +79,6 @@
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^26.0.4",
     "@types/lodash": "^4.14.198",
-    "@types/mapbox-gl": "^2.3.1",
     "@types/osrm": "^5.22.0",
     "@types/react-loadable": "^5.5.6",
     "@types/react-redux": "^7.1.9",
@@ -91,6 +90,7 @@
     "@typescript-eslint/parser": "^5.45.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.2",
+    "deck.gl": "^8.9.32",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
@@ -101,6 +101,7 @@
     "jest": "^27.3.1",
     "jest-each": "^27.3.1",
     "jest-fetch-mock": "^3.0.3",
+    "mjolnir.js": "^2.7.0",
     "mockdate": "^3.0.2",
     "prettier-eslint-cli": "^7.1.0",
     "react-select-event": "^5.0.0",

packages/chaire-lib-frontend/src/services/map/IMapEventHandler.ts

@@ -4,51 +4,114 @@
  * This file is licensed under the MIT License.
  * License text available at https://opensource.org/licenses/MIT
  */
-import MapboxGL from 'mapbox-gl';
+import { MjolnirEvent } from 'mjolnir.js';
+import { PickingInfo, Deck } from 'deck.gl/typed';
 
-// TODO: Make this independent of mapbox eventually. For now, we use mapbox
-// types, as they are already defined, when we have more implementations, we can
-// review this
-type MapEventHandler = (e: MapboxGL.MapMouseEvent) => void;
-type MapLayerEventHandler = (e: MapboxGL.MapLayerMouseEvent & MapboxGL.EventData) => void;
+export type MapCallbacks = { pickMultipleObjects: typeof Deck.prototype.pickMultipleObjects };
+export type PointInfo = { coordinates: number[]; pixel: [number, number] };
+export type MapEventHandler = (pointInfo: PointInfo, e: MjolnirEvent, mapCallbacks: MapCallbacks) => void;
+export type MapSelectEventHandler = (pickInfo: PickingInfo[], e: MjolnirEvent, mapCallbacks: MapCallbacks) => void;
+export type MapLayerEventHandler = (pickInfo: PickingInfo, e: MjolnirEvent, mapCallbacks: MapCallbacks) => void;
+export type TooltipEventHandler = (
+    pickInfo: PickingInfo,
+    mapCallbacks: MapCallbacks
+) => string | undefined | { text: string; containsHtml: boolean };
+
+export type layerEventNames = 'onLeftClick' | 'onRightClick' | 'onDragStart' | 'onDrag' | 'onDragEnd' | 'onHover';
+export type tooltipEventNames = 'onTooltip';
+export type mapEventNames = 'onLeftClick' | 'onRightClick';
+
+export type MapEventHandlerDescriptor = {
+    /** Type for handlers that only require the layer to be active */
+    type: 'map';
+    eventName: mapEventNames;
+    /**
+     * Condition function for which this handler applies. It will be checked
+     * before actually calling the handler, so the handler can assume this is
+     * true.
+     *
+     * TODO: This should depend on some application's state or context, that
+     * should be passed here. For now, we pass the active section and the rest
+     * can be accessed through the serviceLocator
+     * */
+    condition?: (activeSection: string) => boolean;
+    /**
+     * The event handler
+     */
+    handler: MapEventHandler;
+};
+
+/**
+ * Type of event called when no layer event was handled on a specific element,
+ * but there might be features under the event location. Ideal to handle
+ * multiple features, as `MapLayerEventHandlerDescriptor` will only handle the
+ * top-most selected element
+ */
+export type MapSelectEventHandlerDescriptor = {
+    /** Type for handlers that only require the layer to be active */
+    type: 'mapSelect';
+    layerName: string;
+    eventName: mapEventNames;
+    /**
+     * Condition function for which this handler applies. It will be checked
+     * before actually calling the handler, so the handler can assume this is
+     * true.
+     *
+     * TODO: This should depend on some application's state or context, that
+     * should be passed here. For now, we pass the active section and the rest
+     * can be accessed through the serviceLocator
+     * */
+    condition?: (activeSection: string) => boolean;
+    /**
+     * The event handler
+     */
+    handler: MapSelectEventHandler;
+};
+
+export type MapLayerEventHandlerDescriptor = {
+    /** Type for handler that require selected features */
+    type: 'layer';
+    layerName: string;
+    eventName: layerEventNames;
+    /**
+     * Condition function for which this handler applies. It will be checked
+     * before actually calling the handler, so the handler can assume this is
+     * true.
+     *
+     * TODO: This should depend on some application's state or context, that
+     * should be passed here. For now, we pass the active section and the rest
+     * can be accessed through the serviceLocator
+     * */
+    condition?: (activeSection: string) => boolean;
+    /**
+     * The event handler
+     */
+    handler: MapLayerEventHandler;
+};
+
+export type TooltipEventHandlerDescriptor = {
+    /** Type for handler that require selected features */
+    type: 'tooltip';
+    layerName: string;
+    eventName: tooltipEventNames;
+    /**
+     * Condition function for which this handler applies. It will be checked
+     * before actually calling the handler, so the handler can assume this is
+     * true.
+     *
+     * TODO: This should depend on some application's state or context, that
+     * should be passed here. For now, we pass the active section and the rest
+     * can be accessed through the serviceLocator
+     * */
+    condition?: (activeSection: string) => boolean;
+    /**
+     * The event handler
+     */
+    handler: TooltipEventHandler;
+};
 
 export type MapEventHandlerDescription =
-    | {
-          /** Type for handler that require selected features */
-          type: 'layer';
-          layerName: string;
-          eventName: keyof MapboxGL.MapLayerEventType;
-          /**
-           * Condition function for which this handler applies. It will be checked
-           * before actually calling the handler, so the handler can assume this is
-           * true.
-           *
-           * TODO: This should depend on some application's state or context, that
-           * should be passed here. For now, we pass the active section and the rest
-           * can be accessed through the serviceLocator
-           * */
-          condition?: (activeSection: string) => boolean;
-          /**
-           * The event handler
-           */
-          handler: MapLayerEventHandler;
-      }
-    | {
-          /** Type for handlers that only require the layer to be active */
-          type: 'map';
-          eventName: keyof MapboxGL.MapEventType;
-          /**
-           * Condition function for which this handler applies. It will be checked
-           * before actually calling the handler, so the handler can assume this is
-           * true.
-           *
-           * TODO: This should depend on some application's state or context, that
-           * should be passed here. For now, we pass the active section and the rest
-           * can be accessed through the serviceLocator
-           * */
-          condition?: (activeSection: string) => boolean;
-          /**
-           * The event handler
-           */
-          handler: MapEventHandler;
-      };
+    | MapEventHandlerDescriptor
+    | MapLayerEventHandlerDescriptor
+    | TooltipEventHandlerDescriptor
+    | MapSelectEventHandlerDescriptor;