fix

src/App.tsx

@@ -3,15 +3,12 @@ import "./App.css";
 
 import Desktop from "./pages/Desktop/Desktop";
 import Apartment from "./pages/Mobile/Apartment";
-import MapComponent from "./components/Map";
+// import MapComponent from "./components/Map/Map";
+import { MapComponent } from "./components/Map/Map";
 
 function App() {
-  // return <>{isMobile ? <Apartment /> : <Desktop />}</>;
-  return (
-    <>
-      <MapComponent />
-    </>
-  );
+  return <>{isMobile ? <Apartment /> : <Desktop />}</>;
+  return <>{/* <MapComponent /> */}</>;
 }
 
 export default App;

src/components/Map.tsx

@@ -1,56 +0,0 @@
-import Color from "@arcgis/core/Color";
-import { useRef, useEffect } from "react";
-import Graphic from "@arcgis/core/Graphic";
-import Mesh from "@arcgis/core/geometry/Mesh";
-import Point from "@arcgis/core/geometry/Point";
-import MapView from "@arcgis/core/views/MapView";
-import Map from "@arcgis/core/Map";
-
-const MapComponent = () => {
-  const mapRef = useRef(null);
-
-  const point = new Point({
-    longitude: 55,
-    latitude: 25,
-  });
-
-  const mesh = Mesh.createBox(point, {
-    size: {
-      width: 100,
-      height: 50,
-      depth: 50,
-    },
-  });
-
-  const markerSymbol = {
-    type: "simple-marker",
-    color: [226, 119, 40],
-  };
-
-  const pointGraphic = new Graphic({
-    geometry: mesh,
-    symbol: markerSymbol,
-  });
-
-  useEffect(() => {
-    if (!mapRef?.current) return;
-    const map = new Map({
-      basemap: "osm",
-    });
-
-    const view = new MapView({
-      map: map,
-      container: mapRef.current,
-      center: [55, 25],
-      zoom: 13,
-    });
-
-    view.graphics.add(pointGraphic);
-
-    return () => view && view.destroy();
-  }, []);
-
-  return <div ref={mapRef} className="w-[500px] h-[500px] bg-slate-50"></div>;
-};
-
-export default MapComponent;

src/components/Map/Map.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react";
+import MapView from "@arcgis/core/views/MapView";
+import Map from "@arcgis/core/Map";
+// import { createMapView } from "../../ArcGIS-SDK";
+
+const createMapView = (container: HTMLDivElement) => {
+  const map = new Map({
+    basemap: "osm",
+  });
+  return new MapView({
+    map: map,
+    container: container,
+    center: [55, 25],
+    zoom: 13,
+  });
+};
+
+// import { MapViewContext } from "../Contexts";
+import { MapViewContext } from "./MapViewContext";
+
+interface IArcMapViewProps {
+  children?: React.ReactNode;
+}
+
+export const MapComponent = (props: IArcMapViewProps) => {
+  const { children } = props;
+
+  const mapRef = useRef(null);
+
+  const [view, setView] = useState<__esri.MapView | undefined>();
+
+  useEffect(() => {
+    if (!mapRef?.current) return;
+
+    const _view = createMapView(mapRef.current);
+    setView(_view);
+
+    return () => _view && _view.destroy();
+  }, []);
+  return (
+    <div className="w-80 h-80" ref={mapRef}>
+      <MapViewContext.Provider value={{ view }}>
+        {children}
+      </MapViewContext.Provider>
+    </div>
+  );
+};

src/components/Map/MapGraphicsLayer.tsx

@@ -0,0 +1,44 @@
+import { useContext, useEffect, useState } from "react";
+
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import Graphic from "@arcgis/core/Graphic";
+import Point from "@arcgis/core/geometry/Point";
+import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
+
+import { MapViewContext } from "./MapViewContext";
+
+type MapGraphicsLayerProps = {
+  children?: React.ReactNode;
+};
+
+export const MapGraphicsLayer = ({ children }: MapGraphicsLayerProps) => {
+  const { view } = useContext(MapViewContext);
+
+  const [graphicsLayer, setGraphicsLayer] = useState<
+    __esri.GraphicsLayer | undefined
+  >();
+
+  useEffect(() => {
+    const _graphicsLayer = new GraphicsLayer();
+    setGraphicsLayer(_graphicsLayer);
+
+    return () => {
+      console.log("ArcGraphicsLayer unmounting");
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!view || !graphicsLayer) return;
+    view.map.add(graphicsLayer);
+  }, [view, graphicsLayer]);
+
+  return (
+    <>
+      {graphicsLayer && (
+        <GraphicsLayerContext.Provider value={{ graphicsLayer }}>
+          {children}
+        </GraphicsLayerContext.Provider>
+      )}
+    </>
+  );
+};

src/components/Map/MapViewContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+interface IViewContext {
+    view: __esri.MapView | undefined
+}
+
+
+
+export const MapViewContext = createContext({} as IViewContext)

src/components/ViewToggle.tsx

@@ -51,7 +51,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}
-          General View
+          Outdoor
         </div>
         <div
           onClick={handleOnSecondClick}