diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 914751e..320c1b2 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -77,7 +77,7 @@ const MapComponent = ({ className }: MapComponentProps) => { return ( - + {/* {selectedVilla && villaSymbol && ( diff --git a/src/components/Map/MapMediaLayer.tsx b/src/components/Map/MapMediaLayer.tsx index ab3e2f4..baaf055 100644 --- a/src/components/Map/MapMediaLayer.tsx +++ b/src/components/Map/MapMediaLayer.tsx @@ -3,77 +3,73 @@ import Extent from "@arcgis/core/geometry/Extent.js"; import MediaLayer from "@arcgis/core/layers/MediaLayer.js"; import ExtentAndRotationGeoreference from "@arcgis/core/layers/support/ExtentAndRotationGeoreference.js"; import ImageElement from "@arcgis/core/layers/support/ImageElement.js"; -import { - MapLayerContext, - MapViewContext, - MapMediaLayerContext, -} from "./MapViewContext"; +import { MapViewContext, MapMediaLayerContext } from "./MapViewContext"; +import { VillaImage } from "../../types/map"; type MapGraphicsLayerProps = { children?: React.ReactNode; + selectedVilla: VillaImage | null; }; -export const MapMediaLayer = ({ children }: MapGraphicsLayerProps) => { +export const MapMediaLayer = ({ + children, + selectedVilla, +}: MapGraphicsLayerProps) => { const { view } = useContext(MapViewContext); - const [imagesLayer, setImagesLayer] = useState< __esri.MediaLayer | undefined >(); + const [allVillas, setAllVillas] = useState<__esri.ImageElement | null>(null); + + const extent = new Extent({ + spatialReference: { + wkid: 102100, + }, + xmin: 6082782, + ymin: 2792259, + xmax: 6088188, + ymax: 2797208, + }); useEffect(() => { - // const coef = 0.1; - const coef = 0.0; - const extent = new Extent({ - spatialReference: { - wkid: 102100, - // wkid: 102100, - }, //dif 24 640 000 - xmin: -3640000, //400 400 00 - ymin: 1590000, - xmax: 1400000 * 1.101813784764208, //154 000 00 - ymax: 3830000, //3 010 000 //2 240 000 - // xmin: 6082950 * 1.101813784764208, //4556 * 4135 - // ymin: 2792185, - // xmax: 6088560 * 1.101813784764208, //5610 - // ymax: 2797795, - }); //x 3 4 y 14 19 - - const imageElement = new ImageElement({ + const allVillasImage = new ImageElement({ image: "/images/map/Villas1.png", georeference: new ExtentAndRotationGeoreference({ extent: extent, }), }); - // const imageElement = new ImageElement({ - // image: - // "https://cdn.star.nesdis.noaa.gov/GOES16/ABI/CONUS/GEOCOLOR/GOES16-CONUS-GEOCOLOR-625x375.gif", - // // image: "/images/map/Villas1.png", - // georeference: new ExtentAndRotationGeoreference({ - // extent: new Extent({ - // spatialReference: { - // wkid: 102498, - // // wkid: 102100, - // }, - // xmin: 54.65, - // ymin: 24.32, - // xmax: 54.685, - // ymax: 24.355, - // }), - // }), - // }); + + setAllVillas(allVillasImage); const _imagesLayer = new MediaLayer({ - source: [imageElement], + source: [allVillasImage], }); - // _graphicsLayer.effect = "brightness(0.75) contrast(250%)"; setImagesLayer(_imagesLayer); }, []); + useEffect(() => { + if (selectedVilla && allVillas) { + const selectedVillaImage = new ImageElement({ + image: `/images/map/${selectedVilla.image}`, + georeference: new ExtentAndRotationGeoreference({ + extent: extent, + }), + }); + + const _imagesLayer = new MediaLayer({ + source: [allVillas, selectedVillaImage], + }); + + setImagesLayer(_imagesLayer); + return; + } + }, [selectedVilla, allVillas]); + useEffect(() => { if (!view || !imagesLayer) return; - // graphicsLayer.fullExtent; view.map.add(imagesLayer); + console.log("loaded"); }, [view, imagesLayer]); return ( diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx index 3e04400..994b70a 100644 --- a/src/components/Map/MapView.tsx +++ b/src/components/Map/MapView.tsx @@ -69,21 +69,21 @@ const createMapView = (container: HTMLDivElement) => { }, }); - // view.when(disableZooming); + view.when(disableZooming); - // view.constraints = { - // minZoom: 15, - // maxZoom: 15, - // maxScale: 15, - // minScale: 15, - // geometry: { - // type: "extent", - // xmin: 54.65, - // ymin: 24.32, - // xmax: 54.685, - // ymax: 24.355, - // }, - // }; + view.constraints = { + minZoom: 15, + maxZoom: 15, + maxScale: 15, + minScale: 15, + geometry: { + type: "extent", + xmin: 54.65, + ymin: 24.32, + xmax: 54.685, + ymax: 24.355, + }, + }; return view; }; diff --git a/src/components/mobile/Main/HouseItem.tsx b/src/components/mobile/Main/HouseItem.tsx index 9e12c52..34dcc12 100644 --- a/src/components/mobile/Main/HouseItem.tsx +++ b/src/components/mobile/Main/HouseItem.tsx @@ -14,7 +14,6 @@ const HouseItem = ({ villa }: HouseItemProps) => { const handleOnViewOnMapClick = () => { setSelectedOnMapVilla(villa); - // setModal(null); }; const handleOnKnowMoreButton = () => { diff --git a/src/components/mobile/Main/ViewOnMapButton.tsx b/src/components/mobile/Main/ViewOnMapButton.tsx index eacbfa0..64ec2e8 100644 --- a/src/components/mobile/Main/ViewOnMapButton.tsx +++ b/src/components/mobile/Main/ViewOnMapButton.tsx @@ -9,7 +9,7 @@ const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => { return (