chairemobilite · tahini · May 2, 2025 · Apr 14, 2025 · May 6, 2025 · May 6, 2025
diff --git a/.env.docker b/.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

diff --git a/.env.example b/.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

diff --git a/README.md b/README.md
@@ -84,13 +84,6 @@ cp .env.example .env
 * Change `EXPRESS_SESSION_SECRET_KEY` to a random string with no space.
 * Change `PROJECT_CONFIG` to point to your project's configuration file. The default is an example configuration file that can be copied and configured for your own need.
 
-### Get a Mapbox access token
-* Go to [Mapbox](http://mapbox.com) and sign up
-* Go to your account dashboard, then generate a new access token
-* Open the `.env` file
-* Copy this access token to `.env` file: `MAPBOX_ACCESS_TOKEN=YOUR_TOKEN`
-* If you have a custom mapbox style, put your username and style id in `MAPBOX_USER_ID` and `MAPBOX_STYLE_ID`
-
 ### Create the client application
 
 Run `yarn build:dev` or `yarn build:prod` to create the html client application that will be run on the browser. 

diff --git a/docs/runWithDocker.md b/docs/runWithDocker.md
@@ -135,10 +135,6 @@ PG_DATABASE_PRODUCTION=tr
 PG_DATABASE_TEST=tr_test
 PG_CONNECTION_STRING_PREFIX=postgres://postgres:@localhost:5432/
 EXPRESS_SESSION_SECRET_KEY=DefaultDockerSessionKey
-# Required for the mapbox map
-MAPBOX_ACCESS_TOKEN=MYMAPBOXACCESSTOKEN
-MAPBOX_USER_ID=mapbox
-MAPBOX_STYLE_ID=dark-v10
 
 #CUSTOM_RASTER_TILES_XYZ_URL=https://exampltest/{z}/{x}/{y}
 #CUSTOM_RASTER_TILES_MIN_ZOOM=8

diff --git a/docs/setupDevEnvironmentUbuntu.md b/docs/setupDevEnvironmentUbuntu.md
@@ -128,14 +128,6 @@ mkdir runtime
 * Change `PROJECT_CONFIG` to point to your project's configuration file. The default is an example configuration file that can be copied and configured for your own need.
 
 
-### Get a Mapbox access token
-* Go to [Mapbox](http://mapbox.com) and sign up
-* Go to your account dashboard, then generate a new access token
-* Open the `.env` file
-* Copy this access token to `.env` file: `MAPBOX_ACCESS_TOKEN=YOUR_TOKEN`
-* `MAPBOX_USER_ID=mapbox` and `MAPBOX_STYLE_ID=dark-v11`
-
-
 ### Setup project
 ```
 yarn compile
@@ -158,4 +150,4 @@ For the transport mode, choose walk, driving, bus-urban.
 * In a new shell: `yarn compile:dev` or `yarn compile`
 * In a new shell: `yarn build:dev` or `yarn build:prod`
 * In a new shell: `yarn start:json2capnp -- 2000 /absolute/path/to/cache/demo_transition`
-* In a new shell: `yarn start`
+* In a new shell: `yarn start`
diff --git a/locales/en/main.json b/locales/en/main.json
@@ -270,7 +270,17 @@
         "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",
+        "Map": "Map preferences",
+        "MapStyle": "Map background",
+        "MapStyleHelp": "Vector tile layer to use as map background",
+        "RasterTileLayerOpacity": "Raster/photo tile layer opacity",
+        "RasterTileLayerOpacityHelp": "Percentage opacity of the raster/photo tile layer, if available (between 0 and 100). An opacity of 0 will not display this layer.",
         "MapPrettyDisplay": "Display pretty lines and nodes on map",
+        "mapStyles": {
+            "osmBright": "OpenStreetMap",
+            "positron": "Light (positron)",
+            "darkMatter": "Dark (dark matter)"
+        },
         "transit": {
             "nodes": {}
         },
@@ -280,7 +290,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}}",
@@ -291,5 +302,7 @@
             "title": "Map Controls",
             "resetView": "Reset map view to default center/zoom"
         }
-    }
+    },
+    "MeasureTool": "Measure tool",
+    "PolygonDrawTool": "Polygon draw tool"
 }
diff --git a/locales/en/transit.json b/locales/en/transit.json
@@ -484,6 +484,8 @@
         "HelpText": "Click on node: Add the node at the end of the path<br/>Click on the map: Add a waypoint at the end<br/>Shift-click on node: Add a node at the beginning of the path<br/>Alt-click on node: Remove the node<br />m: Toggle manual mode for path calculation<br />Clic on the line + drag waypoint & drop on node: Add node in the middle of a path",
         "ShowHelpText": "Show path edit help",
         "CloseHelpText": "Close path edit help",
+        "ClickToRemoveWaypoint": "Click to remove waypoint",
+        "ClickAndDragToAddWaypoint": "Click and drag to force the path to pass through a waypoint",
         "warningFromGtfs": "Warning! This transit path was imported from a GTFS. Recomputing its path could change the geography and timings.",
         "directions": {
             "loop": "Loop",

diff --git a/locales/fr/main.json b/locales/fr/main.json
@@ -270,7 +270,17 @@
         "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",
+        "Map": "Carte",
+        "MapStyle": "Fond de carte",
+        "MapStyleHelp": "Couche vectorielle de fond de carte",
+        "RasterTileLayerOpacity": "Opacité de la couche photo/raster",
+        "RasterTileLayerOpacityHelp": "Opacité de la couche photo/raster, si disponible, en pourcentage (entre 0 et 100). Une opacité de 0 n'affichera pas cette couche.",
         "MapPrettyDisplay": "Affichage esthétique des lignes et noeuds sur la carte",
+        "mapStyles": {
+            "osmBright": "OpenStreetMap",
+            "positron": "Clair (positron)",
+            "darkMatter": "Foncé (dark matter)"
+        },
         "transit": {
             "nodes": {}
         },
@@ -280,7 +290,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}}",
@@ -291,5 +302,7 @@
             "title": "Contrôles de la carte",
             "resetView": "Réinitialiser la vue au centre/zoom par défaut"
         }
-    }
+    },
+    "MeasureTool": "Outil de mesure",
+    "PolygonDrawTool": "Outil de dessin de polygone"
 }
diff --git a/locales/fr/transit.json b/locales/fr/transit.json
@@ -484,6 +484,8 @@
         "HelpText": "Clic sur un noeud: Ajouter le noeud à la fin du parcours<br />Clic sur la carte: Ajout d'un point de repère<br />Shift-clic sur noeud: Ajout du noeud au début du parcours<br />Alt-clic sur noeud: Enlever le noeud<br />m: Activer le mode manuel de calcul de parcours<br />Clic sur la ligne + glisser le point de repère et déposer sur un noeud: Ajout d'un noeud en milieu de parcours",
         "ShowHelpText": "Montrer l'aide pour l'édition de parcours",
         "CloseHelpText": "Fermer l'aide pour l'édition de parcours",
+        "ClickToRemoveWaypoint": "Cliquez pour supprimer le point de repère",
+        "ClickAndDragToAddWaypoint": "Cliquez et glissez-déposez pour forcer le trajet à passer par un point de repère",
         "warningFromGtfs": "Attention! Ce parcours a été importé d'un GTFS. Le recalculer pourrait changer le tracé ou les temps de parcours.",
         "directions": {
             "loop": "Boucle",

diff --git a/packages/chaire-lib-common/src/config/Preferences.ts b/packages/chaire-lib-common/src/config/Preferences.ts
@@ -21,7 +21,7 @@

 interface PreferencesModelWithIdAndData extends PreferencesModel {
    id: string;
    data: { [key: string]: any };
 }

 const prefChangeEvent = 'change';
@@ -244,7 +244,7 @@
    }

    // Not implemented for Preferences, we should never delete the preferences object.
    public delete(_socket: any): Promise<any> {
        return new Promise((resolve) => {
            resolve(null);
        });
@@ -321,8 +321,27 @@
    }
 
     // TODO: type this:
     public get(path: string, defaultValue: unknown = undefined): any {
-        return super.get(path, defaultValue);
+        // FIXME This is for the deck.gl migration, the colors now have a new
+        // format (hexadecimal instead of rgba). Remove this `if` block after a
+        // while
+        const value = super.get(path, defaultValue);
+        if (path.toLocaleLowerCase().includes('color')) {
+            if (typeof value === 'string' && value.startsWith('rgba')) {
+                // Convert rgba to hex
+                const rgba = value.split(',');
+                const r = parseInt(rgba[0].split('(')[1], 10);
+                const g = parseInt(rgba[1], 10);
+                const b = parseInt(rgba[2], 10);
+                const a = parseFloat(rgba[3].split(')')[0]);
+                const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+                const alphaHex = Math.round(a * 255)
+                    .toString(16)
+                    .padStart(2, '0');
+                return `${hex}${alphaHex}`;
+            }
+        }
+        return value;
     }
 
     /**

diff --git a/packages/chaire-lib-common/src/config/__tests__/Preferences.test.ts b/packages/chaire-lib-common/src/config/__tests__/Preferences.test.ts
@@ -54,6 +54,20 @@ test('Test get preferences', () => {
     expect(Preferences.get('osrmRouting.directoryPrefix')).toBe('test');
 });
 
+test('Test get color preferences', () => {
+    // TODO: post-deck.gl migration. Remove when the color specific block is removed from the code
+    // Manually add color preferences to the preferences object
+    const colors = {
+        rgbaColor: 'rgba(255, 128, 0, 0.5)',
+        rgbaColor2: 'rgba(2, 255, 255, 0.1)',
+        hexColor: '#345678',
+    }
+    Preferences.attributes.colors = colors;
+    expect(Preferences.get('colors.rgbaColor')).toEqual('#ff800080');
+    expect(Preferences.get('colors.rgbaColor2')).toEqual('#02ffff1a');
+    expect(Preferences.get('colors.hexColor')).toEqual('#345678');
+});
+
 test('Test set preferences', () => {
     Preferences.set('foo.bar', 'foobar');
     expect(Preferences.get('foo.bar')).toBe('foobar');

diff --git a/packages/chaire-lib-common/src/config/defaultPreferences.config.ts b/packages/chaire-lib-common/src/config/defaultPreferences.config.ts
@@ -20,6 +20,13 @@
     defaultSection: string;
     infoPanelPosition: string;
     dateTimeFormat: string;
+    mapTileVectorStyleUrl: string;
+    mapTileVectorOpacity: number;
+    mapTileRasterXYZUrl: string | undefined; // if undefined: do not show XYZ tiles
+    mapTileRasterXYZMinZoom: number;
+    mapTileRasterXYZMaxZoom: number;
+    mapTileRasterXYZTileSize: number;
+    mapTileRasterXYZOpacity: number;
     // @deprecated This type has moved to chaire-lib's project configuration.
     // Use the project configuration's `sections` instead, as it is not a
     // preference, but an instance specific configuration.
@@ -32,7 +39,7 @@
        /** Hexadecimal strings of the various colors that should be available */
        colors: string[];
    };
    [key: string]: any;
 }

 // TODO: Type more fields
@@ -40,9 +47,18 @@
     defaultSection: 'agencies',
     infoPanelPosition: 'right',
     dateTimeFormat: 'YYYY-MM-DD HH:mm',
+    mapTileVectorStyleUrl:
+        process.env.CUSTOM_VECTOR_TILES_STYLE_URL || 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+    mapTileVectorOpacity: 0.7,
+    mapTileRasterXYZUrl: process.env.CUSTOM_RASTER_TILES_XYZ_URL || undefined,
+    mapTileRasterXYZMinZoom: Number(process.env.CUSTOM_RASTER_TILES_MIN_ZOOM) || 0,
+    mapTileRasterXYZMaxZoom: Number(process.env.CUSTOM_RASTER_TILES_MAX_ZOOM) || 22,
+    mapTileRasterXYZTileSize: Number(process.env.CUSTOM_RASTER_TILES_TILE_SIZE) || 256,
+    mapTileRasterXYZOpacity: Number(process.env.CUSTOM_RASTER_TILES_TILE_OPACITY) || 0.5,
     map: {
         center: [config.mapDefaultCenter.lon, config.mapDefaultCenter.lat],
-        zoom: 10
+        zoom: 10,
+        enableMapAnimations: true
     },
     showAggregatedOdTripsLayer: true,
     socketUploadChunkSize: 10240000,
@@ -351,20 +367,20 @@
                 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: {
@@ -381,8 +397,8 @@
                 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,

diff --git a/packages/chaire-lib-common/src/services/geodata/GeoJSONUtils.ts b/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;
diff --git a/packages/chaire-lib-frontend/package.json b/packages/chaire-lib-frontend/package.json
@@ -24,17 +24,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/turf": "^7.1.0",
     "chaire-lib-common": "^0.2.2",
     "date-fns": "^2.30.0",
+    "deck.gl": "^9.1.11",
     "font-awesome": "^4.7.0",
     "geojson": "^0.5.0",
     "i18next": "^24.0.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^3.0.1",
     "lodash": "^4.17.21",
-    "mapbox-gl": "chairemobilite/mapbox-gl-js#39bbf9aeb1859424e29cff2584715fddc9d018b9",
+    "mjolnir.js": "^3.0.0",
     "moment": "^2.30.1",
     "papaparse": "^5.5.2",
     "react": "^19.0.0",
-Original file line number
+Diff line change
@@ Expand Up @@
         }
         return undefined;
     };
+    export const emptyFeatureCollection = { type: 'FeatureCollection', features: [] } as GeoJSON.FeatureCollection;