openlayers: simplify down to single index.js [#3]

openlayers/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ol-pmtiles",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ol-pmtiles",
-      "version": "0.0.2",
+      "version": "0.0.3",
       "license": "BSD-3-Clause",
       "dependencies": {
         "pmtiles": "^2.7.0"

openlayers/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ol-pmtiles",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "PMTiles sources for OpenLayers",
   "type": "module",
   "main": "src/index.js",
   "files": [
-    "src/*"
+    "src/index.js"
   ],
   "repository": {
     "type": "git",

openlayers/src/PMTilesRasterSource.js

@@ -1,38 +0,0 @@
-import DataTile from "ol/source/DataTile";
-import * as pmtiles from "pmtiles";
-
-class PMTilesRasterSource extends 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;
-    });
-  };
-
-  constructor(options) {
-    super({
-      state: "loading",
-      attributions: options.attributions,
-      tileSize: options.tileSize,
-    });
-
-    const p = new pmtiles.PMTiles(options.url);
-    p.getHeader().then((h) => {
-      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);
-        URL.revokeObjectURL(src);
-        return image;
-      });
-      this.setState("ready");
-    });
-  }
-}
-
-export default PMTilesRasterSource;

openlayers/src/PMTilesVectorSource.js

@@ -1,53 +0,0 @@
-import VectorTile from "ol/source/VectorTile";
-import TileState from "ol/TileState";
-import { MVT } from "ol/format";
-import * as pmtiles from "pmtiles";
-
-class PMTilesVectorSource extends 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];
-
-    tile.setLoader((extent, resolution, projection) => {
-      tile.setState(TileState.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(TileState.LOADED);
-        } else {
-          tile.setFeatures([]);
-          tile.setState(TileState.EMPTY);
-        } // TODO error state
-      });
-    });
-  };
-
-  constructor(options) {
-    super({
-      state: "loading",
-      url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
-      format: new MVT(),
-      attributions: options.attributions,
-    });
-
-    this._p = new pmtiles.PMTiles(options.url);
-    this._p.getHeader().then((h) => {
-      this.tileGrid.minZoom = h.minZoom;
-      this.tileGrid.maxZoom = h.maxZoom;
-      this.setTileLoadFunction(this.tileLoadFunction);
-      this.setState("ready");
-    });
-  }
-}
-
-export default PMTilesVectorSource;

openlayers/src/index.js

@@ -1,2 +1,95 @@
-export { default as PMTilesRasterSource } from './PMTilesRasterSource.js';
+import DataTile from "ol/source/DataTile";
-export { default as PMTilesVectorSource } from './PMTilesVectorSource.js';
+import VectorTile from "ol/source/VectorTile";
+import TileState from "ol/TileState";
+import { MVT } from "ol/format";
+import * as pmtiles from "pmtiles";
+
+export class PMTilesRasterSource extends 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;
+    });
+  };
+
+  constructor(options) {
+    super({
+      ...options,
+      ...{
+        state: "loading",
+      },
+    });
+
+    const p = new pmtiles.PMTiles(options.url);
+    p.getHeader().then((h) => {
+      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 src = URL.createObjectURL(new Blob([response.data]));
+        const image = await this.loadImage(src);
+        URL.revokeObjectURL(src);
+        return image;
+      });
+      this.setState("ready");
+    });
+  }
+}
+
+export class PMTilesVectorSource extends 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];
+
+    tile.setLoader((extent, resolution, projection) => {
+      tile.setState(TileState.LOADING);
+      this.pmtiles_
+        .getZxy(z, x, y)
+        .then((tile_result) => {
+          if (tile_result) {
+            const format = tile.getFormat();
+            tile.setFeatures(
+              format.readFeatures(tile_result.data.buffer, {
+                extent: extent,
+                featureProjection: projection,
+              })
+            );
+            tile.setState(TileState.LOADED);
+          } else {
+            tile.setFeatures([]);
+            tile.setState(TileState.EMPTY);
+          }
+        })
+        .catch((err) => {
+          tile.setFeatures([]);
+          tile.setState(TileState.ERROR);
+        });
+    });
+  };
+
+  constructor(options) {
+    super({
+      ...options,
+      ...{
+        state: "loading",
+        url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
+        format: new MVT(),
+      },
+    });
+
+    this.pmtiles_ = new pmtiles.PMTiles(options.url);
+    this.pmtiles_.getHeader().then((h) => {
+      this.tileGrid.minZoom = h.minZoom;
+      this.tileGrid.maxZoom = h.maxZoom;
+      this.setTileLoadFunction(this.tileLoadFunction);
+      this.setState("ready");
+    });
+  }
+}