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 = await VersaTilesStyle.satellite({ overlay: false });

Note the await: unlike colorful() and friends, satellite() fetches the imagery's TileJSON first, so it can pick up the correct zoom range and attribution instead of hard-coding them. That is also why this example uses <script type="module"> — top-level await only works in modules.