Display and analyze GIS data on the web with Leaflet
4.6 (423 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,938 students enrolled

Display and analyze GIS data on the web with Leaflet

Client side mapping applications with the open source javascript libraries Leaflet.js and Turf.js
4.6 (423 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,938 students enrolled
Created by Michael Miller
Last updated 11/2019
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 13.5 hours on-demand video
  • 66 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn to find and zoom to your position on a map
  • Learn to use leaflet controls for user interface, geocoding, editing, and loading data
  • Learn what background maps are available and how to use them
  • Learn to create vector data and style it in your map
  • Learn how to export your GIS data to GeoJSON format and load it into the map
  • Learn how to filter a subset of your data
  • Learn how to search for specific data elements and view their attributes
  • Learn how to analyze spatial relationships
  • Much, much, more!
Course content
Expand all 71 lectures 13:43:17
+ Introduction
11 lectures 01:32:06
Optional - About Me

Learn about the basics of client server architecture and how it differs from programming on a single user system.

Preview 06:46

How to download and install the software required for this course.

Preview 14:14

Understand what a URL is and how to work with the local host web server

Preview 03:45

Set up the directory structure necessary for your first web map.

Your first web map - Setup

Writing the HTML, CSS, and JavaScript necessary to create a basic web map

Your first web map - Code

Learn how the Leaflet on-line documentation is organized

Leaflet documentation - Part 1

Learn how to navigate the Leaflet on-line documentation

Leaflet documentation - Part 2

Learn how to find, understand, and load Leaflet plug-ins into your web mapping application

Leaflet Plug-ins

Learn about the editors that are available for different operating systems and their benefits.

Optional - Editors

Test yourself on the concepts learned in this section

Section 1 Quiz
3 questions
+ The Leaflet Map Object
11 lectures 02:19:07

Learn the basics of the Leaflet map object

The Leaflet Map Object - Part 1

Programming the Leaflet map object

The Leaflet Map Object - Part 2

Learn how to use Leaflets location method to locate your device on the map

Preview 13:34

Access the Leaflet map objects events and methods in response to DOM events and modify the DOM in response to map events

Connecting the map object to the DOM

Learn about using popups and tooltips in Leaflet

Leaflet popups

Learn how to use and modify the native Leaflet map controls

Native Leaflet controls

Replace the native zoom control with a sliding zoom control and add panning buttons

Plugin Leaflet controls - Part 1

Replace the native Leaflet zoom control with a sliding zoom control and add panning buttons

Plugin Leaflet controls - Part 2

Add a mouse coordinate and measure control

Plugin Leaflet controls - Part 3

Learn to install and use the Leaflet easy button and sidebar controls

Plugin Leaflet controls - Part 4

Learn about some other Leaflet plugin map controls including geocoding and routing.

Preview 14:28
+ Raster layers in Leaflet
4 lectures 47:13

Learn the basics of layers in Leaflet

Introduction to layers

Learn about the different basemaps that are available for Leaflet maps and how to find more.

Preview 09:49

Learn how to use the Leaflet layer control

The layer control
Raster overlays
+ Vector layers in Leaflet
10 lectures 01:49:42

Learn the basics of Leaflet vector overlay layers

Preview 04:14

Learn the basics of using Leaflet marker objects for displaying pont data

The marker object

Learn about the path abstract object and the Leaflet polyline object

The path and polyline objects

Learn how to create and work with polygons in leaflet

The polygon object

Work with layer groups and feature groups in Leaflet

Layer groups

Learn how to install the Leaflet.draw plugin and use it to create geometries

Leaflet Draw Plugin

A review of the GeoJSON data format for spatial objects

Preview 13:49

Learn how the Leaflet GeoJSON object is used to create spatial features

Working with geoJSON in Leaflet

Load a GeoJSON data file from disk using the Leaflet.ajax plugin

The Leaflet.AJAX plugin

Learn about other sources of vector data that can be added to your Leaflet map.

Other sources of vector data
+ Styling vector data
8 lectures 01:36:01

Learn the different methods for styling markers that re native in Leaflet

Preview 03:52

Use circleMarkers and circles to style Leaflet marker objects

Native Leaflet marker styles - Part 2

Learn about some of the plugins available to style Leaflet marker objects

Plugin Leaflet marker styles

Learn how to create your own custom Leaflet marker icons from an image.

Creating your own custom markers

Learn how to use the Leaflet.markercluster plugin to de-clutter your marker data

Preview 09:12

Learn all about the native Leaflet methods for styling polylines and polygons

Native Leaflet options for styling lines and polygons

Learn about some Leaflet plugins for styling lines and polygons and how to find more.

Plugin options for styling lines and polygons

Learn how to define colors in HTML and CSS

Preview 13:56
+ Searching, filtering, and analyzing data in Leaflet
11 lectures 02:24:34

Introduction to searching for, filtering, editing, and analyzing spatial data with Leaflet methods

Introduction and organizing previous code

Use your HTML and CSS skills to create a search box and button

Building a search box in Leaflet - HTML and CSS

Write the JavaScript functions and event handlers to respond to events and search for data by attributes

Building a search box in Leaflet - JavaScript

Understand how the jQuery UI autocomplete widget works and use it to provide a list of valid entries

Building a search box in Leaflet - Autocomplete part 1

Learn how to use the autocomplete functionality to validate user form entries

Building a search box in Leaflet - Autocomplete part 2

Learn how to generalize a function to reduce code and minimize errors.

Preview 06:43

Use a radio button selection to filter data

Filtering data - radio boxes

Learn how to filter data using a selection of check boxes

Filtering data - check boxes

Learn how to edit geometries using the Leaflet.draw plugin

Editing geometry in Leaflet
Finding Nearest Feature - Part 1
Finding nearest feature - Part 2
+ Analyzing data with Turf.js in Leaflet
8 lectures 01:25:23

Introduction to Turf.js and simple buffering

Preview 12:46
Buffering based on feature attribute
Spatial analysis - Point in Polygon
Spatial analysis - Filtering a feature class
Spatial Analysis - Intersecting polygons
Spatial Analysis - Summarizing polygon feature collections
Spatial Analysis - Intersecting lines with polygons
+ Bonus Material
8 lectures 01:49:11
Designing for mobile applications

Includes some setup files and a project challenge to build an application to calculate biological diversity

Bonus Project - Diversity Calculator

How to move your web application from localhost to a web server. Includes demonstration.

Taking your application live

Introduction to different strategies for creating legends in Leaflet and an introduction to SVG graphics

Legends in Leaflet (Pt1)

Adding a legend to our example project, making them dynamic with JavaScript and an introduction the the legend control plug-in

Legends in Leaflet (Pt 2)

Make your legends respond to layer selection events to dynamically show only the items that are displayed in the map.

Legends in Leaflet (Pt 3)

The QGIS2Web plugin for QGIS allows you to author maps in QGIS and automatically generate a leaflet web map. Its a great way to quickly get a basic map started that you can then modify to your heart's content.

QGIS2Web - Get a jump start on your leaflet map creation.
Bonus Lecture: How to get the most from my series of Udemy courses.
  • This course has a prerequisite called Introduction to Web Programming for GIS Applications. I assume that students will be familiar with the subject matter of that course up to at least Lesson 61.
  • If you have some familiarity withHTML, CSS, jQuery, Bootstrap, JavaScript, and GIS you should be able to take this course without the prerequisite but I am basing this course on that level of knowledge.

"This is a great and advanced web mapping application course to solve real world problem. It's very to follow up and the instructor is very knowledgeable. I would recommend it to anyone who is interested in the field webmapping. Thanks Michael."

"Very nice course on using leaflet to build web maps. Many aspects of leaflet and leaflet plugins are covered along with some more advanced analysis using turf. The code examples are helpful in getting started with leaflet maps and adding widgets for interacting with the map."

This course will provide you with the knowledge you need to 

  • create a Leaflet web map
  • add map controls 
  • choose from a variety of background maps
  • add your own GIS to it
  • style your data
  • find specific data
  • analyze spatial relationships 

At the end of the course you will be able to create web interfaces to view, search, and analyze your GIS data and make them accessible to anyone with a web interface for free!

This course requires only a text editor and an open source web server to get started designing web GIS applications.

Who this course is for:
  • This course is oriented towards GIS professionals who are interested in expanding their skill sets to display and analyze their data on the web. I use open source software to make the material available to everyone free of charge but many of the concepts will be useful for commercial JavaScript API's as well. This course will also be useful for Web Developers who want to learn to add maps to their projects with leaflet.