deck.gl: Remove dependencies to mapbox

What remains that still depended on mapbox are the popup manager, which tracks which popup are currently opened and where, and the polygon draw tool, which is a little known feature of transition and only used for node selection. Some code was commented, other removed, but those features are expected to come back soon, tuned for deck.gl.
chairemobilite · Feb 6, 2024 · 506d92c · 506d92c
1 parent 639207f
commit 506d92c
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 318 deletions.
diff --git a/packages/chaire-lib-frontend/package.json b/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",
@@ -46,7 +45,6 @@
     "i18next-http-backend": "^2.1.0",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",
-    "mapbox-gl": "chairemobilite/mapbox-gl-js#39bbf9aeb1859424e29cff2584715fddc9d018b9",
     "moment": "^2.29.4",
     "moment-business-days": "^1.2.0",
     "papaparse": "^5.3.1",
@@ -79,7 +77,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",

diff --git a/packages/chaire-lib-frontend/src/services/map/MapPolygonService.ts b/packages/chaire-lib-frontend/src/services/map/MapPolygonService.ts
@@ -4,6 +4,7 @@
  * This file is licensed under the MIT License.
  * License text available at https://opensource.org/licenses/MIT
  */
+/*
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import { Map } from 'mapbox-gl';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
@@ -43,3 +44,6 @@ const removeMapBoxDraw = (
 };
 
 export { getMapBoxDraw, removeMapBoxDraw };
+*/
+// TODO Re-implement the polygon service for deck.gl
+export default true;
diff --git a/packages/chaire-lib-frontend/src/services/map/MapPopupManager.ts b/packages/chaire-lib-frontend/src/services/map/MapPopupManager.ts
@@ -4,7 +4,6 @@
  * This file is licensed under the MIT License.
  * License text available at https://opensource.org/licenses/MIT
  */
-import MapboxGL from 'mapbox-gl';
 
 /**
  * Class that keeps track of the popups currently displaying on the map (there
@@ -18,6 +17,8 @@ import MapboxGL from 'mapbox-gl';
  * @class MapPopupManager
  */
 class MapPopupManager {
+    // TODO Re-implement for mapbox, or at least retrieve the popup functionality
+    /*
     private map: MapboxGL.Map | undefined;
     private _popupsByName: { [key: string]: MapboxGL.Popup } = {};
 
@@ -49,7 +50,7 @@ class MapPopupManager {
         for (const popupName in this._popupsByName) {
             this.removePopup(popupName);
         }
-    }
+    } */
 }
 
 export default MapPopupManager;
diff --git a/packages/chaire-lib-frontend/src/styles/styles-transition.scss b/packages/chaire-lib-frontend/src/styles/styles-transition.scss
@@ -9,9 +9,7 @@
 @import './footer';
 @import './form';
 @import './modal';
-@import '~mapbox-gl/dist/mapbox-gl.css';
 @import '~font-awesome/css/font-awesome.min.css';
-@import './mapbox-gl-custom';
 @import './collapsible';
 @import './dashboard';
 @import './leftMenu';

diff --git a/packages/transition-frontend/package.json b/packages/transition-frontend/package.json
@@ -28,7 +28,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@turf/turf": "^6.3.0",
     "@types/node": "^17.0.38",
     "@types/react": "^16.9.0",
@@ -43,7 +42,6 @@
     "history": "^4.9.0",
     "i18next": "^22.4.15",
     "lodash": "^4.17.21",
-    "mapbox-gl": "chairemobilite/mapbox-gl-js#39bbf9aeb1859424e29cff2584715fddc9d018b9",
     "maplibre-gl": "^3.6.1",
     "moment": "^2.29.4",
     "moment-business-days": "^1.2.0",
@@ -78,7 +76,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-datepicker": "^4.1.6",
     "@types/react-mathjax": "^1.0.1",

diff --git a/packages/transition-frontend/src/components/map/TransitionMainMap.tsx b/packages/transition-frontend/src/components/map/TransitionMainMap.tsx
@@ -11,8 +11,6 @@ import DeckGL from '@deck.gl/react/typed';
 import { Layer, Deck } from '@deck.gl/core/typed';
 
 import { Map as MapLibreMap } from 'react-map-gl/maplibre';
-import MapboxGL from 'mapbox-gl';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import _debounce from 'lodash/debounce';
 
 import Preferences from 'chaire-lib-common/lib/config/Preferences';
@@ -24,7 +22,6 @@ import MapLayerManager from 'chaire-lib-frontend/lib/services/map/MapLayerManage
 import TransitPathFilterManager from '../../services/map/TransitPathFilterManager';
 import MapPopupManager from 'chaire-lib-frontend/lib/services/map/MapPopupManager';
 import serviceLocator from 'chaire-lib-common/lib/utils/ServiceLocator';
