fix

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)