Playground: Satellite Imagery

How to show satellite imagery with the map's labels on top.

Everything on a VersaTiles basemap is drawn from vector tiles: the browser receives geometries and attributes and renders them according to the style. Satellite imagery cannot work that way — it is photography, so it arrives as ready-made images. In MapLibre GL JS those are handled by a raster source and drawn by a raster layer.

You don't have to wire that up yourself: versatiles-style ships a satellite() function that returns a finished style, that even includes a OSM vector overlay for labels and streets. If you don't need the overlay, you can disable it like this:

const style = VersaTilesStyle.satellite({
	urls: { base: 'https://tiles.versatiles.org' },
	osmOverlay: false,
});

As with osm(), the style still has to go through inlineSources() before MapLibre sees it: that fetches the imagery's TileJSON, so the source ends up with absolute tile URLs, the correct zoom range and the attribution instead of hard-coded ones. Since that returns a Promise, this example uses <script type="module"> — top-level await only works in modules.