Fundamentals 20 min read

Understanding Tile Map Services and Map Tile Principles

This article explains the concepts, standards, and workflows of tile map services, covering WMTS and TMS specifications, map tile fundamentals, projection methods, tile generation, distribution, and rendering techniques with code examples using Leaflet, providing a comprehensive overview for GIS developers.

Sohu Tech Products

Feb 15, 2023

Understanding Tile Map Services and Map Tile Principles

1. Tile Map Services

According to the official definition, Tile Map Service (TMS) is the OSGeo specification that allows users to access map tiles on demand. The OGC equivalent, Web Map Tile Service (WMTS), follows the same tiling rules and is essentially the same protocol, used by most desktop and mobile map basemaps.

2. Principles of Map Tiles

A map tile is a square raster image generated by cutting a geographic area into rows and columns at a specific zoom level. Tiles are arranged in a pyramid model: higher zoom levels contain more tiles and provide finer detail, while the lowest level (zoom 0) consists of a single tile covering the whole world.

Standard tile size is 256 × 256 px, and the Web‑Mercator projection defines the coordinate origin at (180° E, 85.051° S). Google’s tile specification differs slightly in the latitude origin and maximum zoom level.

3. Production and Distribution of Tile Maps

3.1 Map Projection and Styling

Geographic data stored in a geographic coordinate system (e.g., WGS‑84) must be projected onto a 2‑D plane. Common projection types include Gauss‑Krüger, Lambert Conic, and Mercator. The Mercator projection, especially its Web variant, is widely used for online maps because of its simple calculations.

After projection, data are styled according to type and scale (e.g., different colors for land use, line styles for roads) using tools such as ArcGIS or QGIS.

3.2 Tile Generation and Coordinate Conversion

The conversion chain is:

Geographic coordinates → meters → pixel coordinates → tile coordinates

Key formulas (using the Web‑Mercator projection) are:

x = ⌊ (256 / (2π)) * 2^{zoom}\_level * (lng + π) ⌋ * pixels

y = ⌊ (256 / (2π)) * 2^{zoom}\_level * (π - ln[tan(π/4 + lat/2)]) ⌋ * pixels

Python examples:

# Geographic to meter
import math
def LatLongToMeterXY(lng, lat):
    circumferenceHalf = math.pi * 2 * 6378137 / 2.0
    meterX = lng * circumferenceHalf / 180
    temp = math.log(math.tan((90 + lat) * (math.pi / 360.0))) / (math.pi / 180)
    meterY = circumferenceHalf * temp / 180
    return meterX, meterY

# Meter to pixel
def metersToPixelXY(meterX, meterY, zoom, tileSize=256):
    circumferenceHalf = math.pi * 2 * 6378137 / 2.0
    resolution = math.pi * 2 * 6378137 / (tileSize * 2**zoom)
    pixelX = (meterX + circumferenceHalf) / resolution
    pixelY = (meterY + circumferenceHalf) / resolution
    return pixelX, pixelY

Tile indices are obtained by integer division of pixel coordinates by the tile size:

tileX = floor(pixelX / tileSize)
 tileY = floor(pixelY / tileSize)

Conversion back to geographic coordinates is also provided.

3.3 Tile Distribution

Tiles are stored in a hierarchical directory structure (z/x/y.png) and served via static file servers or CDNs. Multiple sub‑domains (e.g., a.tile.openstreetmap.org) are used to increase parallel download capacity.

3.4 Tile Rendering in Leaflet

The following Leaflet example demonstrates how to create a custom grid layer that calculates tile bounds, loads OSM tiles, and draws diagnostic information on a canvas.

<html>
<head>
  <title>Tile Principles - OSM</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <style>
    body,html,#map{height:100%;margin:0;padding:0;}
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map = new L.Map('map',{center:[40,116],zoom:17});
    var tiles = new L.GridLayer();
    tiles.createTile = function(coords){
      var tile = L.DomUtil.create('canvas','leaflet-tile');
      var ctx = tile.getContext('2d');
      var size = this.getTileSize();
      tile.width = size.x; tile.height = size.y;
      var nwPoint = coords.scaleBy(size);
      var nw = map.unproject(nwPoint,coords.z);
      var seCoords = new L.Point(coords.x+1,coords.y+1); seCoords.z = coords.z;
      var sePoint = seCoords.scaleBy(size);
      var se = map.unproject(sePoint,coords.z);
      var img = new Image();
      var subdomains = ['a','b','c'];
      var index = Math.abs(coords.x+coords.y) % subdomains.length;
      img.src = 'http://' + subdomains[index] + '.tile.openstreetmap.org/' + coords.z + '/' + coords.x + '/' + coords.y + '.png';
      ctx.drawImage(img,0,0,size.x,size.y);
      // draw debug info ...
      return tile;
    };
    tiles.addTo(map);
  </script>
</body>
</html>

4. Conclusion

Understanding tile map services, their standards, projection mathematics, and rendering pipelines equips developers to troubleshoot and optimise GIS applications, turning theoretical knowledge into practical, high‑performance map solutions.

Projection Leaflet Map Tiles tile map service TMS Web GIS WMTS

Written by

Sohu Tech Products

A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.