MapLibre (Map Tiles API)

MapLibre is a popular map rendering library, which can be used to display all our raster maps available using our Map Tiles API.

To use our Map Tiles API with MapLibre you’ll need:

Here’s a code snippet showing how to add our Outdoors map to your site:

<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<div id="map" style="height:300px"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: {
            'version': 8,
            'sources': {
                'raster-tiles': {
                    'type': 'raster',
                    'tiles': [
                        'https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=<insert-your-apikey-here>'
                    ],
                    'tileSize': 256,
                    'attribution':
                        '<a href="https://www.thunderforest.com/" target="_blank">&copy; Thunderforest</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
                }
            },
            'layers': [
                {
                    'id': 'simple-tiles',
                    'type': 'raster',
                    'source': 'raster-tiles',
                    'minzoom': 0,
                    'maxzoom': 22
                }
            ]
        },
        center: [-0.09, 51.505],
        zoom: 5
    });
</script>

A more common use-case is using MapLibre to render client-side vector maps! We have a separate tutorial for using MapLibre with our Vector Styles API

Demo