diff --git a/js/examples/openlayers.html b/js/examples/openlayers.html
index d559de6..e26ff59 100644
--- a/js/examples/openlayers.html
+++ b/js/examples/openlayers.html
@@ -2,8 +2,8 @@
     <head>
         <title>PMTiles OpenLayers Vector 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://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
         <script src="https://unpkg.com/pmtiles@2.7.2/dist/index.js"></script>
         <style>
             body, #map {
@@ -15,79 +15,80 @@
     <body>
         <div id="map"></div>
         <script type="text/javascript">
-            class OLPMTilesSource {
-              constructor(url) {
-                  this._url = url;
-                  this._p = new pmtiles.PMTiles(url)
-              }
+          class VectorPMTilesSource extends ol.source.VectorTile {
+            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];
 
-              url = () => {
-                return "pmtiles://" + this._url + "/{z}/{x}/{y}";
-              }
-
-              vectorTileLoadFunction = (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) => {
-                  tile.setState(1); // LOADING
-                  this._p.getZxy(z,x,y).then((tile_result) => {
-                    if (tile_result) {
-                      const format = tile.getFormat();
-                      const features = format.readFeatures(tile_result.data.buffer, {
-                        extent: extent,
-                        featureProjection: projection
-                      });
-                      tile.setFeatures(features);
-                      tile.setState(2); // LOADED
-                    } else {
-                      tile.setFeatures([]);
-                      tile.setState(4); // EMPTY
-                    }
-                  });
-                }); 
-              }
+              tile.setLoader((extent, resolution, projection) => {
+                tile.setState(1); // LOADING
+                this._p.getZxy(z,x,y).then((tile_result) => {
+                  if (tile_result) {
+                    const format = tile.getFormat();
+                    const features = format.readFeatures(tile_result.data.buffer, {
+                      extent: extent,
+                      featureProjection: projection
+                    });
+                    tile.setFeatures(features);
+                    tile.setState(2); // LOADED
+                  } else {
+                    tile.setFeatures([]);
+                    tile.setState(4); // EMPTY
+                  }
+                });
+              });
             }
 
-            const source = new OLPMTilesSource("https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles");
+            constructor(options) {
+              super({
+                state:"loading",
+                url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
+                format: new ol.format.MVT(),
+                attributions: options.attributions
+              });
 
-            const style = new ol.style.Style({
+              this._p = new pmtiles.PMTiles(options.url);
+              this._p.getHeader().then(h => {
+                // TODO: set extent based on header
+                this.tileGrid.minZoom = h.minZoom;
+                this.tileGrid.maxZoom = h.maxZoom;
+                this.setTileLoadFunction(this.tileLoadFunction);
+                this.setState("ready");
+              });
+            }
+          }
+
+          const vectorLayer = new ol.layer.VectorTile({
+            declutter: true,
+            source: new VectorPMTilesSource({
+              url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
+              attributions: ["© Land Information New Zealand"]
+            }),
+            style: 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: 14, // 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.vectorTileLoadFunction
-              }),
-              style: style,
-            });
-
-            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,
-              }),
-            });
+          ol.proj.useGeographic();
+          const map = new ol.Map({
+            layers: [vectorLayer],
+            target: 'map',
+            view: new ol.View({
+              center: [172.606201,-43.556510],
+              zoom: 7
+            }),
+          });
         </script>
     </body>
 </html>
diff --git a/js/examples/openlayers_raster.html b/js/examples/openlayers_raster.html
index c763401..71bf5ad 100644
--- a/js/examples/openlayers_raster.html
+++ b/js/examples/openlayers_raster.html
@@ -2,8 +2,8 @@
     <head>
         <title>PMTiles OpenLayers Raster 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://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
         <script src="https://unpkg.com/pmtiles@2.7.2/dist/index.js"></script>
         <style>
             body, #map {
@@ -15,61 +15,59 @@
     <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}";
-              }
-
-              rasterTileLoadFunction = (tile,url) => {
-                tile.setState(1); // LOADING
-                // 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];
-
-                this._p.getZxy(z,x,y).then((tile_result) => {
-                  if (tile_result) {
-                    const blob = new Blob([tile_result.data]);
-                    const imageUrl = window.URL.createObjectURL(blob);
-                    tile.getImage().src = imageUrl;
-                    tile.setState(2); // LOADED
-                  } else {
-                    tile.setState(4); // EMPTY
-                  }
-                });
-              }
+          class RasterPMTilesSource extends ol.source.DataTile {
+            loadImage = (src) => {
+              return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.addEventListener('load', () => resolve(img));
+                img.addEventListener('error', () => reject(new Error('load failed')));
+                img.src = src;
+              });
             }
 
-            const source = new OLPMTilesSource("https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles");
+            constructor(options) {
+              super({
+                state: "loading",
+                attributions: options.attributions
+              });
 
-            const rasterLayer = new ol.layer.Tile({
-              source: new ol.source.XYZ({
-                attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
-                url:source.url(),
-                tileLoadFunction: source.rasterTileLoadFunction,
-                tileSize:[512,512],
-                maxZoom:9 // this could come from the PMTiles header (async)
+              const p = new pmtiles.PMTiles(options.url);
+              p.getHeader().then(h => {
+                // TODO: set extent based on header
+                this.tileGrid.minZoom = h.minZoom;
+                this.tileGrid.maxZoom = h.maxZoom;
+                this.setLoader(async (z,x,y) => {
+                  const response = await p.getZxy(z, x, y);
+                  const blob = new Blob([response.data]);
+                  const src = URL.createObjectURL(blob);
+                  const image = await this.loadImage(src);
+                  image.width = 512;
+                  URL.revokeObjectURL(src);
+                  return image;
+                });
+                this.setState("ready");
               })
-            })
+            }
+          }
 
-            ol.proj.useGeographic();
-            const map = new ol.Map({
-              layers: [rasterLayer],
-              target: 'map',
-              view: new ol.View({
-                center: [0,0],
-                zoom: 0,
-                multiWorld: true,
-              }),
-            });
+          // TODO: tile size 512,512
+          const rasterLayer = new ol.layer.WebGLTile({
+            source: new RasterPMTilesSource({
+              url:"https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
+              attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"]
+            })
+          });
+
+          ol.proj.useGeographic();
+          const map = new ol.Map({
+            layers: [rasterLayer],
+            target: 'map',
+            view: new ol.View({
+              center: [0,0],
+              zoom: 0,
+              multiWorld: true
+            }),
+          });
         </script>
     </body>
 </html>
