├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── manifest.json
└── skateboarding.svg
├── src
├── App.js
├── data
│ └── skateboard-parks.json
├── index.css
├── index.js
└── serviceWorker.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mapbox React Demo
2 |
3 | Video available at: https://youtu.be/JJatzkPcmoI
4 |
5 | ## Running Locally
6 |
7 | Mapbox API Token: To run this locally you will need to create a file called `.env.local` and in it put an environment variable called `REACT_APP_MAPBOX_TOKEN` that has as its value a token created on the Mapbox website.
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mapbox-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.8.6",
7 | "react-dom": "^16.8.6",
8 | "react-map-gl": "^4.1.2",
9 | "react-scripts": "2.1.8"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "eslintConfig": {
18 | "extends": "react-app"
19 | },
20 | "browserslist": [
21 | ">0.2%",
22 | "not dead",
23 | "not ie <= 11",
24 | "not op_mini all"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leighhalliday/mapbox-react-demo/8354aa681bb290899771f44c10da8c450a7091d9/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
15 |
16 |
25 | React App
26 |
27 |
28 |
29 |
30 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/public/skateboarding.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
28 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import ReactMapGL, { Marker, Popup } from "react-map-gl";
3 | import * as parkDate from "./data/skateboard-parks.json";
4 |
5 | export default function App() {
6 | const [viewport, setViewport] = useState({
7 | latitude: 45.4211,
8 | longitude: -75.6903,
9 | width: "100vw",
10 | height: "100vh",
11 | zoom: 10
12 | });
13 | const [selectedPark, setSelectedPark] = useState(null);
14 |
15 | useEffect(() => {
16 | const listener = e => {
17 | if (e.key === "Escape") {
18 | setSelectedPark(null);
19 | }
20 | };
21 | window.addEventListener("keydown", listener);
22 |
23 | return () => {
24 | window.removeEventListener("keydown", listener);
25 | };
26 | }, []);
27 |
28 | return (
29 |
30 |
{
35 | setViewport(viewport);
36 | }}
37 | >
38 | {parkDate.features.map(park => (
39 |
44 |
53 |
54 | ))}
55 |
56 | {selectedPark ? (
57 | {
61 | setSelectedPark(null);
62 | }}
63 | >
64 |
65 |
{selectedPark.properties.NAME}
66 |
{selectedPark.properties.DESCRIPTIO}
67 |
68 |
69 | ) : null}
70 |
71 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/src/data/skateboard-parks.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "FeatureCollection",
3 | "crs": {
4 | "type": "name",
5 | "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
6 | },
7 | "features": [
8 | {
9 | "type": "Feature",
10 | "properties": {
11 | "PARK_ID": 960,
12 | "FACILITYID": 28014,
13 | "NAME": "Bearbrook Skateboard Park",
14 | "NAME_FR": "Planchodrome Bearbrook",
15 | "ADDRESS": "8720 Russell Road",
16 | "ADDRESS_FR": "8720, chemin Russell",
17 | "FACILITY_T": "flat",
18 | "FACILITY_1": "plat",
19 | "ACCESSCTRL": "no/non",
20 | "ACCESSIBLE": "no/non",
21 | "OPEN": null,
22 | "NOTES": "Outdoor",
23 | "MODIFIED_D": "2018/01/18",
24 | "CREATED_DA": null,
25 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
26 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
27 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
28 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
29 | "PICTURE_LI": null,
30 | "PICTURE_DE": null,
31 | "PICTURE__1": null
32 | },
33 | "geometry": {
34 | "type": "Point",
35 | "coordinates": [-75.3372987731628, 45.383321536272049]
36 | }
37 | },
38 | {
39 | "type": "Feature",
40 | "properties": {
41 | "PARK_ID": 1219,
42 | "FACILITYID": 28001,
43 | "NAME": "Bob MacQuarrie Skateboard Park (SK8 Extreme Park)",
44 | "NAME_FR": "Planchodrome Bob-MacQuarrie (Parc SK8 Extreme)",
45 | "ADDRESS": "1490 Youville Drive",
46 | "ADDRESS_FR": "1490, promenade Youville",
47 | "FACILITY_T": "other",
48 | "FACILITY_1": "autre",
49 | "ACCESSCTRL": "no/non",
50 | "ACCESSIBLE": "no/non",
51 | "OPEN": null,
52 | "NOTES": "Outdoor",
53 | "MODIFIED_D": "2018/01/18",
54 | "CREATED_DA": null,
55 | "FACILITY": "Community: mid size facility to service population of 40,000 plus",
56 | "FACILITY_F": "Communautaire : installation de taille moyenne assurant des services à 40 000 résidents ou plus.",
57 | "DESCRIPTIO": "Flat asphalt surface, 10 components, City run learn to skateboard programs, City run skateboard camps in summer",
58 | "DESCRIPT_1": "Surface d'asphalte plane, 10 modules, programmes et camps de planche à roulettes en été géré par la Ville",
59 | "PICTURE_LI": null,
60 | "PICTURE_DE": null,
61 | "PICTURE__1": null
62 | },
63 | "geometry": {
64 | "type": "Point",
65 | "coordinates": [-75.546518086577947, 45.467134581917357]
66 | }
67 | },
68 | {
69 | "type": "Feature",
70 | "properties": {
71 | "PARK_ID": 1157,
72 | "FACILITYID": 28002,
73 | "NAME": "Walter Baker Skateboard Park",
74 | "NAME_FR": "Planchodrome Walter-Baker",
75 | "ADDRESS": "100 Charlie Rogers Place",
76 | "ADDRESS_FR": "100, place Charlie Rogers",
77 | "FACILITY_T": "bowl",
78 | "FACILITY_1": "bol",
79 | "ACCESSCTRL": "no/non",
80 | "ACCESSIBLE": "no/non",
81 | "OPEN": null,
82 | "NOTES": "Outdoor",
83 | "MODIFIED_D": "2018/01/18",
84 | "CREATED_DA": null,
85 | "FACILITY": "Community : mid size facility to service population of 40,000 plus",
86 | "FACILITY_F": "Communautaire : installation de taille moyenne assurant des services à 40 000 résidents ou plus.",
87 | "DESCRIPTIO": "Concrete bowl, 7,000 sq ft",
88 | "DESCRIPT_1": "Bol de béton, 7 000 pi2",
89 | "PICTURE_LI": null,
90 | "PICTURE_DE": null,
91 | "PICTURE__1": null
92 | },
93 | "geometry": {
94 | "type": "Point",
95 | "coordinates": [-75.898610599532319, 45.295014379864874]
96 | }
97 | },
98 | {
99 | "type": "Feature",
100 | "properties": {
101 | "PARK_ID": 9,
102 | "FACILITYID": 28006,
103 | "NAME": "Roving Skateboard Park Location",
104 | "NAME_FR": "Lieu de planchodrome itinérant",
105 | "ADDRESS": "2785 8th Line Road",
106 | "ADDRESS_FR": "2785, chemin 8th Line",
107 | "FACILITY_T": "other",
108 | "FACILITY_1": "autre",
109 | "ACCESSCTRL": "no/non",
110 | "ACCESSIBLE": "no/non",
111 | "OPEN": null,
112 | "NOTES": "Outdoor - Mobile",
113 | "MODIFIED_D": "2018/01/18",
114 | "CREATED_DA": null,
115 | "FACILITY": "Metcalfe Community Centre - Roving Skateboard Park Location",
116 | "FACILITY_F": "Centre communautaire de Metcalfe - Lieu de planchodrome itinérant",
117 | "DESCRIPTIO": "Flat surface, 5 components",
118 | "DESCRIPT_1": "Surface plane, 5 modules",
119 | "PICTURE_LI": null,
120 | "PICTURE_DE": null,
121 | "PICTURE__1": null
122 | },
123 | "geometry": {
124 | "type": "Point",
125 | "coordinates": [-75.468561642270757, 45.23032561834377]
126 | }
127 | },
128 | {
129 | "type": "Feature",
130 | "properties": {
131 | "PARK_ID": 1160,
132 | "FACILITYID": 28007,
133 | "NAME": "Roving Skateboard Park Location",
134 | "NAME_FR": "Lieu de planchodrome itinérant",
135 | "ADDRESS": "10 Warner Colpitts Lane",
136 | "ADDRESS_FR": "10, ruelle Warner Colpitts",
137 | "FACILITY_T": "flat",
138 | "FACILITY_1": "plat",
139 | "ACCESSCTRL": "yes/oui",
140 | "ACCESSIBLE": "no/non",
141 | "OPEN": null,
142 | "NOTES": "Indoor - Summer",
143 | "MODIFIED_D": "2018/03/07",
144 | "CREATED_DA": null,
145 | "FACILITY": "Johnny Leroux Stittsville Community Arena - Roving Skateboard Park Location",
146 | "FACILITY_F": "Aréna communautaire de Stittsville Johnny-Leroux - Lieu de planchodrome itinérant",
147 | "DESCRIPTIO": "Flat surface, 5 components",
148 | "DESCRIPT_1": "Surface plane, 5 modules",
149 | "PICTURE_LI": null,
150 | "PICTURE_DE": null,
151 | "PICTURE__1": null
152 | },
153 | "geometry": {
154 | "type": "Point",
155 | "coordinates": [-75.926651366520872, 45.260659774950561]
156 | }
157 | },
158 | {
159 | "type": "Feature",
160 | "properties": {
161 | "PARK_ID": 1693,
162 | "FACILITYID": 28016,
163 | "NAME": "Legacy Skateboard Park",
164 | "NAME_FR": "Planchodrome Legacy",
165 | "ADDRESS": "101 Centrepointe Drive",
166 | "ADDRESS_FR": "101, promenade Centrepointe",
167 | "FACILITY_T": "bowl",
168 | "FACILITY_1": "bol",
169 | "ACCESSCTRL": "no/non",
170 | "ACCESSIBLE": "no/non",
171 | "OPEN": null,
172 | "NOTES": "Outdoor",
173 | "MODIFIED_D": "2018/01/18",
174 | "CREATED_DA": null,
175 | "FACILITY": "District: larger facility to service population of 100,000 plus",
176 | "FACILITY_F": "De district : grande installation assurant des services à 100 000 résidents ou plus.",
177 | "DESCRIPTIO": "Large concrete bowl, many street and vertical components, 17,000 sq ft",
178 | "DESCRIPT_1": "Grand bol de béton, modules de rue et modules verticaux, 17 000 pi2",
179 | "PICTURE_LI": null,
180 | "PICTURE_DE": null,
181 | "PICTURE__1": null
182 | },
183 | "geometry": {
184 | "type": "Point",
185 | "coordinates": [-75.760933332842754, 45.345566668964558]
186 | }
187 | },
188 | {
189 | "type": "Feature",
190 | "properties": {
191 | "PARK_ID": 1717,
192 | "FACILITYID": 28018,
193 | "NAME": "Greenboro Skateboard Park",
194 | "NAME_FR": "Planchodrome de Greenboro",
195 | "ADDRESS": "3142 Conroy Road",
196 | "ADDRESS_FR": "3142, chemin Conroy",
197 | "FACILITY_T": "flat",
198 | "FACILITY_1": "plat",
199 | "ACCESSCTRL": "no/non",
200 | "ACCESSIBLE": "no/non",
201 | "OPEN": null,
202 | "NOTES": "Outdoor",
203 | "MODIFIED_D": "2018/01/18",
204 | "CREATED_DA": null,
205 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
206 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
207 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
208 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
209 | "PICTURE_LI": null,
210 | "PICTURE_DE": null,
211 | "PICTURE__1": null
212 | },
213 | "geometry": {
214 | "type": "Point",
215 | "coordinates": [-75.625996131485707, 45.375401587496128]
216 | }
217 | },
218 | {
219 | "type": "Feature",
220 | "properties": {
221 | "PARK_ID": 137,
222 | "FACILITYID": 28019,
223 | "NAME": "Bridlewood Skateboard Park",
224 | "NAME_FR": "Planchodrome Bridlewood",
225 | "ADDRESS": "65 Stonehaven Drive",
226 | "ADDRESS_FR": "65, promenade Stonehaven",
227 | "FACILITY_T": "flat",
228 | "FACILITY_1": "plat",
229 | "ACCESSCTRL": "no/non",
230 | "ACCESSIBLE": "no/non",
231 | "OPEN": null,
232 | "NOTES": "Outdoor",
233 | "MODIFIED_D": "2018/01/18",
234 | "CREATED_DA": null,
235 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
236 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
237 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
238 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
239 | "PICTURE_LI": null,
240 | "PICTURE_DE": null,
241 | "PICTURE__1": null
242 | },
243 | "geometry": {
244 | "type": "Point",
245 | "coordinates": [-75.857009812435976, 45.290758029776626]
246 | }
247 | },
248 | {
249 | "type": "Feature",
250 | "properties": {
251 | "PARK_ID": 1133,
252 | "FACILITYID": 28020,
253 | "NAME": "Roving Skateboard Park Location",
254 | "NAME_FR": "Lieu de planchodrome itinérant",
255 | "ADDRESS": "100 Clifford Campbell Street",
256 | "ADDRESS_FR": "100, rue Clifford-Campbell",
257 | "FACILITY_T": "flat",
258 | "FACILITY_1": "plat",
259 | "ACCESSCTRL": "no/non",
260 | "ACCESSIBLE": "no/non",
261 | "OPEN": null,
262 | "NOTES": "Outdoor",
263 | "MODIFIED_D": "2018/01/18",
264 | "CREATED_DA": null,
265 | "FACILITY": "Fitzroy Harbour Community Centre - Roving Skateboard Park Location",
266 | "FACILITY_F": "Centre communautaire de Fitzroy Harbour - Lieu de planchodrome itinérant",
267 | "DESCRIPTIO": "Flat surface, 5 components",
268 | "DESCRIPT_1": "Surface plane, 5 modules",
269 | "PICTURE_LI": null,
270 | "PICTURE_DE": null,
271 | "PICTURE__1": null
272 | },
273 | "geometry": {
274 | "type": "Point",
275 | "coordinates": [-76.206087708136721, 45.470459866077654]
276 | }
277 | },
278 | {
279 | "type": "Feature",
280 | "properties": {
281 | "PARK_ID": 657,
282 | "FACILITYID": 28000,
283 | "NAME": "Roving Skateboard Park Location",
284 | "NAME_FR": "Lieu de planchodrome itinérant",
285 | "ADDRESS": "110 Malvern Drive",
286 | "ADDRESS_FR": "110, promenade Malvern",
287 | "FACILITY_T": "flat",
288 | "FACILITY_1": "plat",
289 | "ACCESSCTRL": "no/non",
290 | "ACCESSIBLE": "no/non",
291 | "OPEN": null,
292 | "NOTES": "Outdoor",
293 | "MODIFIED_D": "2018/01/18",
294 | "CREATED_DA": null,
295 | "FACILITY": "Walter Baker Sports Centre - Roving Skateboard Park Location",
296 | "FACILITY_F": "Centre sportif Walter-Baker - Lieu de planchodrome itinérant",
297 | "DESCRIPTIO": "Flat surface, 5 components",
298 | "DESCRIPT_1": "Surface plane, 5 modules",
299 | "PICTURE_LI": null,
300 | "PICTURE_DE": null,
301 | "PICTURE__1": null
302 | },
303 | "geometry": {
304 | "type": "Point",
305 | "coordinates": [-75.760235255689508, 45.280622216516925]
306 | }
307 | },
308 | {
309 | "type": "Feature",
310 | "properties": {
311 | "PARK_ID": 653,
312 | "FACILITYID": 28008,
313 | "NAME": "Roving Skateboard Park Location",
314 | "NAME_FR": "Lieu de planchodrome itinérant",
315 | "ADDRESS": "5660 Osgoode Main Street",
316 | "ADDRESS_FR": "5660, rue Osgoode Main",
317 | "FACILITY_T": "other",
318 | "FACILITY_1": "autre",
319 | "ACCESSCTRL": "no/non",
320 | "ACCESSIBLE": "no/non",
321 | "OPEN": null,
322 | "NOTES": "Outdoor - Mobile",
323 | "MODIFIED_D": "2018/01/18",
324 | "CREATED_DA": null,
325 | "FACILITY": "Osgoode Community Centre - Roving Skateboard Park Location",
326 | "FACILITY_F": "Centre communautaire d'Osgoode - Lieu de planchodrome itinérant",
327 | "DESCRIPTIO": "Flat surface, 5 components",
328 | "DESCRIPT_1": "Surface plane, 5 modules",
329 | "PICTURE_LI": null,
330 | "PICTURE_DE": null,
331 | "PICTURE__1": null
332 | },
333 | "geometry": {
334 | "type": "Point",
335 | "coordinates": [-75.60118478829267, 45.147641950106689]
336 | }
337 | },
338 | {
339 | "type": "Feature",
340 | "properties": {
341 | "PARK_ID": 812,
342 | "FACILITYID": 35050,
343 | "NAME": "Charlie Bowins Skateboard Park",
344 | "NAME_FR": "Planchodrome Charlie-Bowins",
345 | "ADDRESS": "435 Bronson Avenue",
346 | "ADDRESS_FR": "435, avenue Bronson",
347 | "FACILITY_T": "bowl",
348 | "FACILITY_1": "bol",
349 | "ACCESSCTRL": "no/non",
350 | "ACCESSIBLE": "no/non",
351 | "OPEN": null,
352 | "NOTES": "Outdoor (Commemoratively named Charlie Bowins Skateboard Park on June 10, 2015)",
353 | "MODIFIED_D": "2018/01/18",
354 | "CREATED_DA": "2015/05/20",
355 | "FACILITY": "District: larger facility to service population of 100,000 plus",
356 | "FACILITY_F": "De district : grande installation assurant des services à 100 000 résidents ou plus.",
357 | "DESCRIPTIO": "Flat concrete surface, 10 plus components (large half pipe), City run learn to skateboard programs, City run skateboard camps in summer",
358 | "DESCRIPT_1": "Surface de béton plane, 10 modules ou plus (grande demi-lune), programmes et camps de planche à roulettes en été géré par la Ville",
359 | "PICTURE_LI": null,
360 | "PICTURE_DE": null,
361 | "PICTURE__1": null
362 | },
363 | "geometry": {
364 | "type": "Point",
365 | "coordinates": [-75.703622500360268, 45.408488357092367]
366 | }
367 | },
368 | {
369 | "type": "Feature",
370 | "properties": {
371 | "PARK_ID": 2457,
372 | "FACILITYID": 35637,
373 | "NAME": "Diamond Jubilee Skateboard Park",
374 | "NAME_FR": "Planchodrome Jubilé de Diamant",
375 | "ADDRESS": "2810 Findlay Creek Drive",
376 | "ADDRESS_FR": "2810, promenade Findlay Creek",
377 | "FACILITY_T": "flat",
378 | "FACILITY_1": "plat",
379 | "ACCESSCTRL": "no/non",
380 | "ACCESSIBLE": "yes/oui",
381 | "OPEN": null,
382 | "NOTES": "Outdoor",
383 | "MODIFIED_D": "2017/07/11",
384 | "CREATED_DA": "2016/06/22",
385 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
386 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
387 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
388 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
389 | "PICTURE_LI": null,
390 | "PICTURE_DE": null,
391 | "PICTURE__1": null
392 | },
393 | "geometry": {
394 | "type": "Point",
395 | "coordinates": [-75.609516309730921, 45.314086718258636]
396 | }
397 | },
398 | {
399 | "type": "Feature",
400 | "properties": {
401 | "PARK_ID": 430,
402 | "FACILITYID": 28005,
403 | "NAME": "Blackburn Skateboard Park",
404 | "NAME_FR": "Planchodrome Blackburn",
405 | "ADDRESS": "190 Glen Park Drive",
406 | "ADDRESS_FR": "190, promenade Glen Park",
407 | "FACILITY_T": "flat",
408 | "FACILITY_1": "plat",
409 | "ACCESSCTRL": "no/non",
410 | "ACCESSIBLE": "no/non",
411 | "OPEN": null,
412 | "NOTES": "Outdoor",
413 | "MODIFIED_D": "2018/01/18",
414 | "CREATED_DA": null,
415 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
416 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
417 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
418 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
419 | "PICTURE_LI": null,
420 | "PICTURE_DE": null,
421 | "PICTURE__1": null
422 | },
423 | "geometry": {
424 | "type": "Point",
425 | "coordinates": [-75.562796920677627, 45.429643413219814]
426 | }
427 | },
428 | {
429 | "type": "Feature",
430 | "properties": {
431 | "PARK_ID": 989,
432 | "FACILITYID": 28017,
433 | "NAME": "Goulbourn Skateboard Park",
434 | "NAME_FR": "Planchodrome Goulbourn",
435 | "ADDRESS": "1500 Shea Road",
436 | "ADDRESS_FR": "1500, chemin Shea",
437 | "FACILITY_T": "flat",
438 | "FACILITY_1": "plat",
439 | "ACCESSCTRL": "no/non",
440 | "ACCESSIBLE": "no/non",
441 | "OPEN": null,
442 | "NOTES": "Outdoor",
443 | "MODIFIED_D": "2018/01/18",
444 | "CREATED_DA": null,
445 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
446 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
447 | "DESCRIPTIO": "Flat asphalt surface, 6 components",
448 | "DESCRIPT_1": "Surface d'asphalte plane, 6 modules",
449 | "PICTURE_LI": null,
450 | "PICTURE_DE": null,
451 | "PICTURE__1": null
452 | },
453 | "geometry": {
454 | "type": "Point",
455 | "coordinates": [-75.907108695123526, 45.26222860981953]
456 | }
457 | },
458 | {
459 | "type": "Feature",
460 | "properties": {
461 | "PARK_ID": 1334,
462 | "FACILITYID": 28011,
463 | "NAME": "Constance Bay Skateboard Park",
464 | "NAME_FR": "Planchodrome Constance Bay",
465 | "ADDRESS": "262 Len Purcell Drive",
466 | "ADDRESS_FR": "262, promenade Len-Purcell",
467 | "FACILITY_T": "other",
468 | "FACILITY_1": "autre",
469 | "ACCESSCTRL": "no/non",
470 | "ACCESSIBLE": "no/non",
471 | "OPEN": null,
472 | "NOTES": "Outdoor",
473 | "MODIFIED_D": "2018/01/18",
474 | "CREATED_DA": null,
475 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
476 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
477 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
478 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
479 | "PICTURE_LI": null,
480 | "PICTURE_DE": null,
481 | "PICTURE__1": null
482 | },
483 | "geometry": {
484 | "type": "Point",
485 | "coordinates": [-76.09244957349965, 45.499050061534312]
486 | }
487 | },
488 | {
489 | "type": "Feature",
490 | "properties": {
491 | "PARK_ID": 923,
492 | "FACILITYID": 28013,
493 | "NAME": "Roving Skateboard Park Location",
494 | "NAME_FR": "Lieu de planchodrome itinérant",
495 | "ADDRESS": "334 River Road",
496 | "ADDRESS_FR": "334, chemin River",
497 | "FACILITY_T": "flat",
498 | "FACILITY_1": "plat",
499 | "ACCESSCTRL": "no/non",
500 | "ACCESSIBLE": "no/non",
501 | "OPEN": null,
502 | "NOTES": "Outdoor",
503 | "MODIFIED_D": "2018/01/18",
504 | "CREATED_DA": null,
505 | "FACILITY": "Eccolands Park - Roving Skateboard Park Location",
506 | "FACILITY_F": "Parc Eccolands - Lieu de planchodrome itinérant",
507 | "DESCRIPTIO": "Flat surface, 5 components",
508 | "DESCRIPT_1": "Surface plane, 5 modules",
509 | "PICTURE_LI": null,
510 | "PICTURE_DE": null,
511 | "PICTURE__1": null
512 | },
513 | "geometry": {
514 | "type": "Point",
515 | "coordinates": [-75.695392300925718, 45.315355581248873]
516 | }
517 | },
518 | {
519 | "type": "Feature",
520 | "properties": {
521 | "PARK_ID": 762,
522 | "FACILITYID": 28004,
523 | "NAME": "Trillium Park Skateboard Park",
524 | "NAME_FR": "Planchodrome de Park Trillium",
525 | "ADDRESS": "2030 Ogilvie Road",
526 | "ADDRESS_FR": "2030, chemin Ogilvie",
527 | "FACILITY_T": "flat",
528 | "FACILITY_1": "plat",
529 | "ACCESSCTRL": "no/non",
530 | "ACCESSIBLE": "no/non",
531 | "OPEN": null,
532 | "NOTES": "Outdoor",
533 | "MODIFIED_D": "2018/01/18",
534 | "CREATED_DA": null,
535 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
536 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
537 | "DESCRIPTIO": "Flat asphalt surface, 5 components",
538 | "DESCRIPT_1": "Surface d'asphalte plane, 5 modules",
539 | "PICTURE_LI": null,
540 | "PICTURE_DE": null,
541 | "PICTURE__1": null
542 | },
543 | "geometry": {
544 | "type": "Point",
545 | "coordinates": [-75.601158413850058, 45.436441777242031]
546 | }
547 | },
548 | {
549 | "type": "Feature",
550 | "properties": {
551 | "PARK_ID": 52,
552 | "FACILITYID": 35120,
553 | "NAME": "Lansdowne Skateboard Park",
554 | "NAME_FR": "Planchodrome Lansdowne",
555 | "ADDRESS": "450 Queen Elizabeth Driveway",
556 | "ADDRESS_FR": "450, promenade Queen Elizabeth",
557 | "FACILITY_T": "flat",
558 | "FACILITY_1": "plat",
559 | "ACCESSCTRL": "no/non",
560 | "ACCESSIBLE": "yes/oui",
561 | "OPEN": null,
562 | "NOTES": "Outdoor",
563 | "MODIFIED_D": "2017/07/11",
564 | "CREATED_DA": "2015/09/23",
565 | "FACILITY": "A series of skateboard ramps ideally suited to beginners.",
566 | "FACILITY_F": "Une série de rampes adaptées parfaitement aux débutants.",
567 | "DESCRIPTIO": "Flat asphalt surface",
568 | "DESCRIPT_1": "Survace d'asphalte plane",
569 | "PICTURE_LI": null,
570 | "PICTURE_DE": null,
571 | "PICTURE__1": null
572 | },
573 | "geometry": {
574 | "type": "Point",
575 | "coordinates": [-75.681193500335723, 45.400372622455215]
576 | }
577 | },
578 | {
579 | "type": "Feature",
580 | "properties": {
581 | "PARK_ID": 2488,
582 | "FACILITYID": 35815,
583 | "NAME": "Greely Village Skateboard Park",
584 | "NAME_FR": "Planchodrome Greely Village",
585 | "ADDRESS": "7292 Parkway Road",
586 | "ADDRESS_FR": "7292, chemin Parkway",
587 | "FACILITY_T": "other",
588 | "FACILITY_1": "autre",
589 | "ACCESSCTRL": "no/non",
590 | "ACCESSIBLE": "yes/oui",
591 | "OPEN": null,
592 | "NOTES": "Outdoor",
593 | "MODIFIED_D": "2018/01/04",
594 | "CREATED_DA": "2017/04/28",
595 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
596 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
597 | "DESCRIPTIO": "Flat concrete surface, 5 components",
598 | "DESCRIPT_1": "Surface de béton plane, 5 modules",
599 | "PICTURE_LI": null,
600 | "PICTURE_DE": null,
601 | "PICTURE__1": null
602 | },
603 | "geometry": {
604 | "type": "Point",
605 | "coordinates": [-75.553065849890629, 45.265433081236672]
606 | }
607 | },
608 | {
609 | "type": "Feature",
610 | "properties": {
611 | "PARK_ID": 330,
612 | "FACILITYID": 28003,
613 | "NAME": "Manotick Skateboard Park",
614 | "NAME_FR": "Planchodrome Manotick",
615 | "ADDRESS": "5572 Doctor Leach Drive",
616 | "ADDRESS_FR": "5572, promenade Doctor-Leach",
617 | "FACILITY_T": "flat",
618 | "FACILITY_1": "plat",
619 | "ACCESSCTRL": "yes/oui",
620 | "ACCESSIBLE": "no/non",
621 | "OPEN": null,
622 | "NOTES": "Outdoor - Joined with basketball",
623 | "MODIFIED_D": "2018/01/18",
624 | "CREATED_DA": null,
625 | "FACILITY": "Community: mid size facility to service population of 40,000 plus",
626 | "FACILITY_F": "Communautaire : installation de taille moyenne assurant des services à 40 000 résidents ou plus.",
627 | "DESCRIPTIO": "Flat asphalt surface, 8 components",
628 | "DESCRIPT_1": "Surface d'asphalte plane, 8 modules",
629 | "PICTURE_LI": null,
630 | "PICTURE_DE": null,
631 | "PICTURE__1": null
632 | },
633 | "geometry": {
634 | "type": "Point",
635 | "coordinates": [-75.686746214582783, 45.22266136322127]
636 | }
637 | },
638 | {
639 | "type": "Feature",
640 | "properties": {
641 | "PARK_ID": 693,
642 | "FACILITYID": 28010,
643 | "NAME": "Roving Skateboard Park Location",
644 | "NAME_FR": "Lieu de planchodrome itinérant",
645 | "ADDRESS": "1448 Meadow Drive",
646 | "ADDRESS_FR": "1448, promenade Meadow",
647 | "FACILITY_T": "other",
648 | "FACILITY_1": "autre",
649 | "ACCESSCTRL": "no/non",
650 | "ACCESSIBLE": "no/non",
651 | "OPEN": null,
652 | "NOTES": "Outdoor - Mobile",
653 | "MODIFIED_D": "2018/01/18",
654 | "CREATED_DA": null,
655 | "FACILITY": "Andy Shields Park - Roving Skateboard Park Location",
656 | "FACILITY_F": "Parc Andy-Shields - Lieu de planchodrome itinérant",
657 | "DESCRIPTIO": "Flat surface, 5 components",
658 | "DESCRIPT_1": "Surface plane, 5 modules",
659 | "PICTURE_LI": null,
660 | "PICTURE_DE": null,
661 | "PICTURE__1": null
662 | },
663 | "geometry": {
664 | "type": "Point",
665 | "coordinates": [-75.556978502821494, 45.261353985880973]
666 | }
667 | },
668 | {
669 | "type": "Feature",
670 | "properties": {
671 | "PARK_ID": 2544,
672 | "FACILITYID": 35667,
673 | "NAME": "Berrigan Skateboard Park",
674 | "NAME_FR": "Planchodrome Berrigan",
675 | "ADDRESS": "51 Berrigan Drive",
676 | "ADDRESS_FR": "51, promenade Berrigan",
677 | "FACILITY_T": "flat",
678 | "FACILITY_1": "plat",
679 | "ACCESSCTRL": "no/non",
680 | "ACCESSIBLE": "no/non",
681 | "OPEN": null,
682 | "NOTES": "Outdoor",
683 | "MODIFIED_D": "2018/02/27",
684 | "CREATED_DA": "2016/06/27",
685 | "FACILITY": "Community: mid size facility to service population of 40,000 plus",
686 | "FACILITY_F": "Communautaire : installation de taille moyenne assurant des services à 40 000 résidents ou plus.",
687 | "DESCRIPTIO": "Flat concrete surface, 10 plus components",
688 | "DESCRIPT_1": "Surface de béton plane, 10 modules ou plus",
689 | "PICTURE_LI": null,
690 | "PICTURE_DE": null,
691 | "PICTURE__1": null
692 | },
693 | "geometry": {
694 | "type": "Point",
695 | "coordinates": [-75.747348794023239, 45.275696004260205]
696 | }
697 | },
698 | {
699 | "type": "Feature",
700 | "properties": {
701 | "PARK_ID": 2599,
702 | "FACILITYID": 49251,
703 | "NAME": "Eugène Martineau Skateboard Park",
704 | "NAME_FR": "Planchodrome Eugène-Martineau",
705 | "ADDRESS": "710 Mikinak Road",
706 | "ADDRESS_FR": "710, chemin Mikinak",
707 | "FACILITY_T": "flat",
708 | "FACILITY_1": "plat",
709 | "ACCESSCTRL": "no/non",
710 | "ACCESSIBLE": "yes/oui",
711 | "OPEN": null,
712 | "NOTES": "Outdoor",
713 | "MODIFIED_D": "2018/11/29",
714 | "CREATED_DA": "2018/11/29",
715 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
716 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
717 | "DESCRIPTIO": "Flat surface, 5 components",
718 | "DESCRIPT_1": "Surface plane, 5 modules",
719 | "PICTURE_LI": null,
720 | "PICTURE_DE": null,
721 | "PICTURE__1": null
722 | },
723 | "geometry": {
724 | "type": "Point",
725 | "coordinates": [-75.632030968141081, 45.450696284941976]
726 | }
727 | },
728 | {
729 | "type": "Feature",
730 | "properties": {
731 | "PARK_ID": 2278,
732 | "FACILITYID": 49211,
733 | "NAME": "Vista Skateboard Park",
734 | "NAME_FR": "Planchodrome Vista",
735 | "ADDRESS": "720 Vistapark Drive",
736 | "ADDRESS_FR": "720, promenade Vistapark",
737 | "FACILITY_T": "flat",
738 | "FACILITY_1": "plat",
739 | "ACCESSCTRL": "no/non",
740 | "ACCESSIBLE": "yes/oui",
741 | "OPEN": null,
742 | "NOTES": "Outdoor",
743 | "MODIFIED_D": "2018/11/29",
744 | "CREATED_DA": "2018/06/22",
745 | "FACILITY": "Neighbourhood : smaller size facility to service population of 10,000 or less",
746 | "FACILITY_F": "De voisinage : petite installation assurant des services à 10 000 résidents ou moins.",
747 | "DESCRIPTIO": "Flat surface, 5 components",
748 | "DESCRIPT_1": "Surface plane, 5 modules",
749 | "PICTURE_LI": null,
750 | "PICTURE_DE": null,
751 | "PICTURE__1": null
752 | },
753 | "geometry": {
754 | "type": "Point",
755 | "coordinates": [-75.471003922143311, 45.450391044010431]
756 | }
757 | },
758 | {
759 | "type": "Feature",
760 | "properties": {
761 | "PARK_ID": 2113,
762 | "FACILITYID": 35299,
763 | "NAME": "Innovation Skateboard Park",
764 | "NAME_FR": "Planchomdrome Innovation",
765 | "ADDRESS": "4101 Innovation Drive",
766 | "ADDRESS_FR": "4101, promenade Innovation",
767 | "FACILITY_T": "bowl",
768 | "FACILITY_1": "bol",
769 | "ACCESSCTRL": "no/non",
770 | "ACCESSIBLE": "yes/oui",
771 | "OPEN": null,
772 | "NOTES": "Outdoor",
773 | "MODIFIED_D": "2017/07/11",
774 | "CREATED_DA": "2016/02/08",
775 | "FACILITY": "District: larger facility to service population of 100,000 plus",
776 | "FACILITY_F": "De district : grande installation assurant des services à 100 000 résidents ou plus.",
777 | "DESCRIPTIO": "Large concrete bowl, 10 plus components, many street and vertical components",
778 | "DESCRIPT_1": "Grand bol de béton, 10 modules ou plus, modules de rue et modules verticaux",
779 | "PICTURE_LI": null,
780 | "PICTURE_DE": null,
781 | "PICTURE__1": null
782 | },
783 | "geometry": {
784 | "type": "Point",
785 | "coordinates": [-75.931122879767898, 45.34125624499935]
786 | }
787 | }
788 | ]
789 | }
790 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
16 | .marker-btn {
17 | background: none;
18 | border: none;
19 | cursor: pointer;
20 | }
21 |
22 | .marker-btn img {
23 | width: 20px;
24 | height: 20px;
25 | }
26 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------