An Introduction to Web Mapping
By Mita Williams based on presentations by Alan McConchie, Beth Schechter and Lyzi Diamond
You can view, comment, remix and edit on github!
Today we will be talking about the basic principles of web mapping.
And we will be including a little history, too.
We'll not going to talk a lot about Google, but will instead show you an open source Google-free stack
We're going to answer the question...
How is a web map different than a digital map?
Digital: involves a computer, but might not be accessible by the internet.
Digital maps are (usually) created by Geographical Information System (GIS).
A web map is a kind of digital map.
We're talking about web maps that you view in a browser
Making maps for mobile devices is evidently similar to web mapping but I won't be talking about it because I don't know much about it myself!
We also won't be talking about digital globes like Google Earth
Time for the history lesson:
How did web maps come to be?
First there were digital maps published on the web usingArcGIS.
ArcGIS is made by the company ESRI and it's mapping software used by institutions more than end-users
Although useful, GIS for the Web was not user friendly and maybe more importantly, it was not web developer friendly
In 1996, Mapquest launched its web service.
Online maps that could give directions! It was amazing!
But it was also slow to load :(
MapQuest required a full page refresh to scroll or zoom, and it was always aligned to specific map boundaries.
In 2005 Google Maps solved this problem by introducing the tile.
The tile
A tile is just an image that is served up on the internet
All tiles are the same size - 256x256 pixels
Tiles can be road map, a satellite image, or anything else that's a raster.
All these little tiles load way faster than one big map.
Web maps load the tiles that you want on your screen and if the map is smart, it will pre-load tiles outside of the screen, along the top, bottom, left, and right.
This is why this kind of map is sometimes called a slippy map
Each zoom level has its own set of tiles...
Zoom level 0: one tile for the world.
With each additional zoom level, the number of tiles increases exponentially.
Zoom level 1: 4 tiles for the world.
Zoom level 2, 3, 4, 5
Zoom level 13
level 17
level 17 === 0.003 degrees == 1.193 m /pixel === 1:4,000 scale
Tiles are usually rendered in advance then stored in a cache
In order to understand how this works, let's break down the URL.
level 17 -- this is the name of the tile server. -- this is the z value, or the zoom level. -- This is the x/y value, or the place in the grid where the tile lives.
This collection of raster tiles makes up what we call the map's base layer.
When we layer things like markers on top of them, we call those data layers or content layers or feature layers.
They are often vector layers (point, line, polygon). Sometimes you can interact with them (clicking to produce a popup, for example).
Data layers can be expressed in a variety of file types
GIS uses shapefiles, but web mappers prefer KML, or GeoJSON
GeoJSON is especially magical because it now can be displayed and tracked within GitHub
The City of Windsor's Open Data Catalogue provides geocoded data that can be used as data layers!!!
Wait, how do we get the data layers into the base layers of your map?
JavaScript libraries for Web Mapping!
(Well, there are also APIs: Google Maps API , Bing Maps API , Nokia HERE Maps API, and ESRI ArcGIS API but we're not going there).
What do these JavaScript libraries do? They grab the tiles, adds content layer, and handles interaction.
The JavaScript most recommended is Leaflet, although there are others: OpenLayers,Modest Maps and Polymaps
[Leaflet's] "most important contribution... is its ability to treat map elements just like every other page element...
While that capability may seem pedestrian, it’s quite powerful in practice. Tapping a marker on a map can trigger an event related to elements outside of the map, and vice versa. And once you begin playing with the power that offers, the traditional boundaries between the map and 'the rest of the page” vanish'.
If I can get my Data Layers from The City of Windsor Open Data Catalogue...
Do I have to make my own custom base layer tiles?
No! You can use tile services such as CloudMade, Stamen, MapBox, and CartoDB
Or you can use the Wikipedia of Maps: OpenStreetMap
You can add addtional style to you your map with CartoCSS
And you can even use a service like TileMill to design your own tiles.
Wait! I just noticed that there's no GeoJSON in the City of Windsor's Open Data Catalogue?! How can I make pretty web maps now?
You can convert a Shapefile to GeoJSON with OGRE or you can easily create your own GeoJSON with
I think that's enough!
Here's a mapping challenge for you: put the open data from the City of Windsor's Open Data Catalogue on a map!
Absolute beginners can get started using this walkthough on how to use Leaflet and tiles from OpenStreetMap
Or perhaps you'd like to learn more by working through the CartoDB Map Academy Course
Folks more comfortable with code can use this quick start guide from Leaflet to help you handcode a map using it
Or you can try to make a map using Tilemill by Mapbox
Want to Learn More?


Thanks to:
The folks at #maptime who shared the base layer of this presentation
The people at who encourage Open Data Day and support Open Data work around the world
The City of Windsor for providing their community with its Open Data Catalogue
The volunteers
who make up
OpenDataWindsorEssex and Hackforge
And to you, the map makers.
Presentation made with Tom MacWright's big
Here be dragons.