Add search params for modelId

app/components/Map.tsx

@@ -11,7 +11,7 @@ async function lazyLoad() {
   return SceneView;
 }
 
-export function Map() {
+export function Map({ modelId }: { modelId: string }) {
   const divRef = useRef<HTMLDivElement>(null);
   const { setSceneView } = useContext(SceneViewContext) as SceneViewContextType;
 
@@ -22,7 +22,7 @@ export function Map() {
     async function loadScene() {
       if (divRef.current) {
         const SceneView = await lazyLoad();
-        const _sceneView = await SceneView.create(divRef.current, "20");
+        const _sceneView = await SceneView.create(divRef.current, modelId);
         if (_sceneView) {
           setSceneView(_sceneView);
         }
@@ -36,7 +36,7 @@ export function Map() {
     return () => {
       ignore = true;
     };
-  }, [divRef, setSceneView]);
+  }, [divRef, setSceneView, modelId]);
 
   return (
     <div className="w-full h-full">

app/page.tsx

@@ -3,11 +3,17 @@
 import { Map } from "./components/Map";
 import { Form } from "./components/Form";
 import { SceneViewProvider } from "./providers/scene-view-provider";
-import { useState } from "react";
+import { use, useState } from "react";
 import { ResetView } from "./components/ResetView";
+import { MODEL_ID } from "./three/config";
 
-export default function Home() {
+export default function Home({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
   const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
+  const modelId = (use(searchParams).modelId as string) ?? MODEL_ID;
 
   return (
     <main className="h-screen">
@@ -29,7 +35,7 @@ export default function Home() {
               <div className="hidden sm:block absolute top-2 right-2">
                 <ResetView></ResetView>
               </div>
-              <Map></Map>
+              <Map modelId={modelId}></Map>
             </div>
             <div
               className={`fixed sm:static inset-0 flex flex-col gap-1 items-center bg-white dark:bg-gray-700 p-2 sm:border-l border-gray-200 shadow-lg transition-transform duration-300 w-full sm:w-[350px] xl:w-[480px] ${

app/three/SceneView.ts

@@ -82,19 +82,24 @@ export class SceneView extends EventTarget {
   }
 
   static async create(container: HTMLElement, modelId: string) {
-    const { scene, model, dragControls, camera, extent, controls, renderer } =
+    const data = await init(container, modelId);
-      await init(container, modelId);
+    if (data) {
+      const { scene, model, dragControls, camera, extent, controls, renderer } =
+        data;
 
-    return new SceneView(
+      return new SceneView(
-      scene,
+        scene,
-      model,
+        model,
-      dragControls,
+        dragControls,
-      camera,
+        camera,
-      container,
+        container,
-      extent,
+        extent,
-      controls,
+        controls,
-      renderer
+        renderer
-    );
+      );
+    } else {
+      return null;
+    }
   }
 
   get scene() {
@@ -408,6 +413,8 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
   const mappedFeatures = modelData.mappedfeatures;
   const modelarea = modelData.modelarea;
 
+  if (!mappedFeatures) return null;
+
   // Transfrom extent to EPSG 3857
   const pmin = transform([modelarea.x.min, modelarea.y.min, modelarea.z.min]);
   const pmax = transform([modelarea.x.max, modelarea.y.max, modelarea.z.max]);