js/examples/leaflet.html

<html>
    <head>
        <title>PMTiles Leaflet Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
        <script src="https://unpkg.com/pmtiles@4.0.1/dist/pmtiles.js"></script>
        <style>
            body, #map {
                height:100vh;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            const map = L.map("map").setView([0, 0], 0);

            const p = new pmtiles.PMTiles(
              "https://pmtiles.io/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles"
            );
            p.getHeader().then((h) => {
              let layer = pmtiles.leafletRasterLayer(p, {
                maxzoom: h.maxZoom,
                attribution:
                  'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
              });
              layer.addTo(map);
            });
        </script>
    </body>
</html>