Skip to content

Commit 0547e77

Browse files
authored
Update add-custom-protocol-pmtiles.md
* change pmtiles library version to 3.2.0 * simplify `addProtocol` code * remove unnecessary call to `add` * rename map source for clarity
1 parent 0579359 commit 0547e77

File tree

1 file changed

+9
-26
lines changed

1 file changed

+9
-26
lines changed

articles/azure-maps/add-custom-protocol-pmtiles.md

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,45 +20,28 @@ By using the `addProtocol` function, which registers a callback triggered before
2020
The first step is to add a reference to the protocol. The following example references the `pmtiles` library:
2121

2222
```html
23-
<script src="https://unpkg.com/pmtiles@3.0.5/dist/pmtiles.js"></script>
23+
<script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
2424
```
2525

2626
Next, initialize the MapLibre PMTiles protocol.
2727

2828
```js
29-
//Initialize the plugin.
30-
const protocol = new pmtiles.Protocol();
31-
atlas.addProtocol("pmtiles", (request) => {
32-
return new Promise((resolve, reject) => {
33-
const callback = (err, data) => {
34-
if (err) {
35-
reject(err);
36-
} else {
37-
resolve({ data });
38-
}
39-
};
40-
protocol.tile(request, callback);
41-
});
42-
});
43-
```
44-
45-
## Add PMTiles protocol
46-
47-
To add the PMTiles protocol, hook the data source with the specified protocol URI scheme. The following sample uses the [Overture] building dataset to add building data over the basemap.
48-
49-
```js
50-
const PMTILES_URL = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2024-07-22/buildings.pmtiles";
51-
protocol.add(new pmtiles.PMTiles(PMTILES_URL));
29+
//Initialize the plugin.
30+
const protocol = new pmtiles.Protocol();
31+
atlas.addProtocol("pmtiles", protocol.tile);
5232
```
5333

5434
## Add PMTiles as a map source
5535

36+
The following sample uses the [Overture] building dataset to add building data over the basemap.
37+
5638
PMTiles are added as a map source during the map event. Once added, the specified URI scheme is available to the Azure Maps Web SDK. In the following sample, the PMTiles URL is added as a `VectorTileSource`.
5739

5840
```js
41+
const PMTILES_URL = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2024-07-22/buildings.pmtiles";
5942
//Add the source to the map.
6043
map.sources.add(
61-
new atlas.source.VectorTileSource("pmtiles", {
44+
new atlas.source.VectorTileSource("my_source", {
6245
type: "vector",
6346
url: `pmtiles://${PMTILES_URL}`,
6447
})
@@ -77,7 +60,7 @@ The following sample uses the building theme's properties (for example, building
7760
```js
7861
//Create a polygon extrusion layer.
7962
layer = new atlas.layer.PolygonExtrusionLayer(
80-
"pmtiles",
63+
"my_source",
8164
"building",
8265
{
8366
sourceLayer: "building",

0 commit comments

Comments
 (0)