Display and analyze GIS data on the web with Leaflet
4.7 (21 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
119 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Display and analyze GIS data on the web with Leaflet to your Wishlist.

Add to Wishlist

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
Best Seller
4.7 (21 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
119 students enrolled
Created by Michael Miller
Last updated 9/2017
English
Current price: $50 Original price: $100 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 13.5 hours on-demand video
  • 66 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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!
View Curriculum
Requirements
  • 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.
Description

"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 is the target audience?
  • 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.
Curriculum For This Course
70 Lectures
13:27:01
+
Introduction
11 Lectures 01:32:06

Optional - About Me
05:04

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
09:36

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

Your first web map - Code
13:49

Learn how the Leaflet on-line documentation is organized

Leaflet documentation - Part 1
06:40

Learn how to navigate the Leaflet on-line documentation

Leaflet documentation - Part 2
06:07

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

Leaflet Plug-ins
07:20

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

Optional - Editors
15:21

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
08:36

Programming the Leaflet map object

The Leaflet Map Object - Part 2
12:09

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
16:22

Learn about using popups and tooltips in Leaflet

Leaflet popups
15:28

Learn how to use and modify the native Leaflet map controls

Native Leaflet controls
13:49

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

Plugin Leaflet controls - Part 1
03:08

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

Plugin Leaflet controls - Part 2
13:10

Add a mouse coordinate and measure control

Plugin Leaflet controls - Part 3
11:01

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

Plugin Leaflet controls - Part 4
17:22

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
04:56

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
18:40

Raster overlays
13:48
+
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
11:43

Learn about the path abstract object and the Leaflet polyline object

The path and polyline objects
09:58

Learn how to create and work with polygons in leaflet

The polygon object
12:24

Work with layer groups and feature groups in Leaflet

Layer groups
12:25

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

Leaflet Draw Plugin
18:21

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
05:54

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

The Leaflet.AJAX plugin
17:30

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

Other sources of vector data
03:24
+
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
19:25

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

Plugin Leaflet marker styles
19:45

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

Creating your own custom markers
06:45

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
19:00

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

Plugin options for styling lines and polygons
04:06

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
09:14

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

Building a search box in Leaflet - HTML and CSS
11:58

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

Building a search box in Leaflet - JavaScript
05:58

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
16:28

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

Building a search box in Leaflet - Autocomplete part 2
19:24

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
13:52

Learn how to filter data using a selection of check boxes

Filtering data - check boxes
18:16

Learn how to edit geometries using the Leaflet.draw plugin

Editing geometry in Leaflet
09:10

Finding Nearest Feature - Part 1
13:50

Finding nearest feature - Part 2
19:41
+
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
05:44

Spatial analysis - Point in Polygon
19:26

Spatial analysis - Filtering a feature class
10:50

Spatial Analysis - Intersecting polygons
10:00

Spatial Analysis - Summarizing polygon feature collections
08:15

Spatial Analysis - Intersecting lines with polygons
15:19

Summary
03:03
+
Bonus Material
7 Lectures 01:32:55
Designing for mobile applications
15:38

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

Bonus Project - Diversity Calculator
18:10

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

Taking your application live
05:30

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

Legends in Leaflet (Pt1)
10:38

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)
19:22

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)
08:50

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.
14:47
About the Instructor
Michael Miller
4.6 Average rating
86 Reviews
389 Students
2 Courses
GIS Programming

I have been programming and working with database applications for over 30 years, and specializing in geospatial applications for over 20 years. My goal with all my courses is to help students understand GIS, and particularly GIS programming, so that they can answer their own geospatial questions, and do so without repeating all the mistakes that I have made.