Over the last three weeks, we’ve learned about setting up web pages, embedding maps, and building our own maps with increasing functionality. In all of the previous studios, we’ve had starter code for you to work with. This week you’ll be bringing all of your new technical skills together by creating your own HTML files and a series of maps they will contain. This week we will also be focusing more on data sources for your maps. Up to this point, we’ve been creating basic geometry by including it within the code of our page or by altering map tiles. This week, our code will be referencing data that we host from a variety of sources.
What you will need: Google account (for hosing data in a sheet), Github for hosting website and data, Mapbox account.
As usual, you will submit a link to your Github repo and the working website that it hosts. There are no rules about the website other than it must contain the three outputs listed below. If you want to use the basic website we’ve used in previous studios, go ahead! If you want to use the original Jekylll blog page we created, have a blast! If you want to get more creative and do something else, no problem! The map outputs for this week are:
-
Map that uses hosted GeoJSON files for data. It’s time to map some rats! Follow this fantastic Leaflet tutorial for a Boston Rat Map (the repo for it is here). It's quite easy to follow and covers downloading data, basic geographic features, styling, and interactivity. However, it uses an outdated version of some Leaflets libraries, which won’t render on Github pages. So, you’ll need to see this Github repo to learn about which lines of code to replace. I suggest you read through this repo first, to get an idea of where you’ll need to replace things, and keep it open as you work through the Rat Map tutorial. Be on the lookout for a "secret challenge" this week. Here's a hint: "rainbow" color ramps in maps are extremely problematic... be on the lookout for them and possible alternatives. While the tutorial has you build a variety of maps as steps in the process, you need only submit the final product and not all the intermediate web maps.
-
Map that uses a Google sheet for data. Throughout this course, we’ve talked about how many international development or humanitarian organizations use spreadsheets as the fundamental format for data within their organizations. So it only makes sense to learn how to create a web map that uses a spreadsheet as its data source. Follow this great Mapbox tutorial to build you map! There are instructions in this tutorial for hosting the map on Github: be sure you add your map to the website in this repo and do not create another, separate one! With this output, some students run into problems running the website locally and may see an error message like the one below. Ideally, use your code editor to preview this work versus trying to open it locally. We have tested using Atom's html-preview package and this displays everything correctly. In any event, once the code is uploaded to your repo and Github pages is turned on, everything displays fine and you will not receive the error! For more information on this type of error see the CORS error message documentation at Mapbox.
-
Choose your own adventure! For your third map, you will create or gather your own data (using either GeoJSON or a Gsheet) and map it. Use either output #1 or #2 as a starting point. Remember that the limit for a Github pages website is 1GB, so this probably isn’t the best place to host a massive dataset. Focus on using this output as an initial prototype for a project you'd like to develop or as a way to explore or experiment with some mapping techniques that you want to improve.