@abcagency/hc-ui-components 1.3.61 → 1.3.63

package/src/util/localStorageUtil.ts

@@ -1,34 +1,34 @@
-export const getStorageObject = <T>(item: string, defaultItem: T | null = null): T | null => {
-	if (typeof window === 'undefined') return defaultItem;
-	const storageItem = localStorage.getItem(item);
-	if (storageItem === null || storageItem === 'undefined') {
-		localStorage.removeItem(item);
-		return defaultItem;
-	}
-	try {
-		return JSON.parse(storageItem) ?? defaultItem;
-	} catch (error) {
-		console.error(`Error parsing JSON for ${item}:`, error);
-		return defaultItem;
-	}
-};
-
-export const getStorageItem = (item: string, defaultItem: string | null = null): string | null => {
-	if (typeof window === 'undefined') return defaultItem;
-	const storageItem = localStorage.getItem(item);
-	if (storageItem === null || storageItem === 'undefined') {
-		localStorage.removeItem(item);
-		return defaultItem;
-	}
-	return storageItem ?? defaultItem;
-};
-
-export const setStorageObject = (key: string, item: any): void => {
-	if (typeof window === 'undefined') return;
-	if (item === undefined) return;
-	try {
-		localStorage.setItem(key, JSON.stringify(item));
-	} catch (err) {
-		console.error(`Error setting item ${key} in localStorage:`, err);
-	}
-};
+export const getStorageObject = <T>(item: string, defaultItem: T | null = null): T | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	try {
+		return JSON.parse(storageItem) ?? defaultItem;
+	} catch (error) {
+		console.error(`Error parsing JSON for ${item}:`, error);
+		return defaultItem;
+	}
+};
+
+export const getStorageItem = (item: string, defaultItem: string | null = null): string | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	return storageItem ?? defaultItem;
+};
+
+export const setStorageObject = (key: string, item: any): void => {
+	if (typeof window === 'undefined') return;
+	if (item === undefined) return;
+	try {
+		localStorage.setItem(key, JSON.stringify(item));
+	} catch (err) {
+		console.error(`Error setting item ${key} in localStorage:`, err);
+	}
+};

package/src/util/mapIconUtil.js

