new updates to map feature

1 files changed, 87 insertions, 0 deletions

diff --git a/src/client/views/nodes/MapBox/MarkerIcons.tsx b/src/client/views/nodes/MapBox/MarkerIcons.tsx
new file mode 100644
index 000000000..cf50109ac
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MarkerIcons.tsx
@@ -0,0 +1,87 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faShopify } from '@fortawesome/free-brands-svg-icons';
+import { IconLookup, faBasketball, faBicycle, faBowlFood, faBus, faCameraRetro, faCar, faCartShopping, faFilm, faFootball, faFutbol, faHockeyPuck, faHospital, faHotel, faHouse, faLandmark, faMasksTheater, faMugSaucer, faPersonHiking, faPlane, faSchool, faShirt, faShop, faSquareParking, faStar, faTrainSubway, faTree, faUtensils, faVolleyball } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React = require('react');
+
+export type MapboxColor = 'yellow' | 'red' | 'orange' | 'purple' | 'pink' | 'blue' | 'green';
+type ColorProperties = {
+    fill: string,
+    stroke: string
+}
+type ColorsMap = {
+    [key in MapboxColor]: ColorProperties;
+}
+
+export class MarkerIcons {
+
+    static getMapboxIcon = (color: string) => {
+        return (
+            <svg xmlns="http://www.w3.org/2000/svg" id="marker" data-name="marker" width="20" height="48" viewBox="0 0 20 35">
+            <g id="mapbox-marker-icon">
+                <g id="icon">
+                <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" />
+                <g id="mask" opacity="0.3">
+                    <g id="group">
+                    <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fillRule="evenodd"/>
+                    </g>
+                </g>
+                <path id="color" fill={color} strokeWidth="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+                <path id="circle" fill="#fff" stroke='white' strokeWidth="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+                </g>
+            </g>
+            <rect width="20" height="48" fill="none"/>
+        </svg>
+        )
+    }
+
+    static getFontAwesomeIcon(key: string, color?: string): JSX.Element | undefined {
+        const icon: IconProp = MarkerIcons.FAMarkerIconsMap[key];
+
+        if (icon) {
+            const iconProps: any = { icon };
+        
+            if (color) {
+              iconProps.color = color;
+            }
+        
+            return (<FontAwesomeIcon {...iconProps} size='1x' />);
+          }
+        
+        return undefined;
+    }
+
+    static FAMarkerIconsMap: {[key: string]: IconProp} = {
+        'RESTAURANT_ICON': faUtensils,
+        'HOTEL_ICON': faHotel,
+        'HOUSE_ICON': faHouse,
+        'AIRPLANE_ICON': faPlane,
+        'CAR_ICON': faCar,
+        'BUS_ICON': faBus,
+        'TRAIN_ICON': faTrainSubway,
+        'BICYCLE_ICON': faBicycle,
+        'PARKING_ICON': faSquareParking,
+        'PHOTO_ICON': faCameraRetro,
+        'CAFE_ICON': faMugSaucer,
+        'STAR_ICON': faStar,
+        'SHOPPING_CART_ICON': faCartShopping,
+        'SHOPIFY_ICON': faShopify,
+        'SHOP_ICON': faShop,
+        'SHIRT_ICON': faShirt,
+        'FOOD_ICON': faBowlFood,
+        'LANDMARK_ICON': faLandmark,
+        'HOSPITAL_ICON': faHospital,
+        'NATURE_ICON': faTree,
+        'HIKING_ICON': faPersonHiking,
+        'SOCCER_ICON': faFutbol,
+        'VOLLEYBALL_ICON': faVolleyball,
+        'BASKETBALL_ICON': faBasketball,
+        'HOCKEY_ICON': faHockeyPuck,
+        'FOOTBALL_ICON': faFootball,
+        'SCHOOL_ICON': faSchool,
+        'THEATER_ICON': faMasksTheater,
+        'FILM_ICON': faFilm
+    }
+
+
+}
\ No newline at end of file