This series of workshops introduces the fundamentals of web mapping through a technical, tutorial-based lens that is designed to complement your other coursework and project work at DUSP. The workshop series will use a variety of modern tools and techniques, starting with introducing web programming basics and website fundamentals, then introduce a web mapping library called Leaflet that utilizes HTML, CSS, and Javascript to display spatial data and create rich, interactive map experiences.
The workshops are organized into nine modular sessions, but are designed best to be taken in a sequence. All sessions can be completed on your laptop machine or on a cron workstation, and software is generally free and easy to install, with the exception of some license-based Adobe Creative Suite software.
This workshop series is designed for beginners and contains no required prerequisites outside of a desire to improve your coding skills and learn how to utilize web development and programming to make web-based maps. A basic understanding of modern website design and structure using HTML, CSS, and Javascript is helpful, but not necessary. We will cover alot of the basics in the first couple of sessions.
Examples for all of the sessions can be found in this repository.
Each workshop is modular and designed to stand independently as a resource online. See below for the session topics, tutorials, and materials.
1 - Code Your First Website: Intro to HTML/CSS
An introduction to webpages and websites, starting with hosting, file structures, text editing, and constructing a basic website through the introduction of web markup and styling languages, HTML and CSS.
2 - Using Bootstrap: Website Frameworks and Templates
When coding, many frameworks and templates exist that will help you accomplish common tasks, such as layout, basic styling, and interactivity. This session will expand upon the session from the first week and build a website utilizing a Bootstrap framework and customizing HTML and CSS. It will also introduce some new web development tools, including Adobe Dreamweaver.
3 - Web Map Fundamentals: Creating a Basic Leaflet Web Map
This session introduces the fundamentals of web maps, including tiles, interaction, and structure, and will give a brief survey of the current web mapping landscape. You will create a simple Leaflet webmap using HTML, CSS, and JavaScript, highlighting the foundational aspects and concepts of what the code is doing at each step to create a map and add data.
4 - JavaScript: A Mapper's Introduction
An introduction to JavaScript, a popular and dynamic web programming language that many modern websites and mapping libraries are built upon. This session will introduce the fundamentals, including variables, objects, functions, and events, and show how to add interactivity to the map we created in the Make a Basic Web Map session.
5 - Customization: Map Symbolization, Custom Icons, and User Interface
Building upon the previous lesson, this session will utilize a combination of HTML, CSS, and Javascript to focus on adding additional datasets to our map, stylizing point, line and polygon symbols, customizing popups, creating custom markers, and choropleth classifications.
6 - Introduction to PostGIS and SQL: Using CartoDB and Leaflet
The focus of this session is data. In this session we will outline additional ways to connect to datasets, utilize Leaflet as a front end to CartoDB using CartoDB.js, and introduce the usage of queries to add data from Postgres and PostGIS databases to your map application.
7 - Advanced Mapping - Data Collection with Leaflet and CartoDB
This session will focus on advanced mapping options, Leaflet plugins, and next steps in continuing to develop your rich web based mapping application. We will look at connecting to your own Postgres database, some Leaflet plugins, including drawing data on maps and clustering techniques, and look at ways you can incorporate basic geoprocessing techniques into your web map.