Add responsive padding to FlyToGeoJsonExtension

NYCPlanning · Aug 22, 2024 · 1345110 · 1345110
1 parent 116764f
commit 1345110
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/app/extensions/FlyToGeoJsonExtension.ts b/app/extensions/FlyToGeoJsonExtension.ts
@@ -24,14 +24,22 @@ export class FlyToGeoJsonExtension extends LayerExtension {
     ) {
       const viewport = this.context.viewport as WebMercatorViewport;
       const [minX, minY, maxX, maxY] = bbox(props.data as Geometry);
-      const { longitude, latitude, zoom } = viewport.fitBounds([
-        [minX, minY],
-        [maxX, maxY],
-      ]);
+      const { longitude, latitude, zoom } = viewport.fitBounds(
+        [
+          [minX, minY],
+          [maxX, maxY],
+        ],
+        {
+          padding:
+            window.innerWidth < 992
+              ? { top: 100, bottom: 400, left: 16, right: 16 }
+              : { top: 64, bottom: 64, left: 368, right: 368 },
+        },
+      );
       const newViewState = {
         longitude,
         latitude,
-        zoom: zoom - 0.25,
+        zoom: zoom,
         transitionDuration: 750,
         transitionInterpolator: new FlyToInterpolator(),
       };