map

src/components/Map/Map.tsx

@@ -77,7 +77,7 @@ const MapComponent = ({ className }: MapComponentProps) => {
 
   return (
     <MapViewComponent className={className}>
-      <MapMediaLayer>
+      <MapMediaLayer selectedVilla={selectedVilla}>
         {/* <MapGraphic geometry={polygon} symbol={villas} />
         {selectedVilla && villaSymbol && (
           <MapGraphic geometry={polygon} symbol={villaSymbol} />

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 (

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;
 };

src/components/mobile/Main/HouseItem.tsx

@@ -14,7 +14,6 @@ const HouseItem = ({ villa }: HouseItemProps) => {
 
   const handleOnViewOnMapClick = () => {
     setSelectedOnMapVilla(villa);
-    // setModal(null);
   };
 
   const handleOnKnowMoreButton = () => {

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -9,7 +9,7 @@ const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
   return (
     <button
       className={`w-1/2 border-r flex justify-center gap-1 items-center ${
-        isVillaSelected ? "bg-[#EAE5E0]" : ""
+        isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl" : ""
       }`}
       onClick={onClick}
     >