Last week we learned how to set up web pages and embed some pre-existing maps. This week we start building our own maps. And we'll start with a series of exercises for creating basemaps. Your maps will be constructed inside of a small, 4 page, website that we have already created with HTML and CSS files in this repo. The website works... but it has no maps! This will give you practice finding your way around HTML code as well as creating the Javascript necessary for the maps. Your web skillz are going to skyrocket after this studio!
- The images in many of these tutorials are slides from our good friends at Mapbox, who we're working with to develop these tutorials. The slides have instructions on them and show code that you will use to create your maps. In most cases, we've also created a code-block below the slide to call out the code you need to focus on.
- Some of the slides have discussion or question prompts that we may have used in class, but since we're online, we'll use them as discusssion prompts during our class meetings or in our Slack group.
- Most of you who took my programming class have already seen comments in Python,
# that look like this. As we start to create web pages using HTML and web maps that often use JavaScript, you should be familiar with comments in those language as well.<! -- Comments in HTML that look like this -->and comments in Javascript// use two slashes like this.In excercise 4, specifically, you will only have the comments within an HTML page as guidance, so keep a sharp eye out! - You need an active Mapbox account!
This repo contains starter code for a small, 4 page website that contains a series of different base maps, each on it's own page. You can preview the starter site by opening the index.html file by using a local host or you can trying opening it in a web browser. The first three pages you will modifying using the following files and instructions.
- Start with
index.html. The instructions for completing this map are under exercise1 - Next up is
Mapbox-gl-js-cwm.html. The instructions for completing this map are under exercise2 - Then there is
Mapbox-gl-js-ct.html. Follow instructions in theMapbox-gl-js-ct.htmlfile to add a marker and popup to a Mapbox GL JS map. There is no tutorial for this exercise: follow the comments in the file! - Finally, you'll create a brand new Mapbox style and insert it into
Mapbox-gl-js-bm.html. The instructions for completing this map are under exercise4 - Once you've completed all the exercises, you'll publish your website using Github pages. The specific type of site you'll use is called a "project page" and the set up will be similar to what you did with your first web site. While your website doesn't necessarily need to use an existing template or use Jekyll: I would like you to see if you can alter the background color, or the fonts in a way that compliements your map. Remember to always start simply by making sure that the small website contained in your repo can be viewed as a web page. Once that's done, you can start tinkering with more design options.
At the end of the week you will submit a link to your repo via Moodle. Happy coding!
After successfully following the instructions above you can take things further...