(chore) Update docs to MapLibre and react-map-gl v7 (#2497)

Signed-off-by: Chris Gervang <chris@gervang.com>

README.md

@@ -28,7 +28,7 @@
 
 [<img width="600" alt="Kepler.gl Demo" src="https://eng.uber.com/wp-content/uploads/2018/05/image4-3-768x493.png">](http://kepler.gl/#/demo)
 
-[Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [Mapbox GL](https://www.mapbox.com) and [deck.gl](http://uber.github.io/deck.gl/#/), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly.
+[Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [MapLibre GL](https://maplibre.org/) and [deck.gl](https://deck.gl/), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly.
 
 Kepler.gl is also a React component that uses [Redux](https://redux.js.org/) to manage its state and data flow. It can be embedded into other React-Redux applications and is highly customizable. For information on how to embed kepler.gl in your app take a look at this step-by-step [tutorial][vis-academy] on vis.academy.
 
@@ -217,7 +217,7 @@ Action triggered when map viewport is updated.
 
 Function called when `KeplerGL` adds or removes a `MapContainer` component having an inner Mapbox map.
 
-The `mapbox` argument is an [`InteractiveMap`](https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map) when added or `null` when removed.
+The `mapbox` argument is an [`MapRef`](https://visgl.github.io/react-map-gl/docs/api-reference/types#mapref) when added or `null` when removed.
 
 The `index` argument is 0 for a single map or 1 for an additional map (since `KeplerGL` supports an optional split map view).
 

docs/api-reference/actions/actions.md

@@ -698,15 +698,15 @@ Returns **{type: ActionTypes.MAP_CLICK}**
 ### onMouseMove
 
 Trigger map mouse moveevent, payload would be
-React-map-gl PointerEvent
-[https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event][202]
+React-map-gl MapLayerMouseEvent
+[https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent][202]
 
 - **ActionTypes**: [`ActionTypes.MOUSE_MOVE`][12]
 - **Updaters**: [`visStateUpdaters.mouseMoveUpdater`][203]
 
 **Parameters**
 
-- `evt` **[Object][164]** PointerEvent
+- `evt` **[Object][164]** MapLayerMouseEvent
 
 Returns **{type: ActionTypes.MAP_CLICK}**
 
@@ -1500,7 +1500,7 @@ Set the export map format (html, json)
 [199]: ../reducers/vis-state.md#visstateupdaterslayerclickupdater
 [200]: ../reducers/vis-state.md#visstateupdaterslayerhoverupdater
 [201]: ../reducers/vis-state.md#visstateupdatersmapclickupdater
-[202]: https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event
+[202]: https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent
 [203]: ../reducers/vis-state.md#visstateupdatersmousemoveupdater
 [204]: ../reducers/vis-state.md#visstateupdatersremovedatasetupdater
 [205]: ../reducers/vis-state.md#visstateupdatersremovefilterupdater

examples/demo-app/src/app.js

@@ -380,8 +380,8 @@ class App extends Component {
       // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
       // console.log(`Map ${index} has closed`);
     } else {
-      // We expect an InteractiveMap created by KeplerGl's MapContainer.
-      // https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map
+      // We expect an Map created by KeplerGl's MapContainer.
+      // https://visgl.github.io/react-map-gl/docs/api-reference/map
       const map = mapbox.getMap();
       map.on('zoomend', e => {
         // console.log(`Map ${index} zoom level: ${e.target.style.z}`);

src/actions/src/vis-state-actions.ts

@@ -1061,11 +1061,11 @@ export type OnMouseMoveUpdaterAction = {
 };
 /**
  * Trigger map mouse moveevent, payload would be
- * React-map-gl PointerEvent
- * https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event
+ * React-map-gl MapLayerMouseEvent
+ * https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent
  *
  * @memberof visStateActions
- * @param evt - PointerEvent
+ * @param evt - MapLayerMouseEvent
  * @returns action
  * @public
  */

src/utils/src/projection-utils.ts

@@ -60,7 +60,8 @@ export function getCenterAndZoomFromBounds(bounds, {width, height}) {
  * Add extra info about screen space position and world position to the event.
  * @param {*} event Event to normalize.
  * @param {*} viewport Current viewport.
- * @returns Normalized event with extra information.
+ * @returns Normalized event with extra information compatible with React-map-gl MapLayerMouseEvent
+ * https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent
  */
 export function normalizeEvent(event: any, viewport: WebMercatorViewport) {
   var bounds = event.target?.getBoundingClientRect();

test/browser-headless/component/map-container-test.js

@@ -57,7 +57,7 @@ test('MapContainerFactory - display all options', t => {
   t.equal(wrapper.find(MapControl).length, 1, 'Should display 1 MapControl');
 
   // TODO: why is this failing without Map in quotes
-  t.equal(wrapper.find('Map').length, 1, 'Should display 1 InteractiveMap');
+  t.equal(wrapper.find('Map').length, 1, 'Should display 1 Map');
   // Can't test overlay because mapboxgl is not supported in chromium
   t.equal(wrapper.find('Attribution').length, 1, 'Should display 1 Attribution');
 

test/browser/components/map-container-test.js

@@ -46,10 +46,10 @@ test('MapContainerFactory - display all options', t => {
 
   t.equal(wrapper.find('MapControl').length, 1, 'Should display 1 MapControl');
 
-  t.equal(wrapper.find('InteractiveMap').length, 1, 'Should display 1 InteractiveMap');
+  t.equal(wrapper.find('Map').length, 1, 'Should display 1 Map');
 
   // Editor
-  t.equal(wrapper.find('StaticMap').length, 1, 'Should display 1 DeckGl');
+  t.equal(wrapper.find('DeckGl').length, 1, 'Should display 1 DeckGl');
 
   const instance = wrapper.find(MapContainer).instance();