-import { getMapBoxDraw, removeMapBoxDraw } from 'chaire-lib-frontend/lib/services/map/MapPolygonService';
 import { findOverlappingFeatures } from 'chaire-lib-common/lib/services/geodata/FindOverlappingFeatures';
 import Node from 'transition-common/lib/services/nodes/Node';
 
@@ -105,10 +102,8 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
             };
         };
     };
-    private map: MapboxGL.Map | undefined;
     private popupManager: MapPopupManager;
     private mapContainer;
-    private draw: MapboxDraw | undefined;
     private mapCallbacks: MapCallbacks;
     private updateCounts: { [layerName: string]: number } = {};
 
@@ -195,25 +190,6 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
         };
     }
 
-    fitBounds = (coordinates: [number, number]) => {
-        this.map?.fitBounds(coordinates, {
-            padding: 20,
-            bearing: this.map.getBearing()
-        });
-    };
-
-    setCenter = (coordinates: [number, number]) => {
-        this.map?.setCenter(coordinates);
-    };
-
-    onEnableBoxZoom = () => {
-        this.map?.boxZoom.enable();
-    };
-
-    onDisableBoxZoom = () => {
-        this.map?.boxZoom.disable();
-    };
-
     showPathsByAttribute = (attribute: string, value: any) => {
         // attribute must be agency_id or line_id
         if (attribute === 'agency_id') {
@@ -253,23 +229,15 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
             this.updateFilter
         );
         serviceLocator.eventManager.on('map.updateLayers', this.updateLayers);
-        serviceLocator.eventManager.on('map.addPopup', this.addPopup);
-        serviceLocator.eventManager.on('map.removePopup', this.removePopup);
         serviceLocator.eventManager.on('map.clearFilter', this.clearFilter);
         serviceLocator.eventManager.on('map.showLayer', this.showLayer);
         serviceLocator.eventManager.on('map.hideLayer', this.hideLayer);
         serviceLocator.eventManager.on('map.paths.byAttribute.show', this.showPathsByAttribute);
         serviceLocator.eventManager.on('map.paths.byAttribute.hide', this.hidePathsByAttribute);
         serviceLocator.eventManager.on('map.paths.clearFilter', this.clearPathsFilter);
-        serviceLocator.eventManager.on('map.fitBounds', this.fitBounds);
-        serviceLocator.eventManager.on('map.setCenter', this.setCenter);
-        serviceLocator.eventManager.on('map.enableBoxZoom', this.onEnableBoxZoom);
-        serviceLocator.eventManager.on('map.disableBoxZoom', this.onDisableBoxZoom);
         serviceLocator.eventManager.on('map.showContextMenu', this.showContextMenu);
         serviceLocator.eventManager.on('map.hideContextMenu', this.hideContextMenu);
-        serviceLocator.eventManager.on('map.handleDrawControl', this.handleDrawControl);
         //serviceLocator.eventManager.on('map.deleteSelectedNodes', this.deleteSelectedNodes);
-        serviceLocator.eventManager.on('map.deleteSelectedPolygon', this.deleteSelectedPolygon);
         serviceLocator.eventManager.emit('map.loaded');
         Preferences.addChangeListener(this.onPreferencesChange);
     };
@@ -286,31 +254,16 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
         serviceLocator.eventManager.off('map.updateEnabledLayers', this.updateEnabledLayers);
         serviceLocator.eventManager.off('map.updateLayer', this.updateLayer);
         serviceLocator.eventManager.off('map.updateLayers', this.updateLayers);
-        serviceLocator.eventManager.off('map.addPopup', this.addPopup);
-        serviceLocator.eventManager.off('map.removePopup', this.removePopup);
         serviceLocator.eventManager.off('map.layers.updateFilter', this.updateFilter);
         serviceLocator.eventManager.off('map.clearFilter', this.clearFilter);
         serviceLocator.eventManager.off('map.showLayer', this.showLayer);
         serviceLocator.eventManager.off('map.hideLayer', this.hideLayer);
         serviceLocator.eventManager.off('map.paths.byAttribute.show', this.showPathsByAttribute);
         serviceLocator.eventManager.off('map.paths.byAttribute.hide', this.hidePathsByAttribute);
         serviceLocator.eventManager.off('map.paths.clearFilter', this.clearPathsFilter);
-        serviceLocator.eventManager.off('map.fitBounds', this.fitBounds);
-        serviceLocator.eventManager.off('map.setCenter', this.setCenter);
-        serviceLocator.eventManager.off('map.enableBoxZoom', this.onEnableBoxZoom);
-        serviceLocator.eventManager.off('map.disableBoxZoom', this.onDisableBoxZoom);
         serviceLocator.eventManager.off('map.showContextMenu', this.showContextMenu);
         serviceLocator.eventManager.off('map.hideContextMenu', this.hideContextMenu);
-        serviceLocator.eventManager.off('map.handleDrawControl', this.handleDrawControl);
         //serviceLocator.eventManager.off('map.deleteSelectedNodes', this.deleteSelectedNodes);
