5. Data Layers & Overlays

🏡 Home 👈 Prev 👉 Next
⚡  GMapsBook.com is crafted by Jozef Sorocin and powered by:
  • g-Xperts (Google Cloud & Business Profile Partner)

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

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:
notion image
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:
notion image
As you pan the map around, more tiles will be loaded.
Zoom and move the map around to see annotated tiles in action.
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.
Tip: you can listen to the tilesloaded event to know when the visible tiles have finished loading:
map.addListener('tilesloaded', () => {
	// proceed with business logic

From satellite imagery to roadmap tiles and back

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:

Already purchased? Sign in here.