Mapping in Leaflet JS
3.1 (73 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
506 students enrolled

Mapping in Leaflet JS

Data | Plugins | Layouts | Interactivity
3.1 (73 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
506 students enrolled
Created by Victor Temprano
Last updated 4/2018
English [Auto]
Current price: $12.99 Original price: $19.99 Discount: 35% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Make Leaflet maps, with all kinds of features and geoJSONs
  • Build complex filters, handle live data, and manage events.
Course content
Expand all 31 lectures 05:16:34
+ Introduction
4 lectures 39:34

Meet your instructor and learn about the structure of the course.

Preview 05:33

Learn about how online maps work ("slippy maps") and get familiar with a few of the major mapping APIs out there.

Preview 11:52

Get LeafletJS booted up in your own file in this episode, and get your first peek at the documentation!


Don't skip this if you don't know about geographic data! The data is probably more complicated than you expect unless you know what you're doing. Learn a little about how data works with online maps.

+ LeafletJS Basics
9 lectures 01:37:04

An introduction to this section in general. Additionally, learn about how maps are initialized, how to add shapes, change the center, change the actual map tiles/images, and more basics.

Shapes & Basics

Learn a bit about adding popups easily, and then get on to setting up your own custom marker (with anchor help, too!).

Custom Marker Icons

Learn how to style popups -- it's really easy in Leaflet. Also see a bit about how the width and anchor works.

Custom Popups

Learn about how geoJSONs work with Leaflet, and how add popups or custom styles to Leaflet geoJSON map features.


Bounds aren't always a beginner topic, but it'll be useful for your map. Learn about bounds and how to set them in Leaflet, and a bit more about Leaflet's "layer" system.


Get started with events -- how are they triggered and attached? How you do get information from a marker that's been clicked? This episode mainly goes over events related with marker and click events.

Events with Features

There are numerous events happening as you interact with the map -- learn how to hook into them! Also, do a little fun checking around distances to style markers based on mouse map events.

Events with the Map

Finishing up our event section, we talk more about events emitted from the map (zoomend, moveend, etc). From here on out you're an event expert!

More Map Events

In this, we go over a few map design challenges and issues and consider how to put to use all this map knowledge you're gaining!

+ Overlays & Interactivity
9 lectures 01:31:56

It seems simple to make some divs and put them on top of a map, but there are certain principles you might want to follow. In this episode we go over common overlay designs, their strengths and weaknesses, and we make a simple starter overlay in a top corner.

Overlay Design - Overview and simple overlays

More discussion and setup of overlays -- specifically side toggles. We also consider mobile and how overlays might work in small interfaces.

Overlay Design - Side toggles and mobile

There are numerous ways to call and load map data. You can put your geographic information into a variable right in the code, or use AJAX in a more readable, efficient way of calling information for your map.

Loading Map Data

We continue to explore AJAX calls and geoJSON data loading, as well as the different kinds of data you might be loading into your map. We also style our geoJSON data dynamically based on its properties.

Loading Map Data - dynamic data styling
Integration of Data & Interface

Learn how to use a slider to implement some filtering of what appears on your map.

Filters -- making a slider

Perfect your filter slider skills!

Filters -- finishing the slider

Use a dropdown to select a specific feature on the map, and zoom into its bounds. Also do the reverse -- if you click on a feature, show its information in the side overlay.

Filters -- select dropdowns

Do some point-in-polygon calculations when a particular feature is selected. Using this, you can do all kinds of complex analysis based on whatever your user wants to see!

Filters -- geographic data calculations
+ Advanced Topics in LeafletJS
9 lectures 01:28:00

Heatmaps allow you to describe the contours of your data without showing the user hard points. Learn about heatmap libraries and put them to use with our previous data.


Clustering is very useful when you are dealing with too many points for a normal map. Normally Leaflet starts to run into problems over a thousand markers. So employ some clustering!


The best clustering libraries have a ton of options, so we go through the most important ones here for Leaflet Clusterer.

Clustering II

Leaflet has some great directions plugins, but a few stand out. We go over some of the implementation and modifications you could employ.

Routing & Directions

In this episode, we discuss privacy and how geolocation works. This isn't unique to LeafletJS but it's important because of its use in so many apps today.


Drawing and user editing move your map to the next level, because users can actually interact and contribute. Learn how to use Leaflet Draw and other modern editing libraries.

Drawing & user editing

Animation is not too confusing, but you need to see it done the first time! Take a look to see how you can animate along points, or just use a library to take care of things if you don't need anything complex.


It's not always clear when your data is just too much. Here are some techniques for dealing with large datasets and managing their size.

Big Data

A last, random episode on how to place images on your map as overlays. Might come in handy somewhere!

Images on the map
  • Some knowledge of Javascript, HTML, and CSS.
  • A little geographic knowledge helps, but isn't necessary.

In this course, mapping expert and founder of Mapster, Victor Temprano, takes you through LeafletJS from start to finish. You'll learn the best reasons why you should use Leaflet, how to build strong mapping interfaces, managing big data, map interactivity, and a heck of a lot more.

This is a comprehensive course that covers basic things like markers and popups, but also goes into depth on event handling and provides a variety of helpful tips for more complex topics. We've striven to make this course as useful as possible for beginners, and we're open to feedback if you have any suggestions for more episodes!

Who this course is for:
  • Beginner front-end developers
  • Developers making specific applications with LeafletJS