Tiled web map

Last updated
An exaggeration of a tiled web map, in this case the default OpenStreetMap style near Melbourne, Australia. Tiled web maps are normally displayed with no gap between tiles. Tiled web map Stevage.png
An exaggeration of a tiled web map, in this case the default OpenStreetMap style near Melbourne, Australia. Tiled web maps are normally displayed with no gap between tiles.

A tiled web map,slippy map [1] (in OpenStreetMap terminology) or tile map is a map displayed in a web browser 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 (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 tiles, before the emergence of vector tiles.


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 (WFS). While many map tiles are in raster format (a bitmap file such as PNG or JPG), 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:

The de facto OpenStreetMap standard, known as Slippy Map Tilenames [2] or XYZ, [3] follows these and adds more:

Tile numbering schemes

There are three main numbering schemes in use: [4]


Several standards exist:

Client libraries

To display a tiled map in a browser usually requires the support of a web mapping framework. This framework handles the retrieval of tiles, display, caching, and user navigation. Popular frameworks for tiled maps include Google Maps API, OpenLayers and Leaflet.

Related Research Articles

<span class="mw-page-title-main">Raster graphics</span> Matrix-based data structure

In computer graphics and digital photography, a raster graphics represents a two-dimensional picture as a rectangular matrix or grid of square pixels, viewable via a computer display, paper, or other display medium. A raster is technically characterized by the width and height of the image in pixels and by the number of bits per pixel. Raster images are stored in image files with varying dissemination, production, generation, and acquisition formats.

SVG is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">Vector graphics</span> Computer graphics images defined by points, lines and curves

Vector graphics are a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display and printing hardware, vector data models and file formats, as well as the software based on these data models. Vector graphics is an alternative to raster or bitmap graphics, with each having advantages and disadvantages in specific situations.

A digital image is an image composed of picture elements, also known as pixels, each with finite, discrete quantities of numeric representation for its intensity or gray level that is an output from its two-dimensional functions fed as input by its spatial coordinates denoted with x, y on the x-axis and y-axis, respectively. Depending on whether the image resolution is fixed, it may be of vector or raster type. By itself, the term "digital image" usually refers to raster images or bitmapped images.

An image server is web server software which specializes in delivering images. However, not all image servers support HTTP or can be used on web sites.

A GIS software program is a computer program to support the use of a geographic information system, providing the ability to create, store, manage, query, analyze, and visualize geographic data, that is, data representing phenomena for which location is important. The GIS software industry encompasses a broad range of commercial and open-source products that provide some or all of these capabilities within various information technology architectures.

An image file format is a file format for a digital image. There are many formats that can be used, such as JPEG, PNG, and GIF. Most formats up until 2022 were for storing 2D images, not 3D ones. The data stored in an image file format may be compressed or uncompressed. If the data is compressed, it may be done so using lossy compression or lossless compression. For graphic design applications, vector formats are often used. Some image file formats support transparency.

<span class="mw-page-title-main">OpenStreetMap</span> Collaborative project to create a free editable map of the world

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 geodata sources. OpenStreetMap is freely licensed under the Open Database License and as a result commonly used to make electronic maps, inform turn-by-turn navigation, assist in humanitarian aid and data visualisation. OpenStreetMap uses its own topology to store geographical features which can then be exported into other GIS file formats. The OpenStreetMap website itself is an online map, geodata search engine and editor.

<span class="mw-page-title-main">Spatial reference system</span> System to specify locations on Earth

A spatial reference system (SRS) or coordinate reference system (CRS) is a framework used to precisely measure locations on the surface of Earth as coordinates. It is thus the application of the abstract mathematics of coordinate systems and analytic geometry to geographic space. A particular SRS specification comprises a choice of Earth ellipsoid, horizontal datum, map projection, origin point, and unit of measure. Thousands of coordinate systems have been specified for use around the world or in specific regions and for various purposes, necessitating transformations between different SRS.

<span class="mw-page-title-main">JUMP GIS</span>

Java Unified Mapping Program (JUMP) is a Java based vector and raster GIS and programming framework. Current development continues under the OpenJUMP name.

The Open Source Geospatial Foundation (OSGeo), is a non-profit non-governmental organization whose mission is to support and promote the collaborative development of open geospatial technologies and data. The foundation was formed in February 2006 to provide financial, organizational and legal support to the broader Free and open-source geospatial community. It also serves as an independent legal entity to which community members can contribute code, funding and other resources.

<span class="mw-page-title-main">GDAL</span> Translator library for raster and vector geospatial data formats

The Geospatial Data Abstraction Library (GDAL) is a computer software library for reading and writing raster and vector geospatial data formats, and is released under the permissive X/MIT style free software license by the Open Source Geospatial Foundation. As a library, it presents a single abstract data model to the calling application for all supported formats. It may also be built with a variety of useful command line interface utilities for data translation and processing. Projections and transformations are supported by the PROJ library.

Scalable Inman Flash Replacement (sIFR) is an obsolete JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. It is open-source and was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.

<span class="mw-page-title-main">OpenLayers</span> JavaScript library for displaying map data in web browsers

OpenLayers is an open-source 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 Bing Maps.

<span class="mw-page-title-main">Web mapping</span> Process of using the maps delivered by geographic information systems (GIS) in World Wide Web

Web mapping or an online mapping is the process of using, creating, and distributing maps on the World Wide Web, usually through the use of Web geographic information systems. A web map or an online map is both served and consumed, thus, web mapping is more than just web cartography, it is a service where consumers may choose what the map will show.

Mapnik is an open-source mapping toolkit for desktop and server based map rendering, written in C++. Artem Pavlenko, the original developer of Mapnik, set out with the explicit goal of creating beautiful maps by employing the sub-pixel anti-aliasing of the Anti-Grain Geometry (AGG) library. Mapnik now also has a Cairo rendering backend. For handling common software tasks such as memory management, file system access, regular expressions, and XML parsing, Mapnik utilizes the Boost C++ libraries. An XML file can be used to define a collection of mapping objects that determine the appearance of a map, or objects can be constructed programmatically in C++, Python, and Node.js.

geo URI scheme System of geographic location identifiers

The geo URI scheme is a Uniform Resource Identifier (URI) scheme defined by the Internet Engineering Task Force's RFC 5870 as:

a Uniform Resource Identifier (URI) for geographic locations using the 'geo' scheme name. A 'geo' URI identifies a physical location in a two- or three-dimensional coordinate reference system in a compact, simple, human-readable, and protocol-independent way.

Leaflet is an open source JavaScript library used to build web mapping applications. First released in 2011, it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest and Flickr.

<span class="mw-page-title-main">Web Mercator projection</span> Mercator variant map projection

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 adopted it in 2005. It is used by virtually all major online map providers, including Google Maps, CARTO, Mapbox, Bing Maps, OpenStreetMap, Mapquest, Esri, and many others. Its official EPSG identifier is EPSG:3857, although others have been used historically.

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-rendered raster map tiles with vector map data. As with the widely used raster tiled web maps, map data is requested by a client as a set of "tiles" corresponding to square areas of land of a pre-defined size and location. Unlike raster tiled web maps, however, the server returns vector map data, which has been clipped to the boundaries of each tile, instead of a pre-rendered map image.


  1. "OpenStreetMap wiki".
  2. "Slippy map tilenames - OpenStreetMap Wiki". wiki.openstreetmap.org. Retrieved 2015-06-10.
  3. "tmcw/xyz_vs_tms.md". GitHub Gists. Retrieved 2015-06-10.
  4. "Tiles à la Google Maps: Coordinates, Tile Bounds and Projection - conversion to EPSG:900913 (EPSG:3785) and EPSG:4326 (WGS84)". www.maptiler.com. Retrieved 2022-03-01.
  5. "An Open Platform: TileJSON". mapbox.com. Retrieved 2017-01-05.
  6. "Bing Maps Tile System". msdn.microsoft.com. Retrieved 2015-06-10.