Mapping in Leaflet JS

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!