@@ -1,180 +1,180 @@
-/* eslint-disable no-undef */
-import { placeTypes } from '~/constants/placeTypes';
-
-const customSVGIcon = (
-	type,
-	fillColor = "#FFFFFF",
-	strokeColor = "#000000",
-	backgroundFill = "#000000",
-	backgroundStroke = "#000000"
-) => {
-	let svg = "";
-	switch (type) {
-		case placeTypes.FOOD:
-			svg = `
-					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M25.7,36.6l0.6,15.8c0.1,2.4-2.3,2.4-2.3,2.4s-2.4,0-2.3-2.4l0.6-15.8c0.1-2-4.3-2.9-4-4.9l2.3-13.3h1.1
-						l-0.6,9.7l1.7,1.2l0.6-10.9h1.1l0.6,10.9l1.7-1.2l-0.6-9.7h1.1l2.3,13.3C29.7,33.7,25.6,34.6,25.7,36.6z"/>
-					<path class="st0" d="M40,52.4c0,2.4-2.3,2.4-2.3,2.4s-2.5,0-2.3-2.4L36.6,39c-0.9,0-3.4-0.4-3.4-2.4v-6.1c0-2.4,0.3-6.4,1.2-8.2
-						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.TOURIST_ATTRACTION:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M27,18.5c-1.2,0-1.7,1.1-2.2,2.2L23.7,23h-4.5c-1.9,0-3.4,1.5-3.4,3.4v11.2c0,1.9,1.5,3.4,3.4,3.4h22.5
-						c1.9,0,3.4-1.5,3.4-3.4V26.4c0-1.9-1.5-3.4-3.4-3.4h-4.5L36,20.8c-0.6-1.1-1-2.2-2.2-2.2H27z M19.2,25.3c0.6,0,1.1,0.5,1.1,1.1
-						c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C18,25.8,18.5,25.3,19.2,25.3z M30.4,25.3c3.7,0,6.7,3,6.7,6.7s-3,6.7-6.7,6.7
-						s-6.7-3-6.7-6.7S26.7,25.3,30.4,25.3z M30.4,28.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
-						S32.3,28.7,30.4,28.7z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.SCHOOL:
-			svg = `
-					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M39.2,40.6c0,0-4.1,4.6-9.1,4.6S21,40.6,21,40.6v-5.2l9.1,5l9.1-5V40.6z"/>
-					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
-					</svg>
-					`;
-			break;
-		case placeTypes.STORE:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<g>
-						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
-							/>
-					</g>
-					<path class="st0" d="M45.4,27.7L42,41.1c-0.1,0.6-0.7,1-1.3,1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3
-						s1.5-3.3,3.3-3.3H23.3c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3S20,47.2,20,45.4s1.5-3.3,3.3-3.3c-0.6,0-1.2-0.4-1.3-1l-4.1-16.4
-						h-1.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h2.3c0.6,0,1.2,0.4,1.3,1l0.8,3h23.1c0.4,0,0.8,0.2,1.1,0.5
-						C45.4,26.9,45.5,27.3,45.4,27.7z"/>
-					<path d="M41.4,45.5c0-0.4-0.3-0.7-0.7-0.7S40,45.1,40,45.5C40.1,46.2,41.4,46.2,41.4,45.5z"/>
-					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.TRANSIT_STATION:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<g>
-						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
-							/>
-					</g>
-					<path class="st0" d="M26.3,41.3h-2.8L20.7,44h-1.4v-1.4l1.4-1.4c-2.3,0-4.2-1.9-4.2-4.2V26c0-2.3,1.9-4.2,4.2-4.2h9.7
-						c2.3,0,4.2,1.9,4.2,4.2v1.4h-2.8v-2.8H19.3v9.7h6.9v7H26.3z"/>
-					<path class="st0" d="M44.3,43c0,0.5-0.4,1-1,1h-0.8c-0.5,0-1-0.5-1-1.1v-1.7H30.4V43c0,0.5-0.4,1.1-0.9,1.1h-0.9c-0.5,0-1-0.5-1-1
-						v-7.6l2-5.7c0.2-0.6,0.7-0.9,1.4-0.9h10c0.6,0,1.1,0.4,1.3,0.9l2,5.7V43z"/>
-					<circle cx="20.7" cy="37.1" r="1.4"/>
-					<circle cx="41.5" cy="37.1" r="1.4"/>
-					<circle cx="30.4" cy="37.1" r="1.4"/>
-					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
-					</svg>
-					`;
-			break;
-		case placeTypes.PLACE_OF_WORSHIP:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M21.3,40.8h-3.8c-1.3,0-2.3-1-2.3-2.3v-4.3c0-0.8,0.5-1.6,1.2-2l4.9-2.7V40.8z"/>
-					<path class="st0" d="M38,40.8h-4.6v-4.6c0-1.7-1.4-3-3-3c-1.7,0-3,1.4-3,3v4.6h-4.6V30c0-0.8,0.4-1.5,1.1-2l1.9-1.2v-5.1l0,0
-						c0-0.4,0.2-0.8,0.4-1.1l3.6-3.6c0.3-0.3,0.8-0.3,1.1,0l3.6,3.6c0.3,0.3,0.4,0.7,0.4,1.1v5.1l1.9,1.2c0.7,0.4,1.1,1.2,1.1,2L38,40.8
-						L38,40.8z"/>
-					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
-					</svg>
-					`;
-			break;
-	}
-
-	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-	return iconUrl;
-};
-
-export const iconPath = "M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Zm-.04 5.71c-.32 0-.57-.27-.56-.58 0-.32.27-.57.58-.56.32 0 .57.27.56.58 0 .31-.25.55-.56.56h-.02Z";
-
-export const markerIconProps = (placeMarkerConfigs, type) => {
-
-	const scaledWidth = placeMarkerConfigs.size;
-	const scaledHeight = (scaledWidth * 3) / 2;
-	const iconUrl = customSVGIcon(
-		type,
-		placeMarkerConfigs.colors.innerFillColor,
-		placeMarkerConfigs.colors.innerStrokeColor,
-		placeMarkerConfigs.colors.outerFillColor,
-		placeMarkerConfigs.colors.outerStrokeColor
-	);
-	return {
-		url: iconUrl,
-		scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
-		anchor: new google.maps.Point(scaledWidth / 2, scaledHeight)
-	};
-};
-
-export const iconProps = () => {
-	return {
-		path: iconPath,
-		fillOpacity: 1,
-		strokeWeight: 1.75,
-		scale: 1.6,
-		anchor: new google.maps.Point(12, 17)
-	};
-};
-
-export const markerIcon = markerConfigs => {
-	return {
-		...iconProps(),
-		fillColor: markerConfigs.fillColor,
-		strokeColor: markerConfigs.strokeColor
-	};
-};
-
-export const markerIconSelected = markerConfigs => {
-	return {
-		...iconProps(),
-		fillColor: markerConfigs.selectedFillColor,
-		strokeColor: markerConfigs.selectedStrokeColor
-	};
-};
-
-export const pinIcon = markerConfigs => {
-	const { fillColor, strokeColor } = markerConfigs;
-
-	const svg = `
-	<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
-		<path d="${iconPath}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>
-	  </svg>
-	`;
-
-	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-};
-
+/* eslint-disable no-undef */
+import { placeTypes } from '~/constants/placeTypes';
+
+const customSVGIcon = (
+	type,
+	fillColor = "#FFFFFF",
+	strokeColor = "#000000",
+	backgroundFill = "#000000",
+	backgroundStroke = "#000000"
+) => {
+	let svg = "";
+	switch (type) {
+		case placeTypes.FOOD:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M25.7,36.6l0.6,15.8c0.1,2.4-2.3,2.4-2.3,2.4s-2.4,0-2.3-2.4l0.6-15.8c0.1-2-4.3-2.9-4-4.9l2.3-13.3h1.1
+						l-0.6,9.7l1.7,1.2l0.6-10.9h1.1l0.6,10.9l1.7-1.2l-0.6-9.7h1.1l2.3,13.3C29.7,33.7,25.6,34.6,25.7,36.6z"/>
+					<path class="st0" d="M40,52.4c0,2.4-2.3,2.4-2.3,2.4s-2.5,0-2.3-2.4L36.6,39c-0.9,0-3.4-0.4-3.4-2.4v-6.1c0-2.4,0.3-6.4,1.2-8.2
+						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.TOURIST_ATTRACTION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M27,18.5c-1.2,0-1.7,1.1-2.2,2.2L23.7,23h-4.5c-1.9,0-3.4,1.5-3.4,3.4v11.2c0,1.9,1.5,3.4,3.4,3.4h22.5
+						c1.9,0,3.4-1.5,3.4-3.4V26.4c0-1.9-1.5-3.4-3.4-3.4h-4.5L36,20.8c-0.6-1.1-1-2.2-2.2-2.2H27z M19.2,25.3c0.6,0,1.1,0.5,1.1,1.1
+						c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C18,25.8,18.5,25.3,19.2,25.3z M30.4,25.3c3.7,0,6.7,3,6.7,6.7s-3,6.7-6.7,6.7
+						s-6.7-3-6.7-6.7S26.7,25.3,30.4,25.3z M30.4,28.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
+						S32.3,28.7,30.4,28.7z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.SCHOOL:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M39.2,40.6c0,0-4.1,4.6-9.1,4.6S21,40.6,21,40.6v-5.2l9.1,5l9.1-5V40.6z"/>
+					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.STORE:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M45.4,27.7L42,41.1c-0.1,0.6-0.7,1-1.3,1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3
+						s1.5-3.3,3.3-3.3H23.3c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3S20,47.2,20,45.4s1.5-3.3,3.3-3.3c-0.6,0-1.2-0.4-1.3-1l-4.1-16.4
+						h-1.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h2.3c0.6,0,1.2,0.4,1.3,1l0.8,3h23.1c0.4,0,0.8,0.2,1.1,0.5
+						C45.4,26.9,45.5,27.3,45.4,27.7z"/>
+					<path d="M41.4,45.5c0-0.4-0.3-0.7-0.7-0.7S40,45.1,40,45.5C40.1,46.2,41.4,46.2,41.4,45.5z"/>
+					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.TRANSIT_STATION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M26.3,41.3h-2.8L20.7,44h-1.4v-1.4l1.4-1.4c-2.3,0-4.2-1.9-4.2-4.2V26c0-2.3,1.9-4.2,4.2-4.2h9.7
+						c2.3,0,4.2,1.9,4.2,4.2v1.4h-2.8v-2.8H19.3v9.7h6.9v7H26.3z"/>
+					<path class="st0" d="M44.3,43c0,0.5-0.4,1-1,1h-0.8c-0.5,0-1-0.5-1-1.1v-1.7H30.4V43c0,0.5-0.4,1.1-0.9,1.1h-0.9c-0.5,0-1-0.5-1-1
+						v-7.6l2-5.7c0.2-0.6,0.7-0.9,1.4-0.9h10c0.6,0,1.1,0.4,1.3,0.9l2,5.7V43z"/>
+					<circle cx="20.7" cy="37.1" r="1.4"/>
+					<circle cx="41.5" cy="37.1" r="1.4"/>
+					<circle cx="30.4" cy="37.1" r="1.4"/>
+					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.PLACE_OF_WORSHIP:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M21.3,40.8h-3.8c-1.3,0-2.3-1-2.3-2.3v-4.3c0-0.8,0.5-1.6,1.2-2l4.9-2.7V40.8z"/>
+					<path class="st0" d="M38,40.8h-4.6v-4.6c0-1.7-1.4-3-3-3c-1.7,0-3,1.4-3,3v4.6h-4.6V30c0-0.8,0.4-1.5,1.1-2l1.9-1.2v-5.1l0,0
+						c0-0.4,0.2-0.8,0.4-1.1l3.6-3.6c0.3-0.3,0.8-0.3,1.1,0l3.6,3.6c0.3,0.3,0.4,0.7,0.4,1.1v5.1l1.9,1.2c0.7,0.4,1.1,1.2,1.1,2L38,40.8
+						L38,40.8z"/>
+					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
+					</svg>
+					`;
+			break;
+	}
+
+	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+	return iconUrl;
+};
+
+export const iconPath = "M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Zm-.04 5.71c-.32 0-.57-.27-.56-.58 0-.32.27-.57.58-.56.32 0 .57.27.56.58 0 .31-.25.55-.56.56h-.02Z";
+
+export const markerIconProps = (placeMarkerConfigs, type) => {
+
+	const scaledWidth = placeMarkerConfigs.size;
+	const scaledHeight = (scaledWidth * 3) / 2;
+	const iconUrl = customSVGIcon(
+		type,
+		placeMarkerConfigs.colors.innerFillColor,
+		placeMarkerConfigs.colors.innerStrokeColor,
+		placeMarkerConfigs.colors.outerFillColor,
+		placeMarkerConfigs.colors.outerStrokeColor
+	);
+	return {
+		url: iconUrl,
+		scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
+		anchor: new google.maps.Point(scaledWidth / 2, scaledHeight)
+	};
+};
+
+export const iconProps = () => {
+	return {
+		path: iconPath,
+		fillOpacity: 1,
+		strokeWeight: 1.75,
+		scale: 1.6,
+		anchor: new google.maps.Point(12, 17)
+	};
+};
+
+export const markerIcon = markerConfigs => {
+	return {
+		...iconProps(),
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	};
+};
+
+export const markerIconSelected = markerConfigs => {
+	return {
+		...iconProps(),
+		fillColor: markerConfigs.selectedFillColor,
+		strokeColor: markerConfigs.selectedStrokeColor
+	};
+};
+
+export const pinIcon = markerConfigs => {
+	const { fillColor, strokeColor } = markerConfigs;
+
+	const svg = `
+	<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
+		<path d="${iconPath}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>
+	  </svg>
+	`;
+
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+

package/src/util/mapUtil.js

@@ -1,92 +1,92 @@
-export const getDistinctItemsByProximity = (items, listingEntitiesDetails) => {
-	const clusters = {};
-
-	if (!listingEntitiesDetails) return [];
-
-	const closeItemPairs = findCloseItems(listingEntitiesDetails);
-	if (closeItemPairs.length > 0) {
-		listingEntitiesDetails = adjustItemPositions(
-			listingEntitiesDetails,
-			closeItemPairs
-		);
-	}
-
-	items?.forEach(item => {
-		if(item.entityId !== -1){
-
-			const entityDetails = listingEntitiesDetails[item.entityId];
-
-			if (!entityDetails) {
-				console.error(`Details not found for entityId: ${item.entityId}`);
-				return;
-			}
-
-			item.mapDetails = entityDetails;
-
-			if (!clusters[item.entityId]) {
-				clusters[item.entityId] = {
-					...item.mapDetails,
-					items: { [item.id]: item }
-				};
-			} else {
-				clusters[item.entityId].items[item.id] = item;
-			}}
-	});
-
-	return Object.values(clusters);
-};
-
-export const findCloseItems = itemsObj => {
-	const closeItems = [];
-	const items = Object.values(itemsObj); // Convert object to array for iteration
-	const proximityThreshold = 0.0001;
-
-	for (let i = 0; i < items.length; i++) {
-		for (let j = i + 1; j < items.length; j++) {
-			const distanceLat = Math.abs(items[i].latitude - items[j].latitude);
-			const distanceLng = Math.abs(items[i].longitude - items[j].longitude);
-			if (
-				distanceLat < proximityThreshold &&
-				distanceLng < proximityThreshold
-			) {
-				closeItems.push({ item1: items[i], item2: items[j] });
-			}
-		}
-	}
-
-	return closeItems;
-};
-
-export const adjustItemPositions = (itemsObj, closeItemPairs) => {
-	const adjustmentValue = 0.0001;
-	const adjustedItems = { ...itemsObj }; // Create a shallow copy of the object
-
-	closeItemPairs.forEach(pair => {
-		if (adjustedItems[pair.item1.id] && adjustedItems[pair.item2.id]) {
-			adjustedItems[pair.item2.id].latitude += adjustmentValue;
-			adjustedItems[pair.item2.id].longitude += adjustmentValue;
-		}
-	});
-
-	return adjustedItems;
-};
-
-export const clusterOptions = (clusterGridSize, fillColor) => {
-	return {
-		gridSize: clusterGridSize,
-		maxZoom:15,
-		styles:[{
-			url: createSvgDataUri(fillColor),
-			textColor:'white',
-			height: 40,
-			width: 40
-		}]
-	};
-};
-
-function createSvgDataUri(fillColor) {
-	const svg = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
-	  <circle cx="25" cy="25" r="20" fill="${fillColor}" />
-	</svg>`;
-	return `data:image/svg+xml;base64,${btoa(svg)}`;
-}
+export const getDistinctItemsByProximity = (items, listingEntitiesDetails) => {
+	const clusters = {};
+
+	if (!listingEntitiesDetails) return [];
+
+	const closeItemPairs = findCloseItems(listingEntitiesDetails);
+	if (closeItemPairs.length > 0) {
+		listingEntitiesDetails = adjustItemPositions(
+			listingEntitiesDetails,
+			closeItemPairs
+		);
+	}
+
+	items?.forEach(item => {
+		if(item.entityId !== -1){
+
+			const entityDetails = listingEntitiesDetails[item.entityId];
+
+			if (!entityDetails) {
+				console.error(`Details not found for entityId: ${item.entityId}`);
+				return;
+			}
+
+			item.mapDetails = entityDetails;
+
+			if (!clusters[item.entityId]) {
+				clusters[item.entityId] = {
+					...item.mapDetails,
+					items: { [item.id]: item }
+				};
+			} else {
+				clusters[item.entityId].items[item.id] = item;
+			}}
+	});
+
+	return Object.values(clusters);
+};
+
+export const findCloseItems = itemsObj => {
+	const closeItems = [];
+	const items = Object.values(itemsObj); // Convert object to array for iteration
+	const proximityThreshold = 0.0001;
+
+	for (let i = 0; i < items.length; i++) {
+		for (let j = i + 1; j < items.length; j++) {
+			const distanceLat = Math.abs(items[i].latitude - items[j].latitude);
+			const distanceLng = Math.abs(items[i].longitude - items[j].longitude);
+			if (
+				distanceLat < proximityThreshold &&
+				distanceLng < proximityThreshold
+			) {
+				closeItems.push({ item1: items[i], item2: items[j] });
+			}
+		}
+	}
+
+	return closeItems;
+};
+
+export const adjustItemPositions = (itemsObj, closeItemPairs) => {
+	const adjustmentValue = 0.0001;
+	const adjustedItems = { ...itemsObj }; // Create a shallow copy of the object
+
+	closeItemPairs.forEach(pair => {
+		if (adjustedItems[pair.item1.id] && adjustedItems[pair.item2.id]) {
+			adjustedItems[pair.item2.id].latitude += adjustmentValue;
+			adjustedItems[pair.item2.id].longitude += adjustmentValue;
+		}
+	});
+
+	return adjustedItems;
+};
+
+export const clusterOptions = (clusterGridSize, fillColor) => {
+	return {
+		gridSize: clusterGridSize,
+		maxZoom:15,
+		styles:[{
+			url: createSvgDataUri(fillColor),
+			textColor:'white',
+			height: 40,
+			width: 40
+		}]
+	};
+};
+
+function createSvgDataUri(fillColor) {
+	const svg = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+	  <circle cx="25" cy="25" r="20" fill="${fillColor}" />
+	</svg>`;
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+}