Skip to content

Commit 172d200

Browse files
jleung51jleung51
committed
Add Google Maps styling
1 parent 3173e2f commit 172d200

File tree

2 files changed

+311
-2
lines changed

2 files changed

+311
-2
lines changed

‎assets/js/pac-macro.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,43 @@ function createPlayerMarker(title, iconUrl) {
6666
});
6767
}
6868

69+
var getFile = function(path) {
70+
var request = new XMLHttpRequest();
71+
request.open('GET', path, true);
72+
request.send();
73+
console.log(request.responseText);
74+
var a = JSON.parse(request.responseText);
75+
console.log(a);
76+
return a;
77+
}
78+
6979
// This function generates the map and players, and initializes server updates.
7080
function initMap() {
81+
7182
map = new google.maps.Map(document.getElementById('map'), {
7283
center: config.mapLocation.downtownVancouver,
73-
zoom: 16
84+
zoom: 16,
85+
mapTypeControlOptions: {mapTypeIds: [
86+
'roadmap',
87+
// 'satellite',
88+
// 'hybrid',
89+
// 'terrain',
90+
'styled_map'
91+
]}
7492
});
7593

94+
var styledMapType;
95+
try {
96+
styledMapType = new google.maps.StyledMapType(
97+
getFile('assets/json/google_maps_style.json')
98+
);
99+
map.mapTypes.set('styled_map', styledMapType);
100+
map.setMapTypeId('styled_map');
101+
}
102+
catch (e) {
103+
console.log("Error: Could not fetch Google Maps styling.");
104+
}
105+
76106
players = [
77107
createPlayerMarker("Pacman", "assets/img/pacman.svg"),
78108
createPlayerMarker("Inky", "assets/img/inky.svg"),
@@ -166,4 +196,4 @@ function updatePlayers() {
166196
lng: response[i].location.longitude
167197
});
168198
}
169-
}
199+
}

