Vector and raster are the two main formats used to serve interactive map tiles. Raster tiles are PNG or JPG images stitched into a grid. Vector tiles contain a mathematical description of geometry plus structured data about each feature, rendered on the client. The Stadia Maps Map Tiles API serves both formats, so this comparison is not a pitch for one over the other. It's an honest walkthrough of the trade-offs.

Key Takeaways

  • Raster tiles are PNG or JPG images. Vector tiles are structured data, rendered client-side.
  • Vector tiles allow dynamic styling (colors, language, layer visibility, 3D perspective). Raster tiles do not.
  • According to Stadia Maps' Switching to Vector Tiles guide, users switching to vector make approximately 60% fewer tile requests on average.
  • Raster tiles are battle-tested and easy to render on older devices and simpler libraries.
  • Stadia Maps serves both formats and contributes to MapLibre. Co-founder Luke Seelenbinder serves on MapLibre's governing board.

What Are Raster Map Tiles?

Raster map tiles are PNG or JPG images that get stitched together in a grid to form a complete interactive map. When you zoom in and out of a map and see little blank squares filling in like a mosaic, those are tiles.

The Stadia Maps Raster Map Tiles API serves all of Stadia's house styles as PNG raster tiles at 256×256 and 512×512 pixel sizes. Raster tiles are supported up to zoom 20 for most styles (Stamen Watercolor is the exception at zoom 16).

Raster advantages (from the Stadia Maps guide):

  • Simplicity. Just about every device can render a PNG or JPG image, and it is easy to build a performant renderer around them. Raster tiles do not require any other resources (fonts, icons) or special client-side logic.
  • Specificity. For minimalist styles, raster tiles can be more bandwidth-efficient because they only contain the raw visible pixels.

Raster limitations (from the Stadia Maps guide):

  • Inflexibility. You cannot change much about raster tiles. Hiding a layer, changing the language of labels, or altering the appearance of the tiles is not possible client-side.
  • Scalability. Raster map tiles cannot be scaled up and down. High-DPI displays need 4× the pixels, and zooming produces temporary blur until the new tiles load.

What Are Vector Map Tiles?

Vector map tiles contain a mathematical description of geometry and structured data about each feature on the map. Rather than pre-rendered pixels, the tile carries the raw data and the client renders it in real time.

The Stadia Maps Vector Map Tiles API serves tiles in the widely-adopted Mapbox Vector Tile (MVT) format, with a schema compatible with OpenMapTiles. Stadia Maps supports zoom levels 0 through 14 for vector tiles, with over-zooming from the z14 tile beyond that. Stadia Maps recommends the MapLibre GL JS and MapLibre Native renderers, but the tiles work in any MVT-compatible renderer.

Vector advantages (from the Stadia Maps guide):

  • Flexibility. The actual data is preserved in the tile. You can change the language of text labels, change color scheme dynamically, switch styles based on time of day, or add 3D perspective.
  • Scalability. Vector shapes scale up and down smoothly. Zooming feels continuous rather than stepped, and high-DPI displays get sharp output without extra bandwidth.
  • Cost. Vector tiles cover a larger area per tile. Stadia's guide reports users switching to vector make approximately 60% fewer tile requests on average.

Vector limitations (from the Stadia Maps guide):

  • Complexity. Tiles render client-side, which may create performance concerns for older or embedded applications. Initial map load involves more network requests for fonts, icons, and style resources.
  • Size. For applications that only need a low level of detail and don't use 3D features, vector tiles can weigh slightly more. This is offset because zooming past level 14 uses the information already in the z14 tile.

Vector vs. Raster: Which Should You Use?

The Stadia Maps Switching to Vector Tiles guide summarizes the choice directly: "Vector tiles offer greater flexibility, look great on any screen, and typically reduce costs by around 60%. However, if your application is targeting older devices or doesn't need a high level of detail (for example, our Alidade Smooth and Alidade Smooth Dark styles), raster tiles are not necessarily a bad option."

Choose vector when you need:

  • Client-side style customization or language switching
  • 3D perspective, custom camera angles, or dynamic theming
  • Lower total tile requests at scale
  • Sharp rendering on high-DPI displays without paying 4× bandwidth

Choose raster when you need:

  • Support for older devices or renderers that don't understand MVT
  • A minimalist style where bandwidth per tile is very small
  • The absolute simplest integration path in Leaflet, WordPress, or a static site
  • Static images (for those, the Stadia Maps Static Maps API is a different product, tailored for embedding images in emails or apps without a JS runtime)

