bug:fix missing mapbox.style

am2222 · Mar 6, 2024 · f0ae728 · f0ae728
1 parent f81cbcc
commit f0ae728
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -4,11 +4,43 @@
 
 Add PmTiles support to mapbox
 
-
 # Usage
 
 ## ESM Module
 
+```js
+import mapboxgl from "mapbox-gl";
+
+import { PmTilesSource } from "mapbox-pmtiles";
+//Define custom source
+mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);
+
+map.on("load", () => {
+
+    const PMTILES_URL =
+    "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
+
+    map.addSource("pmTileSourceName", {
+    type: PmTilesSource.SOURCE_TYPE, //Add this line
+    url: PMTILES_URL,
+    maxzoom: 10,
+    });
+
+    map.current.showTileBoundaries = true;
+    map.current.addLayer({
+        id: "places",
+        source: "pmTileSourceName",
+        "source-layer": "places",
+        type: "circle",
+        paint: {
+            "circle-color": "steelblue",
+        },
+        maxzoom: 14,
+    });
+});
+
+```
+
 ## JSDeliver
 
 ```html
@@ -18,6 +50,4 @@ import mapboxPmtiles from 'https://cdn.jsdelivr.net/npm/mapbox-pmtiles/+esm'
 </script>
 
 
-
 ```
-
diff --git a/src/index.ts b/src/index.ts
@@ -137,7 +137,7 @@ export const PmTilesSource = class PmTileSourceImpl extends VectorTileSourceImpl
     maxTileCacheSize: number | undefined;
     promoteId: string | undefined;
     type: string = 'vector';
-    fire: Function | undefined;
+    fire!: Function;
     scope: string | undefined;
     dispatcher;
     reparseOverscaled: boolean;
@@ -165,9 +165,11 @@ export const PmTilesSource = class PmTileSourceImpl extends VectorTileSourceImpl
         this._dataType = 'vector';
         this.dispatcher = dispatcher;
         this._implementation = implementation;
+        if (!this._implementation) {
+            this.fire(new ErrorEvent(new Error(`Missing implementation for ${this.id} custom source`)));
+        }
 
         const { url } = implementation;
-        this.setEventedParent(eventedParent);
 
         this.reparseOverscaled = true;
         this.scheme = 'zxy';
@@ -186,9 +188,7 @@ export const PmTilesSource = class PmTileSourceImpl extends VectorTileSourceImpl
         this._protocol.add(p);
         this._instance = p;
 
-        if (!this._implementation) {
-            this.fire?.call(new ErrorEvent(new Error(`Missing implementation for ${this.id} custom source`)));
-        }
+
 
         // if (this._implementation.bounds) {
         //     this.tileBounds = new TileBounds(this._implementation.bounds, this.minzoom, this.maxzoom);
@@ -201,7 +201,7 @@ export const PmTilesSource = class PmTileSourceImpl extends VectorTileSourceImpl
     }
     load(callback?: Callback<void>) {
         this._loaded = false;
-        this.fire?.call(new Event("dataloading", { dataType: "source" }));
+        this.fire(new Event("dataloading", { dataType: "source" }));
 
         this._tileJSONRequest = this._instance
             .getMetadata()
@@ -225,15 +225,15 @@ export const PmTilesSource = class PmTileSourceImpl extends VectorTileSourceImpl
                 // `content` is included here to prevent a race condition where `Style#updateSources` is called
                 // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
                 // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
-                this.fire?.call(
+                this.fire(
                     new Event("data", { dataType: "source", sourceDataType: "metadata" })
                 );
-                this.fire?.call(
+                this.fire(
                     new Event("data", { dataType: "source", sourceDataType: "content" })
                 );
             })
             .catch((err: any) => {
-                this.fire?.call(new ErrorEvent(err));
+                this.fire(new ErrorEvent(err));
                 if (callback) callback(err);
             });
     }