Skip to content

Leaflet

Leaflet can display image layers from ReadyMap using the L.tileLayer function.

Note

ReadyMap can produce layers in both global-geodetic and spherical-mercator tiling schemes If you are loading a global-geodetic layer in Leaflet you must set the crs of the map object to L.CRS.EPSG4326

Here is a complete example of loading a ReadyMap TMS layer in Leaflet 

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet ReadyMap</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style type="text/css">
        #map {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;
        }
    </style>
</head>

<body>

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

    <script>
        var map = L.map('map', {
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.EPSG4326
        });

        L.tileLayer('https://readymap.org/readymap/tiles/1.0.0/7/{z}/{x}/{y}', {
            tms: true
        }).addTo(map);
    </script>

</body>

</html>