Skip to content

Commit 80e17a7

Browse files
committed
New article on PMTiles.
1 parent cbb574e commit 80e17a7

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ title: Add custom protocol PMTiles in the Web SDK | Microsoft Azure Maps
33
description: Learn how to Add custom protocol PMTiles using the Web SDK.
44
author: sinnypan
55
ms.author: sipa
6-
ms.date: 10/15/2024
6+
ms.date: 10/13/2024
77
ms.topic: how-to
88
ms.service: azure-maps
99
ms.subservice: web-sdk
1010
---
1111

12-
# Add custom protocols
12+
# Add custom protocol PMTiles
1313

14-
The Azure Maps Web SDK supports custom protocols such as [PMTiles], a unique archive format designed to efficiently store and deliver tiled data. Eabling this protocol in the Azure Maps Web SDK alows the compression of an entire tile dataset into a single file, improving portability. This protocol is particularly suitable for cloud-based storage solutions.
14+
The Azure Maps Web SDK supports custom protocols such as [PMTiles]. The `pmtiles://` protocol is used to reference PMTiles archives, which are single-file formats for storing tiled data such as vector and raster maps. This protocol allows Azure Maps to access specific tiles within a PMTiles archive using an HTTP request, fetching only the necessary data on demand.
1515

1616
## Add custom protocol
1717

1818
By using the `addProtocol` function, which registers a callback triggered before any AJAX request made by the library, you can intercept, modify, and return the request for further processing and rendering. This enables the implementation of a custom callback function to load resources when a URL starts with the designated custom schema.
1919

20-
To start, add a reference to the protocol. The following example references the `pmtiles` library:
20+
The first step is to add a reference to the protocol. The following example references the `pmtiles` library:
2121

2222
```html
2323
<script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
2424
```
2525

26-
Then, initialize the MapLibre PMTiles protocol.
26+
Next, initialize the MapLibre PMTiles protocol.
2727

2828
```js
2929
//Initialize the plugin.
@@ -44,19 +44,16 @@ Then, initialize the MapLibre PMTiles protocol.
4444

4545
## Add PMTiles Protocol
4646

47-
To add the PMTiles protocal, hook the data source with specified protocol url schema. This sample leverages the [Overture] building dataset to enrich building data on top of the basemap.
47+
To add the PMTiles protocol, hook the data source with the specified protocol URL schema. The following sample uses the [Overture] building dataset to add building data over the basemap.
4848

4949
```js
5050
const PMTILES_URL = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2024-07-22/buildings.pmtiles";
5151
protocol.add(new pmtiles.PMTiles(PMTILES_URL));
5252
```
5353

54-
## Add PMTiles as Map Source
54+
## Add PMTiles as a Map Source
5555

56-
PMTiles are added as a map source during the map event. Once added, the specified URL schema is supported and recognized by the Azure Maps Web SDK. In the following sample, the PMTiles URL is added as a `VectorTileSource`.
57-
58-
> [!NOTE]
59-
> Using the `pmtiles://` protocol automatically creates a `minzoom` and `maxzoom` property for the source.
56+
PMTiles are added as a map source during the map event. Once added, the specified URL schema is available to the Azure Maps Web SDK. In the following sample, the PMTiles URL is added as a `VectorTileSource`.
6057

6158
```js
6259
//Add the source to the map.
@@ -68,9 +65,14 @@ PMTiles are added as a map source during the map event. Once added, the specifie
6865
);
6966
```
7067

68+
> [!NOTE]
69+
> Using the `pmtiles://` protocol automatically creates the `minzoom` and `maxzoom` properties for the source.
70+
7171
## Enrich Map with Overture data
7272

73-
Overture had been provided unified, comprehensive [data schema] with different themes. The following sample leverages the building theme's properties (e.g., building type, building height) to demonstrate building extrusion and differentiate building categories on the basemap, rather than just showing building footprints.
73+
Overture provides a unified and comprehensive [data schema] designed to organize and structure geospatial data effectively. This schema is divided into different themes, each representing a specific type of geospatial information.
74+
75+
The following sample uses the building theme's properties (for example, building type and height) to demonstrate building extrusion and differentiate between building categories on the basemap, rather than just showing building footprints.
7476

7577
```js
7678
//Create a polygon extrusion layer.
@@ -116,7 +118,7 @@ Overture had been provided unified, comprehensive [data schema] with different t
116118
);
117119
```
118120

119-
The following image shows a screenshot displaying the extrusion of buildings by different types near Central Park, New York City.
121+
The following image shows a screenshot displaying the extrusion of buildings of different types near Central Park in New York City.
120122

121123
:::image type="content" source="media/add-custom-protocol-pmtiles/pmtiles-building.png" lightbox="media/add-custom-protocol-pmtiles/pmtiles-building.png" alt-text="A screenshot demonstrating the custom protocol pmtiles.":::
122124

0 commit comments

Comments
 (0)