Skip to content

Commit 56b820d

Browse files
h0wterh0wter
authored
th-96: Add custom map design and tow-truck icon (#105)
* th-96: + map design and tow-truck icon * th-96: * changes map style connection method * th-96: * update icon import
1 parent 8e80dc2 commit 56b820d

File tree

4 files changed

+232
-0
lines changed

4 files changed

+232
-0
lines changed

‎frontend/src/assets/img/tow-truck.png‎

8.87 KB
Loading

‎frontend/src/libs/packages/map/map.config.json‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
[
2+
{
3+
"featureType": "landscape.man_made",
4+
"stylers": [
5+
{
6+
"visibility": "off"
7+
}
8+
]
9+
},
10+
{
11+
"featureType": "poi.attraction",
12+
"elementType": "labels.icon",
13+
"stylers": [
14+
{
15+
"color": "#6d8e9a"
16+
}
17+
]
18+
},
19+
{
20+
"featureType": "poi.attraction",
21+
"elementType": "labels.text.fill",
22+
"stylers": [
23+
{
24+
"color": "#6d8e9a"
25+
}
26+
]
27+
},
28+
{
29+
"featureType": "poi.business",
30+
"stylers": [
31+
{
32+
"visibility": "off"
33+
}
34+
]
35+
},
36+
{
37+
"featureType": "poi.government",
38+
"stylers": [
39+
{
40+
"visibility": "off"
41+
}
42+
]
43+
},
44+
{
45+
"featureType": "poi.medical",
46+
"stylers": [
47+
{
48+
"visibility": "off"
49+
}
50+
]
51+
},
52+
{
53+
"featureType": "poi.park",
54+
"elementType": "geometry.fill",
55+
"stylers": [
56+
{
57+
"color": "#e6f4fc"
58+
}
59+
]
60+
},
61+
{
62+
"featureType": "poi.park",
63+
"elementType": "labels.icon",
64+
"stylers": [
65+
{
66+
"color": "#6d9c7d"
67+
}
68+
]
69+
},
70+
{
71+
"featureType": "poi.park",
72+
"elementType": "labels.text.fill",
73+
"stylers": [
74+
{
75+
"color": "#6c8680"
76+
}
77+
]
78+
},
79+
{
80+
"featureType": "poi.place_of_worship",
81+
"stylers": [
82+
{
83+
"visibility": "off"
84+
}
85+
]
86+
},
87+
{
88+
"featureType": "poi.school",
89+
"stylers": [
90+
{
91+
"visibility": "off"
92+
}
93+
]
94+
},
95+
{
96+
"featureType": "poi.sports_complex",
97+
"stylers": [
98+
{
99+
"visibility": "off"
100+
}
101+
]
102+
},
103+
{
104+
"featureType": "road.arterial",
105+
"elementType": "geometry.fill",
106+
"stylers": [
107+
{
108+
"color": "#f6fdfd"
109+
}
110+
]
111+
},
112+
{
113+
"featureType": "road.arterial",
114+
"elementType": "labels.text.fill",
115+
"stylers": [
116+
{
117+
"color": "#8f96a3"
118+
}
119+
]
120+
},
121+
{
122+
"featureType": "road.highway",
123+
"elementType": "geometry.fill",
124+
"stylers": [
125+
{
126+
"color": "#f6fdfd"
127+
}
128+
]
129+
},
130+
{
131+
"featureType": "road.highway",
132+
"elementType": "geometry.stroke",
133+
"stylers": [
134+
{
135+
"visibility": "off"
136+
}
137+
]
138+
},
139+
{
140+
"featureType": "road.highway",
141+
"elementType": "labels.text.fill",
142+
"stylers": [
143+
{
144+
"color": "#8f96a3"
145+
}
146+
]
147+
},
148+
{
149+
"featureType": "road.highway.controlled_access",
150+
"elementType": "geometry.stroke",
151+
"stylers": [
152+
{
153+
"visibility": "off"
154+
}
155+
]
156+
},
157+
{
158+
"featureType": "road.local",
159+
"elementType": "geometry.fill",
160+
"stylers": [
161+
{
162+
"saturation": -100
163+
},
164+
{
165+
"lightness": 60
166+
}
167+
]
168+
},
169+
{
170+
"featureType": "transit",
171+
"elementType": "labels.icon",
172+
"stylers": [
173+
{
174+
"visibility": "off"
175+
}
176+
]
177+
},
178+
{
179+
"featureType": "transit.line",
180+
"stylers": [
181+
{
182+
"color": "#8ba4c9"
183+
}
184+
]
185+
},
186+
{
187+
"featureType": "transit.line",
188+
"elementType": "labels.text.stroke",
189+
"stylers": [
190+
{
191+
"visibility": "off"
192+
}
193+
]
194+
},
195+
{
196+
"featureType": "transit.station.rail",
197+
"elementType": "labels.icon",
198+
"stylers": [
199+
{
200+
"color": "#6a83a4"
201+
},
202+
{
203+
"saturation": -65
204+
},
205+
{
206+
"lightness": 25
207+
}
208+
]
209+
},
210+
{
211+
"featureType": "transit.station.rail",
212+
"elementType": "labels.text.fill",
213+
"stylers": [
214+
{
215+
"color": "#6a83a4"
216+
}
217+
]
218+
},
219+
{
220+
"featureType": "water",
221+
"stylers": [
222+
{
223+
"color": "#d8e6f4"
224+
}
225+
]
226+
}
227+
]

‎frontend/src/libs/packages/map/map.package.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import truckImg from '~/assets/img/tow-truck.png';
12
import { ApplicationError } from '~/libs/exceptions/exceptions.js';
23

34
import { type IMapService } from './libs/interfaces/interfaces.js';
5+
import mapStyle from './map.config.json';
46

57
type Constructor = {
68
mapElement: HTMLDivElement;
@@ -30,6 +32,7 @@ class MapService implements IMapService {
3032
this.map = new google.maps.Map(mapElement, {
3133
center,
3234
zoom,
35+
styles: mapStyle as google.maps.MapTypeStyle[],
3336
});
3437
}
3538

@@ -116,6 +119,7 @@ class MapService implements IMapService {
116119
position,
117120
label,
118121
map: this.map,
122+
icon: truckImg,
119123
});
120124
}
121125
}

‎frontend/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"esModuleInterop": true,
99
"moduleResolution": "Node",
1010
"skipLibCheck": true,
11+
"resolveJsonModule": true,
1112
"lib": ["DOM", "DOM.Iterable", "ESNext"],
1213
"jsx": "react-jsx",
1314
"baseUrl": ".",

0 commit comments

Comments
 (0)