From ca1c59d9d302ebd5364b1eb5478fc9eac1607039 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Fri, 18 Feb 2022 11:17:34 +0800
Subject: [PATCH] fix binding this in ProtocolCache; update maplibre examples

---
 examples/maplibre.html          | 3 ++-
 examples/maplibre_zipcodes.html | 3 ++-
 js/pmtiles.ts                   | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/examples/maplibre.html b/examples/maplibre.html
index be73432..be24887 100644
--- a/examples/maplibre.html
+++ b/examples/maplibre.html
@@ -18,7 +18,8 @@
     <body>
         <div id="map"></div>
         <script>
-            pmtiles.addProtocol(maplibregl)
+            let cache = new pmtiles.ProtocolCache();
+            maplibregl.addProtocol("pmtiles",cache.protocol);
             var style = {
                 "version": 8,
                 "sources": {
diff --git a/examples/maplibre_zipcodes.html b/examples/maplibre_zipcodes.html
index 060b26d..8ba654e 100644
--- a/examples/maplibre_zipcodes.html
+++ b/examples/maplibre_zipcodes.html
@@ -31,7 +31,8 @@ tippecanoe -zg --projection=EPSG:4326 --no-tile-compression --no-feature-limit -
 pmtiles-convert cb_2018_us_zcta510_500k_nolimit.mbtiles cb_2018_us_zcta510_500k_nolimit.pmtiles</pre>
         </div>
         <script>
-            pmtiles.addProtocol(maplibregl)
+            let cache = new pmtiles.ProtocolCache();
+            maplibregl.addProtocol("pmtiles",cache.protocol);
             var style = {
                 "version": 8,
                 "sources": {
diff --git a/js/pmtiles.ts b/js/pmtiles.ts
index b32fc84..fc56b52 100644
--- a/js/pmtiles.ts
+++ b/js/pmtiles.ts
@@ -451,7 +451,7 @@ export class ProtocolCache {
     return this.tiles.get(url);
   }
 
-  protocol(params: any, callback: any) {
+  protocol = (params: any, callback: any) => {
     const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
     const result = params.url.match(re);
     const pmtiles_url = result[1];
@@ -495,5 +495,5 @@ export class ProtocolCache {
         cancel();
       },
     };
-  }
+  };
 }
