Display and analyze GIS data on the web with Leaflet
“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
Learn about the basics of client server architecture and how it differs from programming on a single user system.
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
The Leaflet Map Object
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.
Raster layers in Leaflet
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
Vector layers in Leaflet
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.
Styling vector data
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
Searching, filtering, and analyzing data in Leaflet
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
Analyzing data with Turf.js in Leaflet
Introduction to Turf.js and simple buffering
Bonus Material
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.
