js/examples/maplibre.html

<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
        <script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
        <style>
            body {
                margin: 0;
            }
            #map {
                height:100%; width:100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            // add the PMTiles plugin to the maplibregl global.
            let protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles", protocol.tile);

            // pmtiles extract https://build.protomaps.com/20240807.pmtiles my_area.pmtiles --bbox=11.221144,43.745121,11.287543,43.789306
            let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";

            const p = new pmtiles.PMTiles(PMTILES_URL);

            // this is so we share one instance across the JS code and the map renderer
            protocol.add(p);

            // we first fetch the header so we can get the center lon, lat of the map.
            p.getHeader().then((h) => {
              const map = new maplibregl.Map({
                container: "map",
                zoom: h.maxZoom - 2,
                center: [h.centerLon, h.centerLat],
                style: {
                  version: 8,
                  sources: {
                    example_source: {
                      type: "vector",
                      // For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
                      // tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
                      // see https://maplibre.org/maplibre-style-spec/sources/#vector
                      url: "pmtiles://" + PMTILES_URL,
                      attribution:
                        '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
                    },
                  },
                  layers: [
                    {
                      id: "water",
                      source: "example_source",
                      "source-layer": "water",
                      type: "fill",
                      paint: {
                        "fill-color": "#80b1d3",
                      },
                    },
                    {
                      id: "buildings",
                      source: "example_source",
                      "source-layer": "buildings",
                      type: "fill",
                      paint: {
                        "fill-color": "#d9d9d9",
                      },
                    },
                    {
                      id: "roads",
                      source: "example_source",
                      "source-layer": "roads",
                      type: "line",
                      paint: {
                        "line-color": "#fc8d62",
                      },
                    },
                    {
                      id: "pois",
                      source: "example_source",
                      "source-layer": "pois",
                      type: "circle",
                      paint: {
                        "circle-color": "#ffffb3",
                      },
                    },
                  ],
                },
              });
              map.showTileBoundaries = true;
            });
        </script>
    </body>
</html>