A primer on map tiling

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.

<aside> 🔑 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.

</aside>

Inspecting Google’s tile service

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.

<aside> 🕹️ Zoom and move the map around to see annotated tiles in action.

[Inspired by Google’s docs](https://stackblitz.com/edit/tiles-demo-gmapsbook?ctl=1&embed=1&file=map.ts&view=preview)

Inspired by Google’s docs

This demo implements the MapType interface. There’s a more elegant way to overlay custom tiles though — see WebGL, Deck.gl, & CARTO.

</aside>