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."
Read 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."
"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.
What's inside
Learning objectives
- 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!
- 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!
Syllabus
Introduction
Optional - About Me
Learn about the basics of client server architecture and how it differs from programming on a single user system.
Read more
Syllabus
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
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.
Good to know
Save this course
Save
Activities
Review basics of GIS data structure
Show steps
Reinforce the fundamental concepts of data structure and representation in GIS to enhance comprehension during the course.
Browse courses on
GIS
Show steps
-
Revisit the principles of spatial data models (e.g., raster, vector)
-
Review common file formats used in GIS (e.g., Shapefile, GeoJSON)
Explore Leaflet tutorial series
Show steps
Deepen understanding of Leaflet by following comprehensive tutorials that cover its core concepts and functionalities.
Show steps
-
Watch the Leaflet tutorial series on the official website
-
Work through hands-on exercises to apply the concepts
Create Leaflet map using code snippets
Show steps
Solidify coding proficiency in Leaflet by replicating and modifying provided code snippets to create custom maps.
Show steps
-
Find code snippets for Leaflet map creation
-
Experiment with different code variations to customize the map
One other activity
Expand to see all activities and additional details
Show all four activities
Project: Implement Leaflet map for a custom dataset
Show steps
Test knowledge and skills by developing a functional Leaflet map application that leverages a custom dataset.
Show steps
-
Acquire a suitable dataset for mapping
-
Design and implement a Leaflet map to display the data
-
Incorporate features for user interaction and data exploration
Review basics of GIS data structure
Show steps
Reinforce the fundamental concepts of data structure and representation in GIS to enhance comprehension during the course.
Browse courses on
GIS
Show steps
- Revisit the principles of spatial data models (e.g., raster, vector)
- Review common file formats used in GIS (e.g., Shapefile, GeoJSON)
Explore Leaflet tutorial series
Show steps
Deepen understanding of Leaflet by following comprehensive tutorials that cover its core concepts and functionalities.
Show steps
- Watch the Leaflet tutorial series on the official website
- Work through hands-on exercises to apply the concepts
Create Leaflet map using code snippets
Show steps
Solidify coding proficiency in Leaflet by replicating and modifying provided code snippets to create custom maps.
Show steps
- Find code snippets for Leaflet map creation
- Experiment with different code variations to customize the map
Project: Implement Leaflet map for a custom dataset
Show steps
Test knowledge and skills by developing a functional Leaflet map application that leverages a custom dataset.
Show steps
- Acquire a suitable dataset for mapping
- Design and implement a Leaflet map to display the data
- Incorporate features for user interaction and data exploration
Career center
GIS Analyst
Web Developer
Data Analyst
Cartographer
Geospatial Analyst
GIS Developer
Location Intelligence Analyst
GIS Manager
Software Engineer
Data Scientist
Business Analyst
Project Manager
Marketing Manager
Sales Manager
Customer Success Manager
Reading list
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
