created map

src/App.tsx

@@ -5,7 +5,7 @@ import { useVilla } from "./hooks/useVilla";
 import Desktop from "./pages/Desktop/Desktop";
 import Mobile from "./pages/Mobile/Mobile";
 import useStore from "./store/store";
-import { MapComponent } from "./components/Map/Map";
+import MapComponent from "./components/Map/Map";
 
 function App() {
   const { villa } = useVilla();

src/components/Map/Map.tsx

@@ -1,56 +1,126 @@
-import { useEffect, useRef, useState } from "react";
-import MapView from "@arcgis/core/views/MapView";
-import Map from "@arcgis/core/Map";
+const rotatePolygon = (polygon: number[][], angle: number) => {
+  const height = 0.0005;
+  const width = 0.0005;
+  const centerY = polygon[2][1] - (polygon[2][1] - polygon[0][1]) / 2;
+  const centerX = polygon[2][0] - (polygon[2][0] - polygon[0][0]) / 2;
+  const scale = 1;
 
-// import { createMapView } from "../../ArcGIS-SDK";
+  const radian = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
+  const tAng = Math.asin(height / (2 * radian));
+  const rAng = angle * 0.0174532925;
 
-const createMapView = (container: HTMLDivElement) => {
-  // const map = new Map({
-  //   // extent:esri.geometry.geographicToWebMercator(initExtent),
-  //   slider:false
-  //   });
-  const map = new Map({
-    // basemap: "osm",
-    basemap: "streets",
-    // ground: "world-elevation",
-    // basemap: "terrain/base",
-  });
+  const X1 = centerX + Math.cos(rAng + 3.1415 + tAng) * radian;
+  const Y1 = centerY + Math.sin(rAng + 3.1415 + tAng) * radian;
 
-  return new MapView({
-    map: map,
-    container: container,
-    center: [54.67, 24.33],
-    zoom: 13,
-  });
+  const X2 = centerX + Math.cos(rAng - tAng) * radian;
+  const Y2 = centerY + Math.sin(rAng - tAng) * radian;
+
+  const X3 = centerX + Math.cos(rAng + tAng) * radian;
+  const Y3 = centerY + Math.sin(rAng + tAng) * radian;
+
+  const X4 = centerX + Math.cos(rAng + 3.1415 - tAng) * radian;
+  const Y4 = centerY + Math.sin(rAng + 3.1415 - tAng) * radian;
+
+  return [
+    [X1, Y1],
+    [X2, Y2],
+    [X3, Y3],
+    [X4, Y4],
+    [X1, Y1],
+  ];
 };
 
-// import { MapViewContext } from "../Contexts";
-import { MapViewContext } from "./MapViewContext";
+import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
+import { MapGraphic } from "./MapGraphic";
+import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol";
+import Polygon from "@arcgis/core/geometry/Polygon";
+import { MapViewComponent } from "./MapView";
+import { MapGraphicsLayer } from "./MapGraphicsLayer";
+import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
+import { MapGraphics } from "./MapGraphics";
 
-interface IArcMapViewProps {
-  children?: React.ReactNode;
-}
+export const createSimpleFillSymbol = (
+  simpleFillSymbolProperties: __esri.SimpleFillSymbolProperties
+) => new SimpleFillSymbol(simpleFillSymbolProperties);
 
-export const MapComponent = (props: IArcMapViewProps) => {
-  const { children } = props;
+const createPolygon = (polygonProperties: __esri.PolygonProperties) =>
+  new Polygon(polygonProperties);
 
-  const mapRef = useRef(null);
+const createSimpleLineSymbol = (
+  simpleLineSymbolProperties: __esri.SimpleLineSymbolProperties
+) => new SimpleLineSymbol(simpleLineSymbolProperties);
 
-  const [view, setView] = useState<__esri.MapView | undefined>();
+// w = 0.0005 y = 0.0005
+const ring = [[54.666601, 24.338671]];
+const a1mRing = [[54.670601, 24.344071]];
+// const a1mRing = [[54.670401, 24.344071]];
 
-  useEffect(() => {
-    if (!mapRef?.current) return;
+const polygon = createPolygon({
+  rings: [ring],
+});
 
-    const _view = createMapView(mapRef.current);
-    setView(_view);
+const a1mSymbol = new PictureMarkerSymbol({
+  url: "/images/map/A1M_Active.png",
+  width: 455.6 * 0.94,
+  height: 413.5 * 0.94,
+});
+
+const villas = new PictureMarkerSymbol({
+  url: "/images/map/Villas.png",
+  width: 455.6 * 0.94,
+  height: 413.5 * 0.94,
+});
+
+const activeVillaImage = [
+  { image: "A1M_Active.png", id: 1 },
+  { image: "A1T_Active.png", id: 2 },
+  { image: "A2M_Active.png", id: 3 },
+  { image: "A2T_Active.png", id: 4 },
+  { image: "B1M_Active.png", id: 5 },
+  { image: "B1T_Active.png", id: 6 },
+  { image: "B2M_Active.png", id: 7 },
+  { image: "B2T_Active.png", id: 8 },
+  { image: "C1M_Active.png", id: 9 },
+  { image: "C1T_Active.png", id: 10 },
+  { image: "C2M_Active.png", id: 11 },
+  { image: "C2T_Active.png", id: 12 },
+];
+
+const MapComponent = () => {
+  const symbol = new PictureMarkerSymbol({
+    url: `/images/map/${activeVillaImage[0].image}`,
+    width: 455.6 * 0.94,
+    height: 413.5 * 0.94,
+  });
 
-    return () => _view && _view.destroy();
-  }, []);
   return (
-    <div className="w-screen h-screen" ref={mapRef}>
-      <MapViewContext.Provider value={{ view }}>
-        {children}
-      </MapViewContext.Provider>
-    </div>
+    <MapViewComponent>
+      <MapGraphicsLayer>
+        {/* <MapGraphic geometry={polygon} symbol={simpleFillSymbol} /> */}
+        {/* <MapGraphic geometry={polygon} symbol={simpleLineSymbol} /> */}
+
+        {/* <MapGraphics geometry={polygon} images={activeVillaImage}/> */}
+        <MapGraphic geometry={polygon} symbol={villas} />
+        {activeVillaImage.map((villa) => {
+          const villaSymbol = new PictureMarkerSymbol({
+            // url: villa.image,
+            url: `/images/map/${villa.image}`,
+            width: 455.6 * 0.94,
+            height: 413.5 * 0.94,
+          });
+
+          return (
+            <MapGraphic
+              key={villa.id}
+              geometry={polygon}
+              symbol={villaSymbol}
+            />
+          );
+        })}
+        <MapGraphic geometry={polygon} symbol={symbol} />
+      </MapGraphicsLayer>
+    </MapViewComponent>
   );
 };
+
+export default MapComponent;

src/components/Map/MapGraphic.tsx

@@ -0,0 +1,22 @@
+import { useContext, useEffect, useState } from "react";
+import Graphic from "@arcgis/core/Graphic";
+
+import { MapLayerContext } from "./MapViewContext";
+
+export const MapGraphic = (graphicProperties: __esri.GraphicProperties) => {
+  const { graphicsLayer } = useContext(MapLayerContext);
+  const [graphic, setGraphic] = useState<__esri.Graphic | undefined>();
+
+  useEffect(() => {
+    const graphicPoint = new Graphic(graphicProperties);
+
+    setGraphic(graphicPoint);
+  }, []);
+
+  useEffect(() => {
+    if (!graphic || !graphicsLayer) return;
+    graphicsLayer.add(graphic);
+  }, [graphic, graphicsLayer]);
+
+  return <></>;
+};

src/components/Map/MapGraphics.tsx

@@ -0,0 +1,49 @@
+import { useContext, useEffect, useState } from "react";
+import Graphic from "@arcgis/core/Graphic";
+
+import { MapLayerContext } from "./MapViewContext";
+import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
+
+type MapGraphicsProps = {
+  images: string[];
+  width: number;
+  height: number;
+};
+
+export const MapGraphics = ({
+  images,
+  geometry,
+  width,
+  height,
+}: MapGraphicsProps & __esri.GraphicProperties) => {
+  const { graphicsLayer } = useContext(MapLayerContext);
+  const [graphics, setGraphics] = useState<__esri.Graphic[] | undefined>();
+
+  useEffect(() => {
+    const _graphics: __esri.Graphic[] = [];
+
+    images.forEach((img) => {
+      const villaSymbol = new PictureMarkerSymbol({
+        url: img,
+        width: width,
+        height: height,
+      });
+      const graphicPoint = new Graphic({
+        geometry: geometry,
+        symbol: villaSymbol,
+      });
+
+      _graphics.push(graphicPoint);
+    });
+    setGraphics(_graphics);
+  }, []);
+
+  useEffect(() => {
+    if (!graphics || !graphicsLayer || !graphics || graphics.length === 0)
+      return;
+
+    graphics.forEach((graph) => graphicsLayer.add(graph));
+  }, [graphics, graphicsLayer]);
+
+  return <></>;
+};

src/components/Map/MapGraphicsLayer.tsx

@@ -1,11 +1,8 @@
 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";
+import { MapLayerContext, MapViewContext } from "./MapViewContext";
 
 type MapGraphicsLayerProps = {
   children?: React.ReactNode;
@@ -20,11 +17,8 @@ export const MapGraphicsLayer = ({ children }: MapGraphicsLayerProps) => {
 
   useEffect(() => {
     const _graphicsLayer = new GraphicsLayer();
+    _graphicsLayer.effect = "brightness(0.75) contrast(250%)";
     setGraphicsLayer(_graphicsLayer);
-
-    return () => {
-      console.log("ArcGraphicsLayer unmounting");
-    };
   }, []);
 
   useEffect(() => {
@@ -35,9 +29,9 @@ export const MapGraphicsLayer = ({ children }: MapGraphicsLayerProps) => {
   return (
     <>
       {graphicsLayer && (
-        <GraphicsLayerContext.Provider value={{ graphicsLayer }}>
+        <MapLayerContext.Provider value={{ graphicsLayer }}>
           {children}
-        </GraphicsLayerContext.Provider>
+        </MapLayerContext.Provider>
       )}
     </>
   );

src/components/Map/MapView.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import MapView from "@arcgis/core/views/MapView";
+import { MapViewContext } from "./MapViewContext";
+import WebMap from "@arcgis/core/WebMap";
+
+const createMapView = (container: HTMLDivElement) => {
+  // const map = new Map({
+  //   basemap: "streets-vector"
+  // });
+
+  const webmap = new WebMap({
+    // basemap: "streets-night-vector",
+    // map: map
+    portalItem: {
+      id: "aa1d3f80270146208328cf66d022e09c",
+    },
+  });
+
+  function disableZooming(view) {
+    // Removes the zoom action on the popup
+    view.popup.actions = [];
+
+    // stops propagation of default behavior when an event fires
+    function stopEvtPropagation(event) {
+      event.stopPropagation();
+    }
+
+    // exlude the zoom widget from the default UI
+    view.ui.components = ["attribution"];
+
+    // disable mouse wheel scroll zooming on the view
+    view.on("mouse-wheel", stopEvtPropagation);
+
+    // disable zooming via double-click on the view
+    view.on("double-click", stopEvtPropagation);
+
+    return view;
+  }
+
+  const view = new MapView({
+    map: webmap,
+    container: container,
+    center: [54.67, 24.33],
+    zoom: 14,
+
+    // extent: {
+    //   xmax: 55,
+    //   xmin: 54,
+    //   ymax: 25,
+    //   ymin: 24,
+    // },
+  });
+
+  view.when(disableZooming);
+
+  return view;
+};
+
+type MapViewComponentProps = {
+  children?: React.ReactNode;
+};
+
+export const MapViewComponent = (props: MapViewComponentProps) => {
+  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-screen h-screen"
+      ref={mapRef}
+      onDrag={(e) => e.preventDefault()}
+    >
+      <MapViewContext.Provider value={{ view }}>
+        {children}
+      </MapViewContext.Provider>
+    </div>
+  );
+};

src/components/Map/MapViewContext.ts

@@ -4,6 +4,10 @@ interface IViewContext {
     view: __esri.MapView | undefined
 }
 
+interface IGraphicsLayerContext {
+    graphicsLayer: __esri.GraphicsLayer
+}
 
+export const MapLayerContext = createContext({} as IGraphicsLayerContext)
 
 export const MapViewContext = createContext({} as IViewContext)