Big

Hi! I'm Lyzi. I live in Oakland, CA. I work at Code for America. I do Maptime.

First of all: A web map is a map that lives on the web.

Even an embedded image in a page is a web map. (But download this PDF does not a web map make.)

But when we think of web maps, we think about interactivity. We think about...

We want interactivity. We want people to engage with our web maps.

But let's step back and talk about how web maps work.

A chunk of these slides came from the awesome Anatomy of a Web Map presentation by Alan McConchie and Beth Schechter of Stamen and Maptime fame!

(I also wrote a blog post that explains more about this stuff.)

Raster tiles, anyway. Vector tiles some other time.

"... web maps are made up of many small, square images called tiles."

"These tiles are typically 256x256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image."

All these little tiles load way faster than one big map.

This kind of map is colloquially called a slippy map.

With each additional zoom level, the number of tiles increases exponentially.

Map tiles only render when you're looking at them in that moment, so tiles make maps hella fast.

As you can see, map tiles are static images on the web.

Cool. But what does this have to do with Leaflet?

These tiles need to live somewhere on the web page. They need to know when to load and they need to react when you click or drag.

Leaflet is a JavaScript library that allows us to do just that.

Including JavaScript libraries in our code is like copying and pasting someone else's code into yours.

You have access to everything in that library. In our case, it's a bunch of cool tools to make web maps and give them familiar functionality.

(You can read more about Leaflet at leafletjs.com.)

The first awesome thing we can do with Leaflet is make ourselves a map container.

var map = L.map('leaflet-map');

The

'leaflet-map'

in that tag refers to the div on the page where the map is going to live.

But it's empty. We haven't added any tiles. Let's do that.

There are many free tilesets on the web. Let's use some from Stamen.

var map = L.map('leaflet-map').
setView([40.435811, -79.987710], 13);

L.tileLayer('http://b.tile.stamen.com/watercolor/{z}/{x}/{y}.png').
addTo(map);

We added some tiles, centered the map on Pittsburgh, and gave it a zoom level.

As Stephanie May would point out, what we have here is a reference map.

A very pretty reference map with no labels, but a reference map nonetheless.

What if we want to show some data on the map? Maybe this hotel we're sitting in.

L.marker([40.4399, -79.9920]).addTo(map);

We added a map marker at the lat/lon of the hotel to the map.

Last part. Let's add a popup to the marker so when we click on it it'll tell us what it's identifying.

L.marker([40.4399, -79.9920])
.bindPopup("NACIS 2014").addTo(map);

We binded a popup to the marker that says NACIS 2014.

You can do this on your own! Go forth and make web maps!

If you want work with others who are also learning, you should join your local Maptime chapter. (Or start your own!)

Remember: You're a champion! Keep going! You can do it!

My name is Lyzi! I am on Twitter at @lyzidiamond! Please come talk to me! I like talking to people!