The essential processes and tools that make up your coding workspace are what we’ll refer to as your “Local Development Environment” (LDE). This is more than just an arrangment of software on your computer; it’s your personalized sandbox for experimentation, tinkering, and creating applications like web maps. An LDE for other types of programming or software engineering will differ from what you might prefer to use today.
By this time in the workshop you’ve already installed VS Code and set up the Live Server extension, which are two essential components of the local development environment for building web maps. The other one we’ll need is a modern web browser, such as Google Chrome or Mozilla Firefox. Your development environment should be set up in a way that allows you to see both applications at the same time, or be able to switch between the two easily.
Map Boilerplate
To Do
- Please go ahead and download the boilerplate code using the button below.
- Extract the contents of the folder. Note where the folder is located on your computer.
- In VS Code, open this folder by selecting File < Open Folder.
- In the VS Code file explorer, select the file map.html so that it’s showing on your screen.
- Replace the dummy text with your new Mapbox access token, and save the file.
- In VS Code, select Go Live in the bottom right corner of your VS Code window to launch this file in a local server.
Once you’ve done this, you should see a web map in your browser and its source code in VS Code.