From 95af8136417b1fb7d8c86c97757aaa3a81336b3f Mon Sep 17 00:00:00 2001 From: demet Date: Tue, 27 Aug 2024 11:39:25 -0700 Subject: [PATCH] added practical exercise --- content/next-steps.md | 47 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/content/next-steps.md b/content/next-steps.md index 0ebab2c..c4593bc 100644 --- a/content/next-steps.md +++ b/content/next-steps.md @@ -3,6 +3,53 @@ layout: default title: Next Steps nav_order: 4 --- +# Practice +Practice what you've learned in this workshop by choosing a dataset from Vancouver’s [open data portal](https://opendata.vancouver.ca/explore/?disjunctive.features&disjunctive.theme&disjunctive.keyword&disjunctive.data-owner&disjunctive.data-team&sort=modified) to add to your webmap. You will need to download the dataset in GeoJSON format, move it to your `intro-leaflet-data` folder, wrap it as a javascript variable, and add as both a a data source and a data layer to your html document. + +Note: You may need to change your map centering and zoom level so Vancouver comes into the frame. + +Take a moment to practice on your own, or refer to the hints below. + +1. For example, download [Vancouver Parks](https://opendata.vancouver.ca/explore/dataset/parks-polygon-representation/export/) (polygon representation) from the Open Data Portal. + + +2. Move the download file, `parks-polygon-representation.geojson` to your workshop folder, `intro-leaflet-data`. It's important your data be in the same folder of your webmap's html document. + + +3. Open the dataset in VS Code. It will either appear in your Contents after you add it to your working folder, or you can right-click it from your computer and open it with VS Code. + + +4. It will look like a wall of code. Right-click anywhere on the page and format it. + + + +5. Now wrap it as the variable `vanparks` + + + +6. You'll notice the name of the document becomes red, signifying there's a syntax error somehwere in the document. There isn't. Rather, you have formatted the document as javascript, but the file extension is still GeoJSON. Save your work (hit Ctrl + S) and return to your `intro-leaflet-data` on your computer. Rename the file Rename the file and file extension: `vanparks.js`. + + +7. Return to VS Code and open the new dataset, `vanparks.js`. Everything should be in order now with no warnings. + + +8. Now, return to your `boilerplate.html` document in VS Code. In the `` tag, add a line beneath your current data source that directs your map to your new data source: +``` + +``` + +9. Then, in the `