‎assets/json/google_maps_style.json‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
[
2+
{
3+
"_comment": "made in https://mapstyle.withgoogle.com/",
4+
"elementType": "geometry",
5+
"stylers": [
6+
{
7+
"color": "#1b2745"
8+
},
9+
{
10+
"saturation": 30
11+
},
12+
{
13+
"lightness": -10
14+
}
15+
]
16+
},
17+
{
18+
"elementType": "labels.text.fill",
19+
"stylers": [
20+
{
21+
"color": "#8ec3b9"
22+
}
23+
]
24+
},
25+
{
26+
"elementType": "labels.text.stroke",
27+
"stylers": [
28+
{
29+
"color": "#1a3646"
30+
}
31+
]
32+
},
33+
{
34+
"featureType": "administrative.country",
35+
"elementType": "geometry.stroke",
36+
"stylers": [
37+
{
38+
"color": "#4b6878"
39+
}
40+
]
41+
},
42+
{
43+
"featureType": "administrative.land_parcel",
44+
"elementType": "labels.text.fill",
45+
"stylers": [
46+
{
47+
"color": "#64779e"
48+
}
49+
]
50+
},
51+
{
52+
"featureType": "administrative.province",
53+
"elementType": "geometry.stroke",
54+
"stylers": [
55+
{
56+
"color": "#4b6878"
57+
}
58+
]
59+
},
60+
{
61+
"featureType": "landscape.man_made",
62+
"elementType": "geometry.stroke",
63+
"stylers": [
64+
{
65+
"color": "#334e87"
66+
}
67+
]
68+
},
69+
{
70+
"featureType": "landscape.natural",
71+
"elementType": "geometry",
72+
"stylers": [
73+
{
74+
"color": "#023e58"
75+
}
76+
]
77+
},
78+
{
79+
"featureType": "poi",
80+
"elementType": "geometry",
81+
"stylers": [
82+
{
83+
"color": "#283d6a"
84+
}
85+
]
86+
},
87+
{
88+
"featureType": "poi",
89+
"elementType": "labels.text.fill",
90+
"stylers": [
91+
{
92+
"color": "#6f9ba5"
93+
}
94+
]
95+
},
96+
{
97+
"featureType": "poi",
98+
"elementType": "labels.text.stroke",
99+
"stylers": [
100+
{
101+
"color": "#1d2c4d"
102+
}
103+
]
104+
},
105+
{
106+
"featureType": "poi.business",
107+
"stylers": [
108+
{
109+
"visibility": "off"
110+
}
111+
]
112+
},
113+
{
114+
"featureType": "poi.park",
115+
"elementType": "geometry.fill",
116+
"stylers": [
117+
{
118+
"color": "#023e58"
119+
}
120+
]
121+
},
122+
{
123+
"featureType": "poi.park",
124+
"elementType": "labels.text",
125+
"stylers": [
126+
{
127+
"visibility": "off"
128+
}
129+
]
130+
},
131+
{
132+
"featureType": "poi.park",
133+
"elementType": "labels.text.fill",
134+
"stylers": [
135+
{
136+
"color": "#3C7680"
137+
}
138+
]
139+
},
140+
{
141+
"featureType": "road",
142+
"elementType": "geometry",
143+
"stylers": [
144+
{
145+
"color": "#304a7d"
146+
}
147+
]
148+
},
149+
{
150+
"featureType": "road",
151+
"elementType": "labels.text.fill",
152+
"stylers": [
153+
{
154+
"color": "#98a5be"
155+
}
156+
]
157+
},
158+
{
159+
"featureType": "road",
160+
"elementType": "labels.text.stroke",
161+
"stylers": [
162+
{
163+
"color": "#1d2c4d"
164+
}
165+
]
166+
},
167+
{
168+
"featureType": "road.highway",
169+
"stylers": [
170+
{
171+
"visibility": "simplified"
172+
},
173+
{
174+
"weight": 4.5
175+
}
176+
]
177+
},
178+
{
179+
"featureType": "road.highway",
180+
"elementType": "geometry",
181+
"stylers": [
182+
{
183+
"color": "#2c6675"
184+
}
185+
]
186+
},
187+
{
188+
"featureType": "road.highway",
189+
"elementType": "geometry.stroke",
190+
"stylers": [
191+
{
192+
"color": "#255763"
193+
}
194+
]
195+
},
196+
{
197+
"featureType": "road.highway",
198+
"elementType": "labels.text.fill",
199+
"stylers": [
200+
{
201+
"color": "#b0d5ce"
202+
}
203+
]
204+
},
205+
{
206+
"featureType": "road.highway",
207+
"elementType": "labels.text.stroke",
208+
"stylers": [
209+
{
210+
"color": "#023e58"
211+
}
212+
]
213+
},
214+
{
215+
"featureType": "transit",
216+
"elementType": "labels.text.fill",
217+
"stylers": [
218+
{
219+
"color": "#98a5be"
220+
}
221+
]
222+
},
223+
{
224+
"featureType": "transit",
225+
"elementType": "labels.text.stroke",
226+
"stylers": [
227+
{
228+
"color": "#1d2c4d"
229+
}
230+
]
231+
},
232+
{
233+
"featureType": "transit.line",
234+
"elementType": "geometry.fill",
235+
"stylers": [
236+
{
237+
"color": "#283d6a"
238+
}
239+
]
240+
},
241+
{
242+
"featureType": "transit.station",
243+
"stylers": [
244+
{
245+
"visibility": "off"
246+
}
247+
]
248+
},
249+
{
250+
"featureType": "transit.station",
251+
"elementType": "geometry",
252+
"stylers": [
253+
{
254+
"color": "#3a4762"
255+
},
256+
{
257+
"visibility": "off"
258+
}
259+
]
260+
},
261+
{
262+
"featureType": "water",
263+
"elementType": "geometry",
264+
"stylers": [
265+
{
266+
"color": "#0e1626"
267+
}
268+
]
269+
},
270+
{
271+
"featureType": "water",
272+
"elementType": "labels.text.fill",
273+
"stylers": [
274+
{
275+
"color": "#4e6d70"
276+
}
277+
]
278+
}
279+
]

0 commit comments

Comments
 (0)