A primer on map tilingInspecting Google’s tile serviceFrom satellite imagery to roadmap tiles and backFrom artifacts to overlaysNative data layersIn this chapter →
Originally, web maps were displayed as a single image, which made it difficult to zoom in/out or pan across the map without significant distortion or loss of detail.
Today, map tiling is a fundamental part of most web mapping platforms, including Google Maps. By breaking Google Maps into small, standardized tiles of 256 × 256px, the map canvas can be loaded on demand and displayed quickly at different scales. This allows users to zoom in and out without losing detail or experiencing lag time.
In addition, map tiling has made it possible to overlay other types of data on top of maps, such as traffic updates, weather data, and satellite imagery. This has opened up new possibilities for using maps as a tool for visualizing and analyzing complex datasets.
When you load a raster-based map and inspect the container’s HTML deeply enough, you’ll see that your Google Map is indeed a set of roadmap image tiles elegantly stitched together:
These images were generated on Google’s servers based on your API key, map ID and styling definitions. You can use the Network Dev Tools to explore the underlying requests:
As you pan the map around, more tiles will be loaded.
As you switch from the
roadmap to the
satellite map type with the Network Dev Tools still open, you’ll notice something peculiar — the raw satellite tile is overlaid with a transparent “labels” tile: