Open Data in Code Editor

1 First open the Visual Studio Code (VS Code) application. To open webmapping-workshop with VS Code, select Open… from the Welcome Page and navigate to your data folder is stored on your computer. Select it (but don’t click into it) and hit Open. You can also click the Open Folder button in the Explorer pane, or press command + O. If you are having any trouble, ensure your data folder is unzipped.

2 Once opened, you should see multiple files in the Explorer panel of your code editor. community-gardens.js, parks-polygons.js and vpl.csv are all data files, while outlook.jpg is an image we will add to our map later. boilerplate.html is the map boilerplate we will tinker with and customize.

3 Now, double click boilerplate.html to open it. If you installed the Live Server extension to Visual Studio Code, in the blue ribbon at the bottom of your code editor there should be an option to “Go Live.” Click “Go Live” to launch a local server and watch your map automatically update in a web browser. Note: Depending on your computer’s operating system, you may need to hit Ctrl + S to save your document edits before Live Server will update to reflect your changes. Live Server alleviates the need to constantly refresh your browser each time you make a change.

Because we will be working back and forth between the browser page the code editor, it’s helpful to arrange your computer screen(s) in a way where you can either see both windows at once or are able to toggle between the two. This way, every time you modify the html code you can see the changes in your browser. You’ll also want to have workshop website accessible.