Add zoom to animation

Author: hanbyul-here

src/Animation.tsx

@@ -20,16 +20,11 @@ import PlayButton from "@/components/ui/PlayButton";
 
 import { usePausableAnimation } from "@/components/ui/utils";
 
+import { INITIAL_VIEW_STATE } from "./App";
+
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./App.css";
 
-const INITIAL_VIEW_STATE = {
-  latitude: 51.47,
-  longitude: 0.45,
-  zoom: 0,
-  maxZoom: 1,
-};
-
 const MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
 
@@ -153,8 +148,8 @@ function App() {
       // maxCacheByteSize: null,
       // maxCacheSize: null,
       // maxRequests: 6,
-      // maxZoom: 19,
-      // minZoom: 0,
+      maxZoom: zarrReader.maxZoom,
+      minZoom: zarrReader.minZoom,
       // onTileError: null,
       // onTileLoad: null,
       // onTileUnload: null,

src/App.tsx

@@ -18,7 +18,7 @@ import CheckBox from "@/components/ui/Checkbox";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./App.css";
 
-const INITIAL_VIEW_STATE = {
+export const INITIAL_VIEW_STATE = {
   latitude: 51.47,
   longitude: 0.45,
   zoom: 0,