React App

├── .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 | --------------------------------------------------------------------------------