Merge branch 'master' into sophie-ai-images

1 files changed, 103 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..a580fcaa0
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MarkerIcons.tsx
@@ -0,0 +1,103 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faShopify } from '@fortawesome/free-brands-svg-icons';
+import {
+    faBasketball,
+    faBicycle,
+    faBowlFood,
+    faBus,
+    faCameraRetro,
+    faCar,
+    faCartShopping,
+    faFilm,
+    faFootball,
+    faFutbol,
+    faHockeyPuck,
+    faHospital,
+    faHotel,
+    faHouse,
+    faLandmark,
+    faLocationDot,
+    faLocationPin,
+    faMapPin,
+    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 * as React from 'react';
+
+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, size: string, color?: string): JSX.Element {
+        const icon: IconProp = MarkerIcons.FAMarkerIconsMap[key];
+        const iconProps: any = { icon };
+
+        if (color) {
+            iconProps.color = color;
+        }
+
+        return <FontAwesomeIcon {...iconProps} size={size} />;
+    }
+
+    static FAMarkerIconsMap: { [key: string]: IconProp } = {
+        MAP_PIN: faLocationDot,
+        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,
+    };
+}