GEOG 585
Open Web Mapping

Overview

Print

Note: Currently, this lesson teaches the Leaflet API. If you are looking for the earlier materials on OpenLayers, see the Lesson 6 archive page.

So far, you've been able to create several different types of layers, such as a dynamically-served web map service (WMS) and a static tiled web map. You've previewed these layers in various ways, but have probably come to the conclusion that they're not very useful or easy to share using these preview mechanisms. You will learn how to create more types of layers in future lessons, but, for now, we are going to pause for a week and learn how you can program a web application that combines your layers, creating an easily shareable "front end" for your web maps. You will learn what the Leaflet API is and how to use it for this purpose. It's impossible to learn Leaflet in a single week (or even in a single course), so, in this lesson, you'll just get a taste of the basics. Future lessons continue to use the Leaflet and expand on the knowledge you gain this week.

If you are new to web programming, it is recommended that you take some time to review the W3Schools HTML and JavaScript tutorials that you studied during orientation week. You don't need to know everything, but you do need to be familiar enough with the code and markup patterns that you can interpret most of what you are seeing when you view the examples later in the lesson. The prerequisite for this course is prior familiarity with at least one programming language, and it is expected in this lesson that you apply this familiarity to understanding the JavaScript syntax for loops, functions, decision structures, and so forth. Exerting a little extra time and effort, you should be able to see how JavaScript relates to the language(s) that you already know.

Objectives

  • Identify commonly-used web mapping APIs (both proprietary and FOSS) and recognize programming patterns that are common to each.
  • Choose developer examples that relate to your web mapping task and adjust the code to meet the needs of your own application.
  • Use Leaflet to create a mashup from a tiled basemap and a WMS thematic layer.
  • Create informational popups for your web map features using Leaflet.

Checklist

  • Read the Lesson 6 materials on this page.
  • Complete the walkthrough.
  • Complete the Lesson 6 assignment (note that it has two distinct deliverables).
  • Complete the "second quiz" on Canvas. This covers material from Lessons 4 - 6.