feat: Automatic zoom to fit data bounds

Fix #689

Author: Shadab Khan

react/src/demo/example-data/deckgl-map.json

@@ -39,9 +39,7 @@
       437720,
       6481113
     ],
-    "zoom": -3,
     "layers": [
-
       {
         "@@type": "ColormapLayer",
         "image": "@@#resources.propertyMap",

react/src/lib/components/DeckGLMap/components/Map.tsx

@@ -2,7 +2,7 @@ import { JSONConfiguration, JSONConverter } from "@deck.gl/json";
 import DeckGL from "@deck.gl/react";
 import { PickInfo } from "deck.gl";
 import { Feature } from "geojson";
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import Settings from "./settings/Settings";
 import JSON_CONVERTER_CONFIG from "../utils/configuration";
 import { MapState } from "../redux/store";
@@ -17,6 +17,7 @@ import { DeckGLView } from "./DeckGLView";
 import { Viewport } from "@deck.gl/core";
 import { colorTablesArray } from "@emerson-eps/color-tables/";
 import { LayerProps, LayerContext } from "@deck.gl/core/lib/layer";
+import { ViewStateProps } from "@deck.gl/core/lib/deck";
 import { ViewProps } from "@deck.gl/core/views/view";
 import { isEmpty } from "lodash";
 import ColorLegend from "./ColorLegend";
@@ -26,6 +27,7 @@ import {
     getLayersWithDefaultProps,
 } from "../layers/utils/layerTools";
 import ViewFooter from "./ViewFooter";
+import fitBounds from "../utils/fit-bounds";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const colorTables = require("@emerson-eps/color-tables/src/component/color-tables.json");
@@ -184,14 +186,6 @@ const Map: React.FC<MapProps> = ({
     setEditedData,
     children,
 }: MapProps) => {
-    // state for initial views prop (target and zoom) of DeckGL component
-    const [initialViewState, setInitialViewState] =
-        useState<Record<string, unknown>>();
-    useEffect(() => {
-        if (bounds == undefined || zoom == undefined) return;
-        setInitialViewState(getInitialViewState(bounds, zoom));
-    }, [bounds, zoom]);
-
     // state for views prop of DeckGL component
     const [viewsProps, setViewsProps] = useState<ViewProps[]>([]);
     useEffect(() => {
@@ -230,16 +224,6 @@ const Map: React.FC<MapProps> = ({
         setDeckGLLayers(jsonToObject(layers, enumerations) as Layer<unknown>[]);
     }, [st_layers, resources, editedData]);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [viewState, setViewState] = useState<any>();
-
-    const refCb = useCallback((deckRef) => {
-        if (deckRef && deckRef.deck) {
-            // Needed to initialize the viewState on first load
-            setViewState(deckRef.deck.viewState);
-        }
-    }, []);
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [hoverInfo, setHoverInfo] = useState<any>([]);
     const onHover = useCallback(
@@ -259,8 +243,39 @@ const Map: React.FC<MapProps> = ({
         [coords]
     );
 
-    const [isLoaded, setIsLoaded] = useState<boolean>(false);
+    const deckRef = useRef<DeckGL>(null);
+    const [viewState, setViewState] = useState<ViewStateProps>();
+
+    const onLoad = useCallback(() => {
+        if (deckRef == null) return;
+
+        const deck = deckRef.current?.deck;
+        if (deck && bounds) {
+            const width = deck.width;
+            const height = deck.height;
+            const [west, south] = [bounds[0], bounds[1]];
+            const [east, north] = [bounds[2], bounds[3]];
+            const fitted_bound = fitBounds({
+                width,
+                height,
+                bounds: [
+                    [west, south],
+                    [east, north],
+                ],
+            });
 
+            const zoom_defined_by_consumer = zoom != undefined;
+            const view_state = {
+                target: [fitted_bound.x, fitted_bound.y, 0],
+                zoom: zoom_defined_by_consumer ? zoom : fitted_bound.zoom,
+                rotationX: 90, // look down z -axis.
+                rotationOrbit: 0,
+            };
+            setViewState(view_state);
+        }
+    }, [deckRef]);
+
+    const [isLoaded, setIsLoaded] = useState<boolean>(false);
     const onAfterRender = useCallback(() => {
         if (deckGLLayers) {
             const state = deckGLLayers.every((layer) => layer.isLoaded);
@@ -301,7 +316,6 @@ const Map: React.FC<MapProps> = ({
             <DeckGL
                 id={id}
                 viewState={viewState}
-                initialViewState={initialViewState}
                 views={deckGLViews}
                 layerFilter={layerFilter}
                 layers={deckGLLayers}
@@ -325,11 +339,13 @@ const Map: React.FC<MapProps> = ({
                         return feat?.properties?.["name"];
                     }
                 }}
-                ref={refCb}
                 onHover={onHover}
                 onViewStateChange={(viewport) =>
                     setViewState(viewport.viewState)
                 }
+                ref={deckRef}
+                onLoad={onLoad}
+                onResize={onLoad}
                 onAfterRender={onAfterRender}
             >
                 {children}
@@ -372,11 +388,7 @@ const Map: React.FC<MapProps> = ({
 
             {scale?.visible ? (
                 <DistanceScale
-                    zoom={
-                        viewState?.zoom
-                            ? viewState.zoom
-                            : initialViewState?.["zoom"]
-                    }
+                    zoom={viewState?.zoom}
                     incrementValue={scale.incrementValue}
                     widthPerUnit={scale.widthPerUnit}
                     position={scale.position}
@@ -412,7 +424,6 @@ Map.defaultProps = {
         horizontal: false,
     },
     coordinateUnit: "m",
-    zoom: -3,
     views: {
         layout: [1, 1],
         showLabel: false,
@@ -450,25 +461,6 @@ function jsonToObject(
     return jsonConverter.convert(filtered_data);
 }
 
-// returns initial view state for DeckGL
-function getInitialViewState(
-    bounds: [number, number, number, number],
-    zoom: number
-): Record<string, unknown> {
-    const width = bounds[2] - bounds[0]; // right - left
-    const height = bounds[3] - bounds[1]; // top - bottom
-
-    const initial_view_state = {
-        // target to center of the bound
-        target: [bounds[0] + width / 2, bounds[1] + height / 2, 0],
-        zoom: zoom,
-        rotationX: 90, // look down z -axis.
-        rotationOrbit: 0,
-    };
-
-    return initial_view_state;
-}
-
 // construct views object for DeckGL component
 function getViews(views: ViewsType | undefined): Record<string, unknown>[] {
     const deckgl_views = [];

react/src/lib/components/DeckGLMap/utils/fit-bounds.js

@@ -0,0 +1,84 @@
+// Returns map settings {latitude, longitude, zoom}
+// that will contain the provided corners within the provided width.
+// Only supports non-perspective mode.
+
+export function clamp(x, min, max) {
+    return x < min ? min : x > max ? max : x;
+}
+
+function ieLog2(x) {
+    return Math.log(x) * Math.LOG2E;
+}
+
+// Handle missing log2 in IE 11
+export const log2 = Math.log2 || ieLog2;
+
+export default function fitBounds({
+    width,
+    height,
+    bounds,
+    minExtent = 0, // 0.01 would be about 1000 meters (degree is ~110KM)
+    maxZoom = 24, // ~x4,000,000 => About 10 meter extents
+    // options
+    padding = 0,
+    offset = [0, 0],
+}) {
+    if (Number.isFinite(padding)) {
+        const p = padding;
+        padding = {
+            top: p,
+            bottom: p,
+            left: p,
+            right: p,
+        };
+    } else {
+        // Make sure all the required properties are set
+        console.assert(
+            Number.isFinite(padding.top) &&
+                Number.isFinite(padding.bottom) &&
+                Number.isFinite(padding.left) &&
+                Number.isFinite(padding.right)
+        );
+    }
+
+    const [[west, south], [east, north]] = bounds;
+
+    const nw = [west, north];
+    const se = [east, south];
+
+    // width/height on the Web Mercator plane
+    const size = [
+        Math.max(Math.abs(se[0] - nw[0]), minExtent),
+        Math.max(Math.abs(se[1] - nw[1]), minExtent),
+    ];
+
+    const targetSize = [
+        width - padding.left - padding.right - Math.abs(offset[0]) * 2,
+        height - padding.top - padding.bottom - Math.abs(offset[1]) * 2,
+    ];
+    console.assert(targetSize[0] > 0 && targetSize[1] > 0);
+
+    // scale = screen pixels per unit on the Web Mercator plane
+    const scaleX = targetSize[0] / size[0];
+    const scaleY = targetSize[1] / size[1];
+
+    // Find how much we need to shift the center
+    const offsetX = (padding.right - padding.left) / 2 / scaleX;
+    const offsetY = (padding.bottom - padding.top) / 2 / scaleY;
+
+    const center = [
+        (se[0] + nw[0]) / 2 + offsetX,
+        (se[1] + nw[1]) / 2 + offsetY,
+    ];
+
+    const centerLngLat = center;
+    const zoom = Math.min(maxZoom, log2(Math.abs(Math.min(scaleX, scaleY))));
+
+    console.assert(Number.isFinite(zoom));
+
+    return {
+        x: centerLngLat[0],
+        y: centerLngLat[1],
+        zoom,
+    };
+}