diff --git a/js/examples/leaflet.html b/js/examples/leaflet.html
index d4e7827..de6dfe1 100644
--- a/js/examples/leaflet.html
+++ b/js/examples/leaflet.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
         <script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
-        <script src="https://unpkg.com/pmtiles@2.3.0/dist/index.js"></script>
+        <script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
         <style>
             body, #map {
                 height:100vh;
diff --git a/js/examples/maplibre.html b/js/examples/maplibre.html
index 693e526..4fa41c2 100644
--- a/js/examples/maplibre.html
+++ b/js/examples/maplibre.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
-        <script src="https://unpkg.com/pmtiles@2.3.0/dist/index.js"></script>
+        <script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
         <style>
             body {
                 margin: 0;
@@ -21,7 +21,7 @@
             let protocol = new pmtiles.Protocol();
             maplibregl.addProtocol("pmtiles",protocol.tile);
 
-            let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";
+            let PMTILES_URL = "protomaps(vector)ODbL_firenze.pmtiles";
 
             const p = new pmtiles.PMTiles(PMTILES_URL)
 
diff --git a/js/examples/openlayers.html b/js/examples/openlayers.html
new file mode 100644
index 0000000..c53f80d
--- /dev/null
+++ b/js/examples/openlayers.html
@@ -0,0 +1,88 @@
+<html>
+    <head>
+        <title>PMTiles OpenLayers Example</title>
+        <meta charset="utf-8"/>
+        <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
+        <script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
+        <style>
+            body, #map {
+                height:100vh;
+                margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script type="text/javascript">
+            class OLPMTilesSource {
+              constructor(url) {
+                  this._url = url;
+                  this._p = new pmtiles.PMTiles(url)
+              }
+
+              url = () => {
+                return "pmtiles://" + this._url + "/{z}/{x}/{y}";
+              }
+
+              tileLoadFunction = (tile,url) => {
+                // the URL construction is done internally by OL, so we need to parse it 
+                // back out here using a hacky regex
+                const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
+                const result = url.match(re);
+                const z = +result[2];
+                const x = +result[3];
+                const y = +result[4];
+
+                tile.setLoader((extent, resolution, projection) => {
+                  this._p.getZxy(z,x,y).then((result) => {
+                    if (result) {
+                      const format = tile.getFormat();
+                      const features = format.readFeatures(result.data.buffer, {
+                        extent: extent,
+                        featureProjection: projection
+                      });
+                      tile.setFeatures(features);
+                    }
+                  });
+                }); 
+              }
+            }
+
+            const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/us-west/nz-buildings-v3.pmtiles");
+
+            const country = new ol.style.Style({
+              stroke: new ol.style.Stroke({
+                color: 'gray',
+                width: 1,
+              }),
+              fill: new ol.style.Fill({
+                color: 'rgba(20,20,20,0.9)',
+              }),
+            });
+
+            const vtLayer = new ol.layer.VectorTile({
+              declutter: true,
+              source: new ol.source.VectorTile({
+                attributions:["© Land Information New Zealand"],
+                maxZoom: 15, // this could come from the PMTiles header (async)
+                format: new ol.format.MVT(), // this could come from the PMTiles header (async)
+                url:source.url(),
+                tileLoadFunction: source.tileLoadFunction
+              }),
+              style: country,
+            });
+
+            ol.proj.useGeographic();
+            const map = new ol.Map({
+              layers: [vtLayer],
+              target: 'map',
+              view: new ol.View({
+                center: [172.606201,-43.556510],
+                zoom: 7,
+                multiWorld: true,
+              }),
+            });
+        </script>
+    </body>
+</html>
