Skip to content

Commit

Permalink
update markers to use better value, not finish
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vuvvy1
Vuvvy1 committed Feb 14, 2023
1 parent 4dba70a commit 17d2df1
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 125 deletions.
2 changes: 2 additions & 0 deletions client/src/components/map/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export default function MapDisplay(props) {
label={getCostFromPrices(property, prices)}
bedrooms={getBedroomsFromPrices(property, prices)}
bathrooms={getBathroomsFromPrices(property, prices)}
properties={properties}
prices={prices}
/>
);
});
Expand Down
259 changes: 134 additions & 125 deletions client/src/components/map/Marker.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { useState, useContext, lazy, Suspense } from "react";
import RentGrowthRateVsMarket from "../charts/RentGrowthRateVsMarket";
import { MarkerFilterContext } from "../../providers/MarkerFilterProvider";
import { getPriceHistory } from "../helpers/getDataFromPrices";
const GoogleMapMarker = lazy(() =>
import("@react-google-maps/api").then((module) => ({
default: module.Marker,
Expand All @@ -9,7 +11,17 @@ const GoogleMapMarker = lazy(() =>
<script src="https://maps.googleapis.com/maps/api/js?key=REACT_APP_GOOGLE_MAPS_API_KEY"></script>;


function Marker({ bedrooms, bathrooms, cost, position, title, label, id }) {
function Marker({
bedrooms,
bathrooms,
cost,
position,
title,
label,
id,
prices,
properties,
}) {
const [isHovered, setIsHovered] = useState(false);
const {
selectedBedrooms,
Expand All @@ -22,72 +34,72 @@ function Marker({ bedrooms, bathrooms, cost, position, title, label, id }) {

// console.log("state.currentProperty ➤", state.currentProperty);

function percentageToHexColor(percentage, lightness = 0, saturation = 100) {
let R, G, B;
percentage -= 60;
function percentageToHexColor(percentage, lightness = 0, saturation = 100) {
let R, G, B;
percentage -= 60;

R = Math.round(percentage * 2 + lightness + (100 - saturation));
G = Math.round(150 + lightness - percentage * 2.5 + (100 - saturation));
B =
150 + lightness - percentage * 2.5 >= 255
? (150 + lightness - percentage * 2.5 - 255) * 4
: 0 + (100 - saturation);
R = Math.round(percentage * 2 + lightness + (100 - saturation));
G = Math.round(150 + lightness - percentage * 2.5 + (100 - saturation));
B =
150 + lightness - percentage * 2.5 >= 255
? (150 + lightness - percentage * 2.5 - 255) * 4
: 0 + (100 - saturation);

R = R > 255 ? 255 : R < 0 ? 0 : R;
G = G > 255 ? 255 : G < 0 ? 0 : G;
B = B > 255 ? 255 : B < 0 ? 0 : B;
R = R > 255 ? 255 : R < 0 ? 0 : R;
G = G > 255 ? 255 : G < 0 ? 0 : G;
B = B > 255 ? 255 : B < 0 ? 0 : B;

R = R.toString(16).padStart(2, "0");
G = G.toString(16).padStart(2, "0");
B = B.toString(16).padStart(2, "0");
R = R.toString(16).padStart(2, "0");
G = G.toString(16).padStart(2, "0");
B = B.toString(16).padStart(2, "0");

return "#" + R + G + B;
}

function desaturate(hex, amount) {
// Remove the '#' from the beginning of the hex string
hex = hex.substring(1);
return "#" + R + G + B;
}

// Convert hex string to RGB values
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
function desaturate(hex, amount) {
// Remove the '#' from the beginning of the hex string
hex = hex.substring(1);

// Desaturate the color by averaging the RGB values and scaling them down
let avg = (r + g + b) / 3;
r = Math.round(avg + (r - avg) * (1 - amount));
g = Math.round(avg + (g - avg) * (1 - amount));
b = Math.round(avg + (b - avg) * (1 - amount));
// Convert hex string to RGB values
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);

// Convert the RGB values back to a hex string
let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return "#" + result;
}
// Desaturate the color by averaging the RGB values and scaling them down
let avg = (r + g + b) / 3;
r = Math.round(avg + (r - avg) * (1 - amount));
g = Math.round(avg + (g - avg) * (1 - amount));
b = Math.round(avg + (b - avg) * (1 - amount));

function darken(hex, amount) {
// Remove the '#' from the beginning of the hex string
hex = hex.substring(1);
// Convert the RGB values back to a hex string
let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return "#" + result;
}

// Convert hex string to RGB values
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
function darken(hex, amount) {
// Remove the '#' from the beginning of the hex string
hex = hex.substring(1);

// Darken the color by decreasing the RGB values
r = Math.round(r * (1 - amount));
g = Math.round(g * (1 - amount));
b = Math.round(b * (1 - amount));
// Convert hex string to RGB values
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);

// Convert the RGB values back to a hex string
let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return "#" + result;
}
// Darken the color by decreasing the RGB values
r = Math.round(r * (1 - amount));
g = Math.round(g * (1 - amount));
b = Math.round(b * (1 - amount));

// Convert the RGB values back to a hex string
let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return "#" + result;
}
// console.log("getPriceHistory(id, prices) ➤", getPriceHistory(id, prices));

const costVSavg = cost / 25;

// console.log("state.prevProperty ➤", state.currentProperty);
const isGray =
state.prevProperty.includes(id) && state.currentProperty.id !== id;
const costVSavg = cost / 25;
const saturation = state.prevProperty.includes(id) ? 0 : 100;
const markerColor = percentageToHexColor(costVSavg, 120);
const markerColorgreyed = desaturate(markerColor, 0.5);
Expand All @@ -97,7 +109,6 @@ function darken(hex, amount) {
const Point = window.google.maps.Point;
const Circle = window.google.maps.SymbolPath.CIRCLE;


const pinSymbol2 = function (color, greycolor, darkColor, isGray, isHovered) {
return {
path: Circle,
Expand All @@ -109,7 +120,7 @@ function darken(hex, amount) {
anchor: new Point(0.2, 4.8),
};
};

function pinSymbol1(color, greycolor, darkColor, isGray, isHovered) {
return {
path: "M23.667 11.84c0 7.52-10.048 19.52-11.5 19.52s-11.5-12-11.5-19.52C.667 5.743 5.816.8 12.167.8c6.35 0 11.5 4.943 11.5 11.04",
Expand All @@ -124,77 +135,75 @@ function darken(hex, amount) {
// console.log("state.currentProperty.id === id ➤", state.currentProperty.id === id);
// console.log("state.prevProperty.includes(id) ➤", state.prevProperty.includes(id));

return (
<div>
{(selectedBedrooms.includes(bedrooms) || !selectedBedrooms.length) &&
(selectedBathrooms.includes(bathrooms) || !selectedBathrooms.length) &&
cost < maxF &&
cost > minF ? (
<Suspense fallback={<div>Loading...</div>}>
{/* Marker 1 */}
<GoogleMapMarker
position={position}
title={title}
zIndex={isGray ? 0 : 1}
onClick={() => handleClickMarker(id)}
icon={pinSymbol1(
markerColor,
markerColorgreyed,
markerColorDarker,
isGray,
isHovered
)}
onMouseOver={() => {
setIsHovered(true);
}}
onMouseOut={() => {
setIsHovered(false);
}}
animation={(() => {
if (state.currentProperty.id === id) {
return 1;
}
if (state.prevProperty.includes(id)) {
return null;
}
return 2;
})()}
/>
Marker 2
<GoogleMapMarker
position={position}
title={title}
zIndex={isGray ? 0 : 1}
onClick={() => handleClickMarker(id)}
icon={pinSymbol2(
markerColorDarker,
markerColorgreyeddark,
markerColorDark,
isGray,
isHovered
)}
onMouseOver={() => {
setIsHovered(true);
}}
onMouseOut={() => {
setIsHovered(false);
}}
animation={(() => {
if (state.currentProperty.id === id) {
return 1;
}
if (state.prevProperty.includes(id)) {
return null;
}
return 2;
})()}
/>
</Suspense>
) : null}
</div>
);


return (
<div>
{(selectedBedrooms.includes(bedrooms) || !selectedBedrooms.length) &&
(selectedBathrooms.includes(bathrooms) || !selectedBathrooms.length) &&
cost < maxF &&
cost > minF ? (
<Suspense fallback={<div>Loading...</div>}>
{/* Marker 1 */}
<GoogleMapMarker
position={position}
title={title}
zIndex={isGray ? 0 : 1}
onClick={() => handleClickMarker(id)}
icon={pinSymbol1(
markerColor,
markerColorgreyed,
markerColorDarker,
isGray,
isHovered
)}
onMouseOver={() => {
setIsHovered(true);
}}
onMouseOut={() => {
setIsHovered(false);
}}
animation={(() => {
if (state.currentProperty.id === id) {
return 1;
}
if (state.prevProperty.includes(id)) {
return null;
}
return 2;
})()}
/>
Marker 2
<GoogleMapMarker
position={position}
title={title}
zIndex={isGray ? 0 : 1}
onClick={() => handleClickMarker(id)}
icon={pinSymbol2(
markerColorDarker,
markerColorgreyeddark,
markerColorDark,
isGray,
isHovered
)}
onMouseOver={() => {
setIsHovered(true);
}}
onMouseOut={() => {
setIsHovered(false);
}}
animation={(() => {
if (state.currentProperty.id === id) {
return 1;
}
if (state.prevProperty.includes(id)) {
return null;
}
return 2;
})()}
/>
</Suspense>
) : null}
</div>
);
}

export default React.memo(Marker);

0 comments on commit 17d2df1

Please sign in to comment.