![Tiled web map Stevage](https://upload.wikimedia.org/wikipedia/commons/0/03/Tiled_web_map_Stevage.png)
A tiled web map, slippy map (in
OpenStreetMap
OpenStreetMap (OSM) is a free, open geographic database updated and maintained by a community of volunteers via open collaboration. Contributors collect data from surveys, trace from aerial imagery and also import from other freely licensed g ...
terminology) or tile map is a map displayed in a
web browser
A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
by seamlessly joining dozens of individually requested image or vector data files. It is the most popular way to display and navigate maps, replacing other methods such as
Web Map Service
A Web Map Service (WMS) is a standard protocol developed by the Open Geospatial Consortium in 1999 for serving georeferenced map images over the Internet. These images are typically produced by a map server from data provided by a GIS database.
...
(WMS) which typically display a single large image, with arrow buttons to navigate to nearby areas. Google Maps was one of the first major mapping sites to use this technique. The first tiled web maps used
raster
Raster may refer to:
* Raster graphics, graphical techniques using arrays of pixel values
* Raster graphics editor, a computer program
* Raster scan, the pattern of image readout, transmission, storage, and reconstruction in television and compu ...
tiles, before the emergence of
vector tiles
Vector tiles, tiled vectors or vectiles are packets of geographic data, packaged into pre-defined roughly-square shaped "tiles" for transfer over the web. This is an emerging method for delivering styled web maps, combining certain benefits of pre ...
.
There are several advantages to tiled maps. Each time the user pans, most of the tiles are still relevant, and can be kept displayed, while new tiles are fetched. This greatly improves the user experience, compared to fetching a single map image for the whole viewport. It also allows individual tiles to be pre-computed, a task easy to parallelize. Also, displaying rendered images served from a web server is less computationally demanding than rendering images in the browser, a benefit over technologies such as
Web Feature Service In computing, the Open Geospatial Consortium Web Feature Service (WFS) Interface Standard provides an interface allowing requests for geographical features across the web using platform-independent calls. One can think of geographical features as ...
(WFS). While many map tiles are in raster format (a bitmap file such as
PNG or
JPG
JPEG ( ) is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image ...
), the number of suppliers of vector tiles is growing. Vector tiles are rendered by the client browser, which can thus add a custom style to the map. Vector map tiles may also be rotated separately from any text overlay so that the text remains readable.
Defining a tiled web map
Properties of tiled web maps that require convention or standards include the size of tiles, the numbering of zoom levels, the projection to use, the way individual tiles are numbered or otherwise identified, and the method for requesting them.
Most tiled web maps follow certain Google Maps conventions:
* Tiles are 256x256 pixels
* At the outer most zoom level, 0, the entire world can be rendered in a single map tile.
* Each zoom level doubles in both dimensions, so a single tile is replaced by 4 tiles when zooming in. This means that about 22 zoom levels are sufficient for most practical purposes.
* The
Web Mercator
Web Mercator, Google Web Mercator, Spherical Mercator, WGS 84 Web Mercator or WGS 84/Pseudo-Mercator is a variant of the Mercator map projection and is the de facto standard for Web mapping applications. It rose to prominence when Google Maps adop ...
projection is used, with latitude limits of around 85 degrees.
The de facto OpenStreetMap standard, known as Slippy Map Tilenames or XYZ, follows these and adds more:
* An X and Y numbering scheme
*
PNG images for tiles
* Images are served through a
Web server
A web server is computer software and underlying hardware that accepts requests via HTTP (the network protocol created to distribute web content) or its secure variant HTTPS. A user agent, commonly a web browser or web crawler, initiate ...
, with a URL like
http://.../Z/X/Y.png
, where Z is the zoom level, and X and Y identify the tile.
Tile numbering schemes
There are three main numbering schemes in use:
* Google Maps / OpenStreetMap: (0 to 2
zoom-1, 0 to 2
zoom-1) for the range (-180, +85.0511) - (+180, -85.0511)
* Tile Map Service: (0 to 2
zoom-1, 2
zoom-1 to 0) for the range (-180, +85.0511) - (+180, -85.0511). (That is, the same as the previous with the Y value flipped.)
*
QuadTrees, used by Microsoft.
Standards
Several standards exist:
*
Tile Map Service
Tile Map Service or TMS, is a specification for tiled web maps, developed by the Open Source Geospatial Foundation. The definition generally requires a URI structure which attempts to fulfill REST principles. The TMS protocol fills a gap between t ...
: an early standard supported by
OpenLayers
OpenLayers is an open-source (provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers as slippy maps. It provides an API for building rich web-based geographic applications similar to Google Maps and Bin ...
. One difference is the y axis is positive southwards in TMS, and northwards in OpenStreetMap.
*
Web Map Tile Service
A Web Map Tile Service (WMTS) is a standard protocol for serving pre-rendered or run-time computed georeferenced map tiles over the Internet. The specification was developed and first published by the Open Geospatial Consortium in 2010.
History
...
: a more recent
Open Geospatial Consortium
The Open Geospatial Consortium (OGC), an international voluntary consensus standards organization for geospatial content and location-based services, sensor web and Internet of Things, GIS data processing and data sharing. It originated in 1994 ...
(OGC) standard.
* The de facto XYZ standard referred to above.
*
TileJSON: a lightweight
JSON
JSON (JavaScript Object Notation, pronounced ; also ) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other ser ...
description of all the parameters associated with a web map, created by
Mapbox
Mapbox is an American provider of custom online maps for websites and applications such as Foursquare, Lonely Planet, the ''Financial Times'', The Weather Channel, Instacart Inc. and Snapchat. Since 2010, it has rapidly expanded the niche of cus ...
.
* Bing Maps Tile System,
using Quadkeys for addressing.
Client libraries
To display a tiled map in a browser usually requires the support of a
web mapping
Web mapping or an online mapping is the process of using maps, usually created through geographic information systems (GIS), on the Internet, more specifically in the World Wide Web (WWW). A web map or an online map is both served and consumed, t ...
framework. This framework handles the retrieval of tiles, display, caching, and user navigation. Popular frameworks for tiled maps include
Google Maps API
Google Maps is a web mapping platform and consumer application offered by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets ( Street View), real-time traffic conditions, and rou ...
,
OpenLayers
OpenLayers is an open-source (provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers as slippy maps. It provides an API for building rich web-based geographic applications similar to Google Maps and Bin ...
and
Leaflet.
References
External links
*{{cite web, url=https://www.mapbox.com/foundations/how-web-maps-work/, title=How do Web Maps Work?, publisher=Mapbox
Example of a tiled marine map for boating Web mapping