Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a...

15
Slippy Maps Visualizing maps on the web

Transcript of Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a...

Page 1: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Slippy MapsVisualizing maps on the web

Page 2: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

What is a Map?A map is a drawing that is the representation,

on a certain scale, of a terrain.

Page 3: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

The classic "Big (Composite) Map"Have a very big file size for the "real-estate"

you get in the game world.Have limits with texture sizes.Not be very flexible; you won't really be able

to re-use whole screens as different parts of the world.

Be easier to program with.Won't require a 'Tile Editor' to compose.

Page 4: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

"Tiled Map“Have a much smaller file size for a much

larger world.Be a bit more fiddly to program (but it's not

massively complex).Require you to edit / load tile configurations

(maps) in the game from your own file format.Make large scrolling levels work much better.Have much more flexibility - one tile set could

make dozens of levels.

Page 5: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Requesting for a MapThe map will be generated with a proper

level of detail, depending on the following parameters:latitude and longitude for the center of map the zoom level – corresponding on how much

space to be represented on a usually preset content size.

The level of detail is then deducted, depending on how much information can be represented with the above constraints.

Page 6: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Map Services ProvidersFree: OpenStreetMap

Commercial: Google (Tele Atlas) TomTom

Page 7: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

OpenStreetMapOpenStreetMap (OSM) is a collaborative

project to create a free editable map of the world – www.openstreetmap.org.

The data comes from:Portable GPS devices, aerial photography, from other free sources, or simply from local knowledge.

Page 8: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

OpenStreetMapOpenStreetMap was inspired by sites such as

Wikipedia — the map display features a prominent 'Edit' tab and a full revision history is maintained. Registered users can upload GPS track logs and edit the vector data using the given editing tools.

Page 9: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

OpenStreetMap – Map ProductionThe initial map data was all built from scratch by

volunteers performing ground surveys using a GPS unit and a notebook or a voice recorder. Then the data was then entered into the OpenStreetMap database.

In the present the availability of aerial photography and other data sources has greatly increased the work speed the data is collected more accurately.

Ground surveys are performed by volunteers. The data is entered into the database using one of several purpose-built map editors.

Page 10: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Slippy MapThe Slippy Map is the main OpenStreetMap

web based display for browsing OSM data.

AJAX component : JavaScript runs in the browser, which dynamically requests tiles from the server in the background without reloading the whole HTML page.

This provides a smooth slippy zoomy map browsing experience.

Page 11: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Tile RenderingThe tiles are pre-rendered and stored on disk

in 2 sets:1. Tiles rendered by Mapnik2. Osmarender renderings (produced by

tiles@home)

Page 12: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Different Tile RenderingsThe maps are rendered as raster images

called tiles as a result of fetching the map data via the API.

Mapnik Osmarender CloudMade

Page 13: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Mapnik Tile RenderingMapnik tiles are currently generated on

tile.openstreetmap.org. The Mapnik database is updated with hourly

diffs so that most data changes should get rendered within an hour.

Mapnik rendering runs as an apache module called mod tile developed especially for high performance needs.

Page 14: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Mapnik Renderer RulesEvery tile has a timestamp for when it was rendered

and a dirty flag signifying that it is ready to be re-rendered. Whenever looking at a tile, it is checked if it is older

than seven days. If it is older than seven days then it is marked dirty (and thus

rendered). A background rendering process generates a list of all

dirty tiles and then proceeds to render them all. Once it has finished it queries the list of dirty tiles again.

Tiles are rendered on a interest/attention-first basis.Marking a tile dirty does not mark all sub tiles as

dirty.

Page 15: Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Libraries for Displaying the TilesOpenLayers and GoogleMaps

OpenLayers can combine maps from different sources (Google Maps background, WMS overlays, vector data from KML or GML files or WFS etc)

You can style OpenLayers much more than possible with Google Maps

OpenLayers is open source, so debugging is possibleIf maps with high precision are requested, the best

choice is using OpenLayers with a suitable map server backend rather than Google Maps to get a better map projection (Google Maps uses the Mercator projection, so it cannot show areas around the poles)