diff --git a/public/images/apartment/A2M/A2M_1F.png b/public/images/apartment/A2M/A2M_1F.png new file mode 100644 index 0000000..311c509 Binary files /dev/null and b/public/images/apartment/A2M/A2M_1F.png differ diff --git a/public/images/apartment/A2M/A2M_GF.png b/public/images/apartment/A2M/A2M_GF.png new file mode 100644 index 0000000..8edda6b Binary files /dev/null and b/public/images/apartment/A2M/A2M_GF.png differ diff --git a/public/images/apartment/A2M/A2M_P.png b/public/images/apartment/A2M/A2M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/A2M/A2M_P.png differ diff --git a/public/images/apartment/A2T/A2T_1F.png b/public/images/apartment/A2T/A2T_1F.png new file mode 100644 index 0000000..6c227cf Binary files /dev/null and b/public/images/apartment/A2T/A2T_1F.png differ diff --git a/public/images/apartment/A2T/A2T_GF.png b/public/images/apartment/A2T/A2T_GF.png new file mode 100644 index 0000000..65b107a Binary files /dev/null and b/public/images/apartment/A2T/A2T_GF.png differ diff --git a/public/images/apartment/A2T/A2T_P.png b/public/images/apartment/A2T/A2T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/A2T/A2T_P.png differ diff --git a/public/images/apartment/B1M/B1M_1F.png b/public/images/apartment/B1M/B1M_1F.png new file mode 100644 index 0000000..0a040e7 Binary files /dev/null and b/public/images/apartment/B1M/B1M_1F.png differ diff --git a/public/images/apartment/B1M/B1M_GF.png b/public/images/apartment/B1M/B1M_GF.png new file mode 100644 index 0000000..b0b237f Binary files /dev/null and b/public/images/apartment/B1M/B1M_GF.png differ diff --git a/public/images/apartment/B1M/B1M_P.png b/public/images/apartment/B1M/B1M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/B1M/B1M_P.png differ diff --git a/public/images/apartment/B1T/B1T_1F.png b/public/images/apartment/B1T/B1T_1F.png new file mode 100644 index 0000000..5031fd2 Binary files /dev/null and b/public/images/apartment/B1T/B1T_1F.png differ diff --git a/public/images/apartment/B1T/B1T_GF.png b/public/images/apartment/B1T/B1T_GF.png new file mode 100644 index 0000000..2387895 Binary files /dev/null and b/public/images/apartment/B1T/B1T_GF.png differ diff --git a/public/images/apartment/B1T/B1T_P.png b/public/images/apartment/B1T/B1T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/B1T/B1T_P.png differ diff --git a/public/images/apartment/B2M/B2M_1F.png b/public/images/apartment/B2M/B2M_1F.png new file mode 100644 index 0000000..6ed35ee Binary files /dev/null and b/public/images/apartment/B2M/B2M_1F.png differ diff --git a/public/images/apartment/B2M/B2M_GF.png b/public/images/apartment/B2M/B2M_GF.png new file mode 100644 index 0000000..3aff49d Binary files /dev/null and b/public/images/apartment/B2M/B2M_GF.png differ diff --git a/public/images/apartment/B2M/B2M_P.png b/public/images/apartment/B2M/B2M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/B2M/B2M_P.png differ diff --git a/public/images/apartment/B2T/B2T_1F.png b/public/images/apartment/B2T/B2T_1F.png new file mode 100644 index 0000000..ce9acc7 Binary files /dev/null and b/public/images/apartment/B2T/B2T_1F.png differ diff --git a/public/images/apartment/B2T/B2T_GF.png b/public/images/apartment/B2T/B2T_GF.png new file mode 100644 index 0000000..73cab35 Binary files /dev/null and b/public/images/apartment/B2T/B2T_GF.png differ diff --git a/public/images/apartment/B2T/B2T_P.png b/public/images/apartment/B2T/B2T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/B2T/B2T_P.png differ diff --git a/public/images/apartment/C1M/C1M_1F.png b/public/images/apartment/C1M/C1M_1F.png new file mode 100644 index 0000000..f623dcf Binary files /dev/null and b/public/images/apartment/C1M/C1M_1F.png differ diff --git a/public/images/apartment/C1M/C1M_GF.png b/public/images/apartment/C1M/C1M_GF.png new file mode 100644 index 0000000..8dfa994 Binary files /dev/null and b/public/images/apartment/C1M/C1M_GF.png differ diff --git a/public/images/apartment/C1M/C1M_P.png b/public/images/apartment/C1M/C1M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/C1M/C1M_P.png differ diff --git a/public/images/apartment/C1T/C1T_1F.png b/public/images/apartment/C1T/C1T_1F.png new file mode 100644 index 0000000..6d22883 Binary files /dev/null and b/public/images/apartment/C1T/C1T_1F.png differ diff --git a/public/images/apartment/C1T/C1T_GF.png b/public/images/apartment/C1T/C1T_GF.png new file mode 100644 index 0000000..1f63e3b Binary files /dev/null and b/public/images/apartment/C1T/C1T_GF.png differ diff --git a/public/images/apartment/C1T/C1T_P.png b/public/images/apartment/C1T/C1T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/C1T/C1T_P.png differ diff --git a/public/images/apartment/C2M/C2M_1F.png b/public/images/apartment/C2M/C2M_1F.png new file mode 100644 index 0000000..731f9d1 Binary files /dev/null and b/public/images/apartment/C2M/C2M_1F.png differ diff --git a/public/images/apartment/C2M/C2M_GF.png b/public/images/apartment/C2M/C2M_GF.png new file mode 100644 index 0000000..73295a4 Binary files /dev/null and b/public/images/apartment/C2M/C2M_GF.png differ diff --git a/public/images/apartment/C2M/C2M_P.png b/public/images/apartment/C2M/C2M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/C2M/C2M_P.png differ diff --git a/public/images/apartment/C2T/C2T_1F.png b/public/images/apartment/C2T/C2T_1F.png new file mode 100644 index 0000000..31788b3 Binary files /dev/null and b/public/images/apartment/C2T/C2T_1F.png differ diff --git a/public/images/apartment/C2T/C2T_GF.png b/public/images/apartment/C2T/C2T_GF.png new file mode 100644 index 0000000..183707a Binary files /dev/null and b/public/images/apartment/C2T/C2T_GF.png differ diff --git a/public/images/apartment/C2T/C2T_P.png b/public/images/apartment/C2T/C2T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/C2T/C2T_P.png differ diff --git a/public/images/map/A1M_Active.png b/public/images/map/A1M_Active.png new file mode 100644 index 0000000..eeb374b Binary files /dev/null and b/public/images/map/A1M_Active.png differ diff --git a/public/images/map/A1T_Active.png b/public/images/map/A1T_Active.png new file mode 100644 index 0000000..060e3ac Binary files /dev/null and b/public/images/map/A1T_Active.png differ diff --git a/public/images/map/A2M_Active.png b/public/images/map/A2M_Active.png new file mode 100644 index 0000000..8fecb9f Binary files /dev/null and b/public/images/map/A2M_Active.png differ diff --git a/public/images/map/A2T_Active.png b/public/images/map/A2T_Active.png new file mode 100644 index 0000000..3af6d53 Binary files /dev/null and b/public/images/map/A2T_Active.png differ diff --git a/public/images/map/B1M_Active.png b/public/images/map/B1M_Active.png new file mode 100644 index 0000000..1c75a0c Binary files /dev/null and b/public/images/map/B1M_Active.png differ diff --git a/public/images/map/B1T_Active.png b/public/images/map/B1T_Active.png new file mode 100644 index 0000000..cc475d3 Binary files /dev/null and b/public/images/map/B1T_Active.png differ diff --git a/public/images/map/B2M_Active.png b/public/images/map/B2M_Active.png new file mode 100644 index 0000000..80f6eaa Binary files /dev/null and b/public/images/map/B2M_Active.png differ diff --git a/public/images/map/B2T_Active.png b/public/images/map/B2T_Active.png new file mode 100644 index 0000000..eda16fc Binary files /dev/null and b/public/images/map/B2T_Active.png differ diff --git a/public/images/map/C1M_Active.png b/public/images/map/C1M_Active.png new file mode 100644 index 0000000..51f3153 Binary files /dev/null and b/public/images/map/C1M_Active.png differ diff --git a/public/images/map/C1T_Active.png b/public/images/map/C1T_Active.png new file mode 100644 index 0000000..d54a4b5 Binary files /dev/null and b/public/images/map/C1T_Active.png differ diff --git a/public/images/map/C2M_Active.png b/public/images/map/C2M_Active.png new file mode 100644 index 0000000..ca3f295 Binary files /dev/null and b/public/images/map/C2M_Active.png differ diff --git a/public/images/map/C2T_Active.png b/public/images/map/C2T_Active.png new file mode 100644 index 0000000..1ffa9b1 Binary files /dev/null and b/public/images/map/C2T_Active.png differ diff --git a/public/images/map/Villas.png b/public/images/map/Villas.png new file mode 100644 index 0000000..d8572b1 Binary files /dev/null and b/public/images/map/Villas.png differ diff --git a/src/App.tsx b/src/App.tsx index 51eb8ec..fe7a3e9 100644 --- a/src/App.tsx +++ b/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(); diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index fb521d1..ad6d815 100644 --- a/src/components/Map/Map.tsx +++ b/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 ( -
- - {children} - -
+ + + {/* */} + {/* */} + + {/* */} + + {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 ( + + ); + })} + + + ); }; + +export default MapComponent; diff --git a/src/components/Map/MapGraphic.tsx b/src/components/Map/MapGraphic.tsx new file mode 100644 index 0000000..a475261 --- /dev/null +++ b/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 <>; +}; diff --git a/src/components/Map/MapGraphics.tsx b/src/components/Map/MapGraphics.tsx new file mode 100644 index 0000000..a9fbf79 --- /dev/null +++ b/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 <>; +}; diff --git a/src/components/Map/MapGraphicsLayer.tsx b/src/components/Map/MapGraphicsLayer.tsx index 9bc6d80..389d1a7 100644 --- a/src/components/Map/MapGraphicsLayer.tsx +++ b/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 && ( - + {children} - + )} ); diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx new file mode 100644 index 0000000..9942710 --- /dev/null +++ b/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 ( +
e.preventDefault()} + > + + {children} + +
+ ); +}; diff --git a/src/components/Map/MapViewContext.ts b/src/components/Map/MapViewContext.ts index dccf24c..b0c4923 100644 --- a/src/components/Map/MapViewContext.ts +++ b/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) \ No newline at end of file