fix: Ensure view state is updated in Python with a maplibre map renderer (#1017)

Passing `onViewStateChange` to deck.gl when using MapboxOverlay does
nothing. Instead, we need to map the event propagated by `onMoveEnd` to
the existing callback

Author: kylebarron

src/index.tsx

@@ -198,7 +198,7 @@ function App() {
 
       // This condition is necessary to confirm that the viewState is
       // of type MapViewState.
-      if ("latitude" in viewState) {
+      if (viewState && "latitude" in viewState) {
         // TODO: ensure all view state types get updated on the JS side
         setViewState(viewState);
       }

src/renderers/overlay.tsx

@@ -1,6 +1,6 @@
 import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox";
 import React from "react";
-import Map, { useControl } from "react-map-gl/maplibre";
+import Map, { useControl, ViewStateChangeEvent } from "react-map-gl/maplibre";
 
 import type { MapRendererProps, OverlayRendererProps } from "./types";
 import { isGlobeView } from "../util";
@@ -35,15 +35,29 @@ const OverlayRenderer: React.FC<MapRendererProps & OverlayRendererProps> = (
     customAttribution,
     initialViewState,
     views,
+    onViewStateChange,
     ...deckProps
   } = mapProps;
+  const onMoveEnd = onViewStateChange
+    ? (evt: ViewStateChangeEvent) => {
+        const viewState = {
+          longitude: evt.viewState.longitude,
+          latitude: evt.viewState.latitude,
+          zoom: evt.viewState.zoom,
+          pitch: evt.viewState.pitch,
+          bearing: evt.viewState.bearing,
+        };
+        onViewStateChange({ viewId: "mapLibreId", viewState });
+      }
+    : undefined;
   return (
     <Map
       reuseMaps
       initialViewState={initialViewState}
       mapStyle={mapStyle}
       attributionControl={{ customAttribution }}
       style={{ width: "100%", height: "100%" }}
+      onMoveEnd={onMoveEnd}
       {...(isGlobeView(views) && { projection: "globe" })}
     >
       {controls.map((control) => control.renderMaplibre())}