Skip to content

MapLibre GL

MapLibre GL is an open-source library for building interactive vector and raster maps with WebGL. MapLibre GL can display raster tile layers from ReadyMap using a custom raster source.

Note

ReadyMap provides tiles using the Tile Map Service specification which inverts the Y coordinate from standard XYZ tiling. MapLibre GL expects standard XYZ tiles, so we need to flip the Y coordinate in the tile URL.

Here is a complete example of loading a ReadyMap TMS layer in MapLibre GL JS:

<!DOCTYPE html>
<html>

<head>
    <title>MapLibre GL ReadyMap</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css" rel="stylesheet" />

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        const map = new maplibregl.Map({
            container: 'map',
            style: {
                version: 8,
                sources: {
                    'readymap': {
                        type: 'raster',
                        tiles: [ 'https://readymap.org/readymap/tiles/1.0.0/158/{z}/{x}/{y}' ],
                        tileSize: 256,
                        scheme: 'tms'
                    }
                },
                layers: [
                    {
                        id: 'readymap',
                        type: 'raster',
                        source: 'readymap',
                        minzoom: 0,
                        maxzoom: 9
                    }
                ],
                projection: { type : 'globe' }
            },
            center: [0, 0],
            zoom: 2
        });
    </script>

</body>

</html>