-        serviceLocator.eventManager.off('map.deleteSelectedPolygon', this.deleteSelectedPolygon);
-        this.map?.remove(); // this will clean up everything including events
-    };
-
-    onResizeContainer = () => {
-        if (this.map) {
-            this.map.resize();
-        }
     };
 
     private executeEvent = (event: MapEventHandlerDescriptor, pointInfo: PointInfo, e: MjolnirEvent) => {
@@ -367,20 +320,7 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
     };
 
     setDrawPolygonService = () => {
-        const map = this.map;
-        if (!map) return;
-        this.draw = getMapBoxDraw(
-            map,
-            (data) => {
-                this.modeChangePolygonService(data);
-            },
-            (polygon) => {
-                this.handleDrawPolygonService(polygon);
-            },
-            (polygon) => {
-                /* Nothing to do */
-            }
-        );
+        // TODO Re-implement
     };
 
     /**
@@ -429,24 +369,6 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
         }
     };
 
-    deleteSelectedPolygon = () => {
-        if (this.draw) {
-            this.draw.deleteAll().getAll();
-        }
-        serviceLocator.selectedObjectsManager.select('selectedNodes', null);
-        serviceLocator.selectedObjectsManager.select('isContainSelectedFrozenNodes', null);
-        serviceLocator.selectedObjectsManager.select('isDrawPolygon', null);
-        serviceLocator.eventManager.emit('selected.update.nodes');
-        serviceLocator.eventManager.emit('map.updateLayers', {
-            transitNodesSelected: turfFeatureCollection([]),
-            transitNodes250mRadius: turfFeatureCollection([]),
-            transitNodes500mRadius: turfFeatureCollection([]),
-            transitNodes750mRadius: turfFeatureCollection([]),
-            transitNodes1000mRadius: turfFeatureCollection([]),
-            transitNodesRoutingRadius: turfFeatureCollection([])
-        });
-    };
-
     onDeleteSelectedNodes = () => {
         serviceLocator.eventManager.emit('progress', { name: 'DeletingNodes', progress: 0.0 });
         const selectedNodes = serviceLocator.selectedObjectsManager.get('selectedNodes');
@@ -465,51 +387,10 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
                 console.log('Error deleting unused nodes', error);
             })
             .finally(() => {
-                this.deleteSelectedPolygon();
                 serviceLocator.eventManager.emit('progress', { name: 'DeletingNodes', progress: 1.0 });
             });
     };
 
-    handleDrawControl = (section: string) => {
-        const map = this.map;
-        if (!map) return;
-        if (section === 'nodes' && !this.draw) {
-            this.setDrawPolygonService();
-        } else if (section !== 'nodes' && this.draw) {
-            this.deleteSelectedPolygon();
-            removeMapBoxDraw(
-                map,
-                this.draw,
-                () => {
-                    /* Nothing to do */
-                },
-                () => {
-                    /* Nothing to do */
-                },
-                () => {
-                    /* Nothing to do */
-                }
-            );
-            this.draw = null;
-        }
-    };
-
-    addPopup = (popupId: string, popup: MapboxGL.Popup, removeAll = true) => {
-        this.hideContextMenu();
-        if (removeAll) {
-            this.removeAllPopups();
-        }
-        this.popupManager.addPopup(popupId, popup);
-    };
-
-    removePopup = (popupId: string) => {
-        this.popupManager.removePopup(popupId);
-    };
-
-    removeAllPopups = () => {
-        this.popupManager.removeAllPopups();
-    };
-
     updateLayer = (args: {
         layerName: string;
         data: GeoJSON.FeatureCollection | ((original: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection);

diff --git a/packages/transition-frontend/src/services/map/events/MapRelatedCustomEvents.ts b/packages/transition-frontend/src/services/map/events/MapRelatedCustomEvents.ts
@@ -10,16 +10,15 @@
  * TODO: Other parts of the app should not be "map-aware", there should be more
  * generic events to which the map can register
  */
-import { Popup } from 'mapbox-gl';
-
 import serviceLocator from 'chaire-lib-common/lib/utils/ServiceLocator';
 import { EventEmitter } from 'events';
 import Node from 'transition-common/lib/services/nodes/Node';
 
 const events = function (eventManager: EventEmitter) {
     return {
         'path.hoverNode': function (node: Node, nodeTitle = node.toString(false)) {
-            const popup = new Popup({
+            // TODO Re-implement
+            /*const popup = new Popup({
                 offset: 10,
                 anchor: 'bottom'
             });
@@ -38,7 +37,7 @@ const events = function (eventManager: EventEmitter) {
             } else {
                 popup.setHTML(`<p>${nodeTitle}</p>`);
             }
-            eventManager.emit('map.addPopup', nodeId, popup);
+            eventManager.emit('map.addPopup', nodeId, popup);*/
         },
 
         'path.unhoverNode': function (nodeId: string) {