1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
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,
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;
}
// eslint-disable-next-line react/jsx-props-no-spreading
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,
};
}
|
