
Meet your instructor and learn about the structure of the course.
Learn about how online maps work ("slippy maps") and get familiar with a few of the major mapping APIs out there.
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.
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.
Learn a bit about adding popups easily, and then get on to setting up your own custom marker (with anchor help, too!).
Learn how to style popups -- it's really easy in Leaflet. Also see a bit about how the width and anchor works.
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.
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.
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!
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!
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.
More discussion and setup of overlays -- specifically side toggles. We also consider mobile and how overlays might work in small interfaces.
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.
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.
Learn how to use a slider to implement some filtering of what appears on your map.
Perfect your filter slider skills!
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.
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!
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.
Leaflet has some great directions plugins, but a few stand out. We go over some of the implementation and modifications you could employ.
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.
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.
A last, random episode on how to place images on your map as overlays. Might come in handy somewhere!
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.
Leaflet is a flexible platform that will serve you well in creating map-focused applications, and learning its system will help you significantly in your development career as well as help you understand other mapping APIs. Although Leaflet is a little older when it comes to mapping APIs, its core logic is consistent and well-documented.
This course will take you through from never having touched Leaflet, all the way to building relatively advanced interfaces that incorporate geocoding, plugins, routing, and a variety of interactivity. With this, you should get the toolkit you need in order to build the application that you're imagining in your project!
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!