Welcome to the Studio Week 3!
So far, we've learned how to set up web pages and embed some pre-existing maps, and then create new base maps with basic markers. This week we'll be working on creating choropleth maps and adding more interactivity.
A brief reminder: some of these tasks require you to look for comment code in the files to guide you. As a refresher, <! -- Comments in HTML that look like this --> and comments in Javascript // use two slashes like this.
Expected Outputs for this week / what to submit:
As with last week, you will submit a link to your Github repo and the working website that it hosts. While we have included starter .html files for you, they are quite basic: you're going to need to use the tutorials below, in conjunction with your previous files and everything you've learned up to this point to build your website, debug it, etc.
index.html- Start with this Mapbox tutorial for creating a style for a choropleth map. This tutorial will include downloading sample data, then uploading them to your Mapbox account. Once you've completed that, move on to this tutorial that will show you how to add interactivity to your map. In your final map, make the following edits to the CSS style in your header: Update#mapand#featuresfromtop: 0;totop: 200px;mapbox-interaction.html- Next, we'll explore adding some functionality in Mapbox. Open the file and look for the comment code that prompts you to add certain types of interactivity and gives you a place to start looking for documentation. This is a very common challenge when creating a webmap: you want to do something, but you're not sure how! So you have to look around at documentation and other people's code to find the answer. As you go through this exercise remember how much emphasis we put on good documentation in my classes...mapbox-turfjs.html- Finally, we're going to introduce some analytical capability to our maps. Follow this Mapbox tutorial for creating a map that can do some basic analysis on point data. Note that the Getting started and Add Structure sections of the tutorial have already been completed in themapbox-turfjs.htmlstarter file.
At the end of the week you will submit a link to your repo via Moodle. Happy coding!
For those who want to explore the basics more:
- If you want to explore Leaflet more, you can follows this Leaflet tutorial for adding basic geographic features (point, polygon, polyline) to a map. You will need to set up a new
.htmlfile from scratch. - Continuing with Leaflet... here's a wide range of "Code snippets" (small bits of code that can be used in a variety of situations) relating to leaflet / GeoJSON. And in case you're wondering about this particular use of Github... the user has not created a separate repo for each code snippet, nor compiled the snippets as separate files in a repository, instead they are using a "Gist", which is basically a stand-alone page to store code. It's much lighter weight then creating a whole respository. Gists can hold any type of code and can, in fact, be another way to create a single web page (just create a gist with an
index.htmlfile). This is a good blog post about all the wonderful thing you can do with Gists! - Alternatively, the Leaflet website hosts a variety of tutorials. Most of these tutorials assume that you can set up a basic html file, including body, header, and script tags.
For those who need a bigger challenge:
After successfully following the instructions above you can take things further... these tutorials are more complex but allow for some really cool interactivity. They both require you to construct complete web pages.
- Mapbox has a good tutorial for how to build a Store Locator that includes some really cool interactivity.
- Here's a great Mapbox tutorial for how to show changes over time: this tutorial includes a 4MB GeoJSON file that contains 15,273 geocoded motor vehicle collision incidents in NYC. Github pages limits are 1GB, you should be able to host these data and the code in a repo!