How Do You Serve Vector and Raster Tiles with Stadia Maps?

Both formats use straightforward URL patterns. Replace <style> with any of the Stadia Maps map styles.

Vector tile URL formats:

https://tiles.stadiamaps.com/data/openmaptiles.json
https://tiles.stadiamaps.com/data/openmaptiles/{z}/{x}/{y}.pbf

Raster tile URL format:

https://tiles.stadiamaps.com/tiles/<style>/{z}/{x}/{y}{r}.png

The {r} placeholder handles HiDPI ("retina") display support. Replace it with @2x for 2× scaled images, or drop it for 256×256 output.

EU-only endpoints are available for both formats at tiles-eu.stadiamaps.com. See the EU Endpoints docs for details.

Authentication uses domain-based auth for browser applications or an API key for backend and mobile applications. Full details in the Authentication guide.

How to Switch from Raster to Vector Tiles

The Switching to Vector Tiles guide walks through the common migration paths.

Where Vector vs. Raster Tile Comparisons Fall Short

A few things worth knowing before you take any comparison table (this one included) as absolute.

  • "60% fewer tile requests" is an average, not a guarantee. The actual reduction depends on the level of detail, the size of the viewport, and how much users pan and zoom. The Stadia Maps guide reports it as an average across users who switched.
  • Vector isn't universally faster. Initial map load can involve more network requests for fonts, icons, and style resources. First-paint may feel slower even when total data is lower.
  • Not every renderer handles MVT with the same fidelity. The Stadia Vector docs explicitly note that OpenLayers rendering "isn't quite as powerful as MapLibre GL JS, but it's the quickest migration path to most of the benefits." Same idea for the Leaflet plugin.
  • Older devices matter. If a meaningful part of your user base runs older embedded browsers or low-power devices, raster is often the safer default. The Stadia guide calls this out explicitly.
  • Style customization has its own learning curve. The flexibility of vector tiles only pays off if you actually build styles. If you never customize, the raster experience of Stadia's house styles is just as good visually.

Common Use Cases for Vector and Raster Map Tiles

Where each format shines, drawn from the Stadia Maps docs and product page.

Vector tile use cases:

  • Interactive web and mobile apps that need custom styling, language switching, or 3D perspective
  • Marker clustering, polyline overlays, and polygon overlays in MapLibre GL JS
  • Data visualization on top of a customizable basemap
  • Applications where reducing total tile requests matters at scale

Raster tile use cases:

  • WordPress sites and CMS integrations via the Leaflet or Mapster plugins
  • Older devices or environments that cannot run a WebGL-based renderer
  • QGIS and other GIS tools that consume raster XYZ tile services
  • Minimalist styles like Alidade Smooth where bandwidth per tile is already very small

Frequently Asked Questions

What is the difference between vector and raster map tiles?

Raster map tiles are PNG or JPG images that get stitched together in a grid. Vector map tiles contain a mathematical description of the geometry plus structured data about each feature on the map, and get rendered client-side. Vector tiles allow dynamic styling, look sharp at any resolution, and typically reduce tile requests by around 60%. Raster tiles are simpler to render and battle-tested across older devices and rendering libraries.

Which is better, vector or raster map tiles?

According to the Stadia Maps Switching to Vector Tiles guide: "Vector tiles offer greater flexibility, look great on any screen, and typically reduce costs by around 60%. However, if your application is targeting older devices or doesn't need a high level of detail, raster tiles are not necessarily a bad option."

Do vector map tiles cost less than raster map tiles?

On the Stadia Maps API, both vector and raster tile requests are billed the same way. Vector typically requires fewer total requests to render a comparable map. The Switching to Vector Tiles guide reports users switching to vector make approximately 60% fewer tile requests on average.

What format are Stadia Maps vector tiles served in?

Stadia Maps vector tiles are distributed in the widely-adopted Mapbox Vector Tile (MVT) format, with a schema compatible with OpenMapTiles. They render in MapLibre GL JS, MapLibre Native, Leaflet (via maplibre-gl-leaflet), OpenLayers (via ol-mapbox-style), and other MVT-compatible renderers.

Can I use vector tiles with Leaflet?

Yes. Leaflet can render Stadia Maps vector tiles via the maplibre-gl-leaflet plugin. You swap L.tileLayer for L.maplibreGL and point at a Stadia Maps vector style URL. This is the quickest migration path from raster Leaflet to vector without switching frameworks. Full walkthrough in the Vector Tiles with Leaflet tutorial.

Where to Go Next

From the Blog

More on maps and rendering from the Stadia Maps blog:

Maps