map quality fixing

src/components/BackButton.tsx

@@ -10,7 +10,7 @@ const BackButton = ({ title = "", onClick, className }: BackButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className={`flex items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA] justify-center select-none ${
+      className={`flex items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA] justify-center select-none hover:bg-secondary transition-all duration-200 ${
         title ? "w-fit" : "w-10"
       }  ${className ? className : ""}`}
     >

src/components/HelpButton.tsx

@@ -8,7 +8,7 @@ type HelpButtonProps = {
 const HelpButton = ({ handleOnHelpClick, className }: HelpButtonProps) => {
   return (
     <button
-      className={`bg-white border border-[#C7BDBA] rounded-full flex justify-center items-center ${
+      className={`bg-white border border-[#C7BDBA] rounded-full flex justify-center items-center hover:bg-secondary transition-all duration-200 ${
         className ? className : "h-8 w-8"
       } `}
       onClick={handleOnHelpClick}

src/components/ImagesButton.tsx

@@ -8,7 +8,7 @@ const ImagesButton = ({ onClick }: ImagesButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center"
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200"
     >
       <ImagesIcon />
       Images

src/components/LayoutButton.tsx

@@ -8,7 +8,7 @@ const LayoutButton = ({ onClick }: LayoutButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center"
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200"
     >
       <LayoutIcon />
       Layout

src/components/Map/Map.tsx

@@ -4,6 +4,7 @@ import Polygon from "@arcgis/core/geometry/Polygon";
 import { MapGraphic } from "./MapGraphic";
 import { MapViewComponent } from "./MapView";
 import { MapGraphicsLayer } from "./MapGraphicsLayer";
+import { MapMediaLayer } from "./MapMediaLayer";
 import {
   GRAPHIC_WIDTH,
   GRAPHIC_HEIGHT,
@@ -16,18 +17,34 @@ import useStore from "../../store/store";
 
 const createPolygon = (polygonProperties: __esri.PolygonProperties) =>
   new Polygon(polygonProperties);
-const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
+const ring = [
+  // [54.657801, 24.359971],
+  [GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION],
+  // [54.666801, 24.338971],
+];
+// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
+// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
 
 const polygon = createPolygon({
   rings: [ring],
 });
 
 const villas = new PictureMarkerSymbol({
-  url: "/images/map/Villas.png",
+  url: "/images/map/Villas1.png",
   width: GRAPHIC_WIDTH,
   height: GRAPHIC_HEIGHT,
+  xoffset: -2,
+  yoffset: -5,
 });
 
+// const villas = {
+//   type: "picture-marker",
+//   contentType: "image/png",
+//   url: "/images/map/Villas.png",
+//   width: GRAPHIC_WIDTH,
+//   height: GRAPHIC_HEIGHT,
+// };
+
 type MapComponentProps = {
   className?: string;
 };
@@ -60,12 +77,12 @@ const MapComponent = ({ className }: MapComponentProps) => {
 
   return (
     <MapViewComponent className={className}>
-      <MapGraphicsLayer>
-        <MapGraphic geometry={polygon} symbol={villas} />
+      <MapMediaLayer>
+        {/* <MapGraphic geometry={polygon} symbol={villas} />
         {selectedVilla && villaSymbol && (
           <MapGraphic geometry={polygon} symbol={villaSymbol} />
-        )}
-      </MapGraphicsLayer>
+        )} */}
+      </MapMediaLayer>
     </MapViewComponent>
   );
 };

src/components/Map/MapImage.tsx

@@ -0,0 +1,22 @@
+import { useContext, useEffect, useState } from "react";
+import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
+import Graphic from "@arcgis/core/Graphic";
+import { MapLayerContext, MapMediaLayerContext } from "./MapViewContext";
+
+export const MapImage = (graphicProperties: __esri.ImageElementProperties) => {
+  const { imagesLayer } = useContext(MapMediaLayerContext);
+  const [image, setImage] = useState<__esri.ImageElement | undefined>();
+
+  useEffect(() => {
+    const imagePoint = new ImageElement(graphicProperties);
+
+    setImage(imagePoint);
+  }, [graphicProperties, imagesLayer]);
+
+  useEffect(() => {
+    if (!image || !imagesLayer) return;
+    imagesLayer.source.elements.add(image);
+  }, [image, imagesLayer]);
+
+  return <></>;
+};

src/components/Map/MapMediaLayer.tsx

@@ -0,0 +1,88 @@
+import { useContext, useEffect, useState } from "react";
+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";
+
+type MapGraphicsLayerProps = {
+  children?: React.ReactNode;
+};
+
+export const MapMediaLayer = ({ children }: MapGraphicsLayerProps) => {
+  const { view } = useContext(MapViewContext);
+
+  const [imagesLayer, setImagesLayer] = useState<
+    __esri.MediaLayer | undefined
+  >();
+
+  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({
+      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,
+    //     }),
+    //   }),
+    // });
+
+    const _imagesLayer = new MediaLayer({
+      source: [imageElement],
+    });
+    // _graphicsLayer.effect = "brightness(0.75) contrast(250%)";
+
+    setImagesLayer(_imagesLayer);
+  }, []);
+
+  useEffect(() => {
+    if (!view || !imagesLayer) return;
+    // graphicsLayer.fullExtent;
+    view.map.add(imagesLayer);
+  }, [view, imagesLayer]);
+
+  return (
+    <>
+      {imagesLayer && (
+        <MapMediaLayerContext.Provider value={{ imagesLayer }}>
+          {children}
+        </MapMediaLayerContext.Provider>
+      )}
+    </>
+  );
+};

src/components/Map/MapView.tsx

@@ -69,14 +69,21 @@ const createMapView = (container: HTMLDivElement) => {
     },
   });
 
-  view.when(disableZooming);
+  // view.when(disableZooming);
 
-  view.constraints = {
-    minZoom: 15,
-    maxZoom: 15,
-    maxScale: 15,
-    minScale: 15,
-  };
+  // 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/Map/MapViewContext.ts

@@ -8,6 +8,11 @@ interface IGraphicsLayerContext {
     graphicsLayer: __esri.GraphicsLayer
 }
 
+interface IMediaLayerContext {
+    imagesLayer: __esri.MediaLayer
+}
+
+export const MapMediaLayerContext = createContext({} as IMediaLayerContext)
 export const MapLayerContext = createContext({} as IGraphicsLayerContext)
 
 export const MapViewContext = createContext({} as IViewContext)

src/components/ResizeButton.tsx

@@ -8,7 +8,7 @@ type ResizeButtonProps = {
 const ResizeButton = ({ handleOnHelpClick, className }: ResizeButtonProps) => {
   return (
     <button
-      className={`bg-white border border-[#C7BDBA] rounded-full flex justify-center items-center ${
+      className={`bg-white border border-[#C7BDBA] rounded-full flex justify-center items-center hover:bg-secondary transition-all duration-200 ${
         className ? className : "h-8 w-8"
       } `}
       onClick={handleOnHelpClick}

src/components/ViewToggle.tsx

@@ -46,8 +46,8 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
       >
         <div
           onClick={handleOnFirstClick}
-          className={`${
-            currentView === 1 ? "bg-black text-white" : ""
+          className={`transition-all duration-200 ${
+            currentView === 1 ? "bg-black text-white" : "hover:bg-secondary"
           } py-2 px-4 w-fit rounded-[32px]  `}
         >
           {" "}
@@ -55,8 +55,8 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
         </div>
         <div
           onClick={handleOnSecondClick}
-          className={`${
-            currentView === 2 ? "bg-black text-white" : ""
+          className={`transition-all duration-200 ${
+            currentView === 2 ? "bg-black text-white" : "hover:bg-secondary"
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}
@@ -64,8 +64,8 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
         </div>
         <div
           onClick={handleOnThirdClick}
-          className={`${
-            currentView === 3 ? "bg-black text-white" : ""
+          className={`transition-all duration-200 ${
+            currentView === 3 ? "bg-black text-white" : "hover:bg-secondary"
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}

src/components/desktop/Appartment/LayoutModal.tsx

@@ -9,7 +9,7 @@ const LayoutModal = () => {
   const [currentView, setCurrentView] = useState(1);
   const { currentVilla, setModal } = useStore();
   const [currentUnits, setCurrentUnits] = useState(
-    currentVilla?.firstFloorUnits
+    currentVilla?.groundFloorUnits
   );
   useEffect(() => {
     if (currentVilla) {
@@ -18,10 +18,10 @@ const LayoutModal = () => {
           setCurrentUnits(currentVilla.parkingUnits);
           break;
         case 2:
-          setCurrentUnits(currentVilla.groundFloorUnits);
+          setCurrentUnits(currentVilla.firstFloorUnits);
           break;
         default:
-          setCurrentUnits(currentVilla.firstFloorUnits);
+          setCurrentUnits(currentVilla.groundFloorUnits);
           break;
       }
     }

src/components/desktop/Main/HouseItem.tsx

@@ -9,7 +9,7 @@ type HouseItemProps = {
 };
 
 const HouseItem = ({ villa }: HouseItemProps) => {
-  const { setSelectedOnMapVilla, setModal } = useStore();
+  const { setSelectedOnMapVilla, setModal, selectedOnMapVilla } = useStore();
   const navigate = useNavigate();
 
   const handleOnViewOnMapClick = () => {
@@ -39,7 +39,7 @@ const HouseItem = ({ villa }: HouseItemProps) => {
           <p>Bedrooms</p>
           <p>Villa Theme</p>
         </div>
-        <div className="flex flex-col w-[82px] pr-4 justify-center ">
+        <div className="flex flex-col w-[82px] pr-4 justify-center">
           <div className="uppercase">{villa.type}</div>
           <div className="w-full">{villa.totalBuildUpArea} Sq.m</div>
           <div>{villa.totalCountBedroms}</div>
@@ -47,7 +47,10 @@ const HouseItem = ({ villa }: HouseItemProps) => {
         </div>
       </div>
       <div className="border-0 border-t-[1px] text-sm flex">
-        <ViewOnMapButton onClick={handleOnViewOnMapClick} />
+        <ViewOnMapButton
+          onClick={handleOnViewOnMapClick}
+          isVillaSelected={selectedOnMapVilla?.type === villa.type}
+        />
         <KnowMoreButton onClick={handleOnKnowMoreButton} />
       </div>
     </div>

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -2,12 +2,15 @@ import ViewOnMapIcon from "../../../icons/ViewOnMapIcon";
 
 type ViewOnMapProps = {
   onClick?: () => void;
+  isVillaSelected?: boolean;
 };
 
-const ViewOnMapButton = ({ onClick }: ViewOnMapProps) => {
+const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
   return (
     <button
-      className="w-1/2 py-[10px] border-r flex justify-center gap-1"
+      className={`w-1/2 border-r flex justify-center gap-1 items-center ${
+        isVillaSelected ? "bg-[#EAE5E0]" : ""
+      }`}
       onClick={onClick}
     >
       View on Map

src/consts/map.ts

@@ -15,6 +15,8 @@ export const ACTIVE_VILLAS_IMAGE: VillaImage[] = [
     { image: "C2T_Active.png", title: 'c2t' },
   ];
 
+// export const GRAPHIC_WIDTH = 20;
+// export const GRAPHIC_HEIGHT = 20;
 export const GRAPHIC_WIDTH = 455.6 * 1.87;
 export const GRAPHIC_HEIGHT = 413.5 * 1.87;
 

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,json}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        secondary: "#F3F2F0",
+      },
+    },
   },
   plugins: [],
 };