4.79 out of 5
4.79
475 reviews on Udemy

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
Instructor:
Michael Miller
2,207 students enrolled
English [Auto]
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!

“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.

Introduction

1
Introduction
2
Optional - About Me
3
Client-Server Architecture

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

4
Required software for this course

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

5
Anatomy of a URL

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

6
Your first web map - Setup

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

7
Your first web map - Code

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

8
Leaflet documentation - Part 1

Learn how the Leaflet on-line documentation is organized

9
Leaflet documentation - Part 2

Learn how to navigate the Leaflet on-line documentation

10
Leaflet Plug-ins

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

11
Optional - Editors

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

12
Section 1 Quiz

Test yourself on the concepts learned in this section

The Leaflet Map Object

1
The Leaflet Map Object - Part 1

Learn the basics of the Leaflet map object

2
The Leaflet Map Object - Part 2

Programming the Leaflet map object

3
The Leaflet location method

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

4
Connecting the map object to the DOM

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

5
Leaflet popups

Learn about using popups and tooltips in Leaflet

6
Native Leaflet controls

Learn how to use and modify the native Leaflet map controls

7
Plugin Leaflet controls - Part 1

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

8
Plugin Leaflet controls - Part 2

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

9
Plugin Leaflet controls - Part 3

Add a mouse coordinate and measure control

10
Plugin Leaflet controls - Part 4

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

11
Plugin Leaflet controls - Part 5

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

Raster layers in Leaflet

1
Introduction to layers

Learn the basics of layers in Leaflet

2
Leaflet basemaps

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

3
The layer control

Learn how to use the Leaflet layer control

4
Raster overlays

Vector layers in Leaflet

1
Introduction to vector layers

Learn the basics of Leaflet vector overlay layers

2
The marker object

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

3
The path and polyline objects

Learn about the path abstract object and the Leaflet polyline object

4
The polygon object

Learn how to create and work with polygons in leaflet

5
Layer groups

Work with layer groups and feature groups in Leaflet

6
Leaflet Draw Plugin

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

7
Optional - GeoJSON Review

A review of the GeoJSON data format for spatial objects

8
Working with geoJSON in Leaflet

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

9
The Leaflet.AJAX plugin

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

10
Other sources of vector data

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

Styling vector data

1
Native Leaflet marker styles - Part 1

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

2
Native Leaflet marker styles - Part 2

Use circleMarkers and circles to style Leaflet marker objects

3
Plugin Leaflet marker styles

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

4
Creating your own custom markers

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

5
De-cluttering your markers with the markercluster plugin

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

6
Native Leaflet options for styling lines and polygons

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

7
Plugin options for styling lines and polygons

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

8
Optional - Colors on the web

Learn how to define colors in HTML and CSS

Searching, filtering, and analyzing data in Leaflet

1
Introduction and organizing previous code

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

2
Building a search box in Leaflet - HTML and CSS

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

3
Building a search box in Leaflet - JavaScript

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

4
Building a search box in Leaflet - Autocomplete part 1

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

5
Building a search box in Leaflet - Autocomplete part 2

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

6
Generalizing functions

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

7
Filtering data - radio boxes

Use a radio button selection to filter data

8
Filtering data - check boxes

Learn how to filter data using a selection of check boxes

9
Editing geometry in Leaflet

Learn how to edit geometries using the Leaflet.draw plugin

10
Finding Nearest Feature - Part 1
11
Finding nearest feature - Part 2

Analyzing data with Turf.js in Leaflet

1
Introduction to Turf.js - Buffers

Introduction to Turf.js and simple buffering

2
Buffering based on feature attribute
3
Spatial analysis - Point in Polygon
4
Spatial analysis - Filtering a feature class
5
Spatial Analysis - Intersecting polygons
6
Spatial Analysis - Summarizing polygon feature collections
7
Spatial Analysis - Intersecting lines with polygons
8
Summary

Bonus Material

1
Designing for mobile applications
2
Bonus Project - Diversity Calculator

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

3
Taking your application live

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

4
Legends in Leaflet (Pt1)

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

5
Legends in Leaflet (Pt 2)

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

6
Legends in Leaflet (Pt 3)

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

7
QGIS2Web - Get a jump start on your leaflet map creation.

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.

8
Bonus Lecture: How to get the most from my series of Udemy courses.
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
475 Ratings

Detailed Rating

Stars 5
285
Stars 4
141
Stars 3
38
Stars 2
5
Stars 1
6
5c1fdefb63b1049f29baef75bd3d333a
30-Day Money-Back Guarantee

Includes

14 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion