@mbernasocchi
marco@opengis.ch

MARCO BERNASOCCHI - QGIS on android

MATTHIAS KUHN - QGIS core committer

Developers, Consultants and Teachers for C++, Python, Web, QGIS, Android, ...

http://opengisch.github.io/talks/wmts/
Links are in blue boxes, blue is just emphasis.

We l[i|o]ve open source.
Reuse and edit this presentation on github

Please do ask questions

Now let's get started

In 1996, Mapquest launched its web service.

ta da!

Directions! Online! Revolutionary!

The problem: it was slow to load :(

MapQuest required a full page refresh to scroll or zoom, and was always aligned to tile boundaries.

Google Maps really paved the way for online mapping, beginning in 2005.

But what was the revolution?
Was it the interface?
The red marker?
The weather widget?

No!

It was the tile.

Let's talk about tiles for a minute.

All tiles = same size!
256x256 pixels
same boundaries

Tiles could be a 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 like this load the tiles that are on your screen. If the map is smart, it will pre-load tiles outside of the screen, along the top, bottom, left, and right.

This kind of map is colloquially called a slippy map

Each zoom level has its own set of tiles!

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

Tiles are rendered in advance (usually) then stored in a cache

Map tiles are just images on the web, so you can link to them individually.

For example: http://tile.openstreetmap.org/4/2/6.png

In order to understand how this works, let's break down the URL.

http://tile.openstreetmap.org/4/2/6.png --
Name of the tile server.

http://tile.openstreetmap.org/4/2/6.png --
Z value, or the zoom level.

http://tile.openstreetmap.org/4/2/6.png --
X/Y value, or the place in the grid where the tile lives.

Google maps use Mercator projection, which is designed for sailors BUT it works well for flat maps.

We'll see more map projections later...!

Anyway, most followed Google's lead, with tiles at the base.

Not surprisingly, a 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.

Here's the breakdown of how these pieces fit together:

Make sense?

Great!

Digression: what is GeoJSON again?

GeoJSON: geographic data format. (Contains spatial information.)

GeoJSON: extension of JSON, with a specific structure.

GeoJSON: has room for nested attribute information.

GeoJSON: loved by web mapping libraries.

Also, there's a cool tool for editing GeoJSONcalled geojson.io!

Digression: what is git?

git: distributed version control system.

git: allows for collaboration without totally screwing everything up.

git: super powerful.

Digression: what is GitHub?

GitHub: a home for lots and lots of code repositories.

GitHub: interacted with using git.

GitHub: provides easy-to-use tools and tutorials for using and learning git to collaborate on and contribute to projects.

GitHub: best friends with GeoJSON! (Renders in a map.)

/digression
/digression
/digression

Now we're ready to dive a little deeper into the whole web map anatomy!

The simplest possible web map: bit.ly/1RS5Ewc

What does the javascript library do? Grabs the tiles, adds content layer, handles interaction.

The javascript: we recommend Leaflet, although there are others: OpenLayers (which is making a comeback) / Modest Maps / Polymaps

And don't forget: Google Maps API / Bing Maps API / Nokia HERE Maps API / ESRI ArcGIS API

SAAS:
mapbox cartoDB

So.
Where do I start?

Do I need to make my own custom tiles?

No? Use these! OpenStreetMap, CloudMade, Stamen, MapBox, MapQuest

WM(T)S
standard protocol for serving pre-rendered georeferenced map (tiles) over the Internet

WM(T)S - GetCapabilities
returns parameters about the WMS and the available layers

WM(T)S - GetMap
returns a map image/tile.

TMS
specification for tiled web maps. Requires a URI structure which attempts to fulfill REST principles

Do I need to make my own custom tiles?

Yes? Use TileMill/Mapbox studio to design your own tiles.

Pretty!

You can host these files on MapBox, or...

Serve the tiles by running your own tile server. For example: TileServer.php / TileStache / TileCache / TileStream / mbtiles-server / mod_tile

Do I need a content layer?

No? Put all your data into the tiles

Yes? Convert a Shapefile to GeoJSON with OGR, OGRE or write your own GeoJSON with geojson.io

Using QGIS? install QGIS2web plugin

Learn More:
maptime.io/lessons-resources/
e-cartouche.ch/

Thanks to #maptime, Lyzi Diamond, Alan McConchie and Beth Schechter for sharing their work

Questions?

Now or later

@mbernasocchi
marco@opengis.ch