Display and analyze GIS data on the web with Leaflet

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

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

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

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

Learn how the Leaflet on-line documentation is organized

Learn how to navigate the Leaflet on-line documentation

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

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

Test yourself on the concepts learned in this section

Learn the basics of the Leaflet map object

Programming the Leaflet map object

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

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

Learn about using popups and tooltips in Leaflet

Learn how to use and modify the native Leaflet map controls

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

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

Add a mouse coordinate and measure control

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

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

Learn the basics of layers in Leaflet

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

Learn how to use the Leaflet layer control

Learn the basics of Leaflet vector overlay layers

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

Learn about the path abstract object and the Leaflet polyline object

Learn how to create and work with polygons in leaflet

Work with layer groups and feature groups in Leaflet

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

A review of the GeoJSON data format for spatial objects

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

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

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

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

Use circleMarkers and circles to style Leaflet marker objects

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

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

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

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

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

Learn how to define colors in HTML and CSS

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

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

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

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

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

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

Use a radio button selection to filter data

Learn how to filter data using a selection of check boxes

Learn how to edit geometries using the Leaflet.draw plugin

Introduction to Turf.js and simple buffering

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

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

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

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

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

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.