Skip to content

Commit fe711e8

Browse files
committed
updates
1 parent 985d82e commit fe711e8

File tree

1 file changed

+51
-50
lines changed

1 file changed

+51
-50
lines changed

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

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Add custom protocol PMTiles in the Web SDK | Microsoft Azure Maps
3-
description: Learn how to Add custom protocol PMTiles using the Web SDK.
3+
description: Learn how to add custom protocol PMTiles using the Web SDK.
44
author: sinnypan
55
ms.author: sipa
66
ms.date: 10/13/2024
@@ -57,12 +57,12 @@ PMTiles are added as a map source during the map event. Once added, the specifie
5757

5858
```js
5959
//Add the source to the map.
60-
map.sources.add(
61-
new atlas.source.VectorTileSource("pmtiles", {
62-
type: "vector",
63-
url: `pmtiles://${PMTILES_URL}`,
64-
})
65-
);
60+
map.sources.add(
61+
new atlas.source.VectorTileSource("pmtiles", {
62+
type: "vector",
63+
url: `pmtiles://${PMTILES_URL}`,
64+
})
65+
);
6666
```
6767

6868
> [!NOTE]
@@ -76,55 +76,58 @@ The following sample uses the building theme's properties (for example, building
7676

7777
```js
7878
//Create a polygon extrusion layer.
79-
layer = new atlas.layer.PolygonExtrusionLayer(
80-
"pmtiles",
81-
"building",
82-
{
83-
sourceLayer: "building",
84-
height: ["get", "height"],
85-
fillOpacity: 0.5,
86-
fillColor: [
87-
"case",
88-
['==', ['get', 'subtype'], 'agricultural'],
89-
"wheat",
90-
['==', ['get', 'subtype'], 'civic'],
91-
"teal",
92-
['==', ['get', 'subtype'], 'commercial'],
93-
"blue",
94-
['==', ['get', 'subtype'], 'education'],
95-
"aqua",
96-
['==', ['get', 'subtype'], 'entertainment'],
97-
"pink",
98-
['==', ['get', 'subtype'], 'industrial'],
99-
"yellow",
100-
['==', ['get', 'subtype'], 'medical'],
101-
"red",
102-
['==', ['get', 'subtype'], 'military'],
103-
"darkgreen",
104-
['==', ['get', 'subtype'], 'outbuilding'],
105-
"white",
106-
['==', ['get', 'subtype'], 'religious'],
107-
"khaki",
108-
['==', ['get', 'subtype'], 'residential'],
109-
"green",
110-
['==', ['get', 'subtype'], 'service'],
111-
"gold",
112-
['==', ['get', 'subtype'], 'transportation'],
113-
"orange",
114-
"grey",
115-
],
116-
filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
117-
}
118-
);
79+
layer = new atlas.layer.PolygonExtrusionLayer(
80+
"pmtiles",
81+
"building",
82+
{
83+
sourceLayer: "building",
84+
height: ["get", "height"],
85+
fillOpacity: 0.5,
86+
fillColor: [
87+
"case",
88+
['==', ['get', 'subtype'], 'agricultural'],
89+
"wheat",
90+
['==', ['get', 'subtype'], 'civic'],
91+
"teal",
92+
['==', ['get', 'subtype'], 'commercial'],
93+
"blue",
94+
['==', ['get', 'subtype'], 'education'],
95+
"aqua",
96+
['==', ['get', 'subtype'], 'entertainment'],
97+
"pink",
98+
['==', ['get', 'subtype'], 'industrial'],
99+
"yellow",
100+
['==', ['get', 'subtype'], 'medical'],
101+
"red",
102+
['==', ['get', 'subtype'], 'military'],
103+
"darkgreen",
104+
['==', ['get', 'subtype'], 'outbuilding'],
105+
"white",
106+
['==', ['get', 'subtype'], 'religious'],
107+
"khaki",
108+
['==', ['get', 'subtype'], 'residential'],
109+
"green",
110+
['==', ['get', 'subtype'], 'service'],
111+
"gold",
112+
['==', ['get', 'subtype'], 'transportation'],
113+
"orange",
114+
"grey",
115+
],
116+
filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
117+
}
118+
);
119119
```
120120

121121
The following image shows a screenshot displaying the extrusion of buildings of different types near Central Park in New York City.
122122

123123
:::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.":::
124124

125+
<!--
125126
For a fully functional sample with source code, see [Azure Maps Samples GitHub Repo].
126-
127127
For more PMTiles samples, see [Azure Maps Samples].
128+
[Azure Maps Samples]: https://samples.azuremaps.com/?search=pmtiles
129+
[Azure Maps Samples GitHub Repo]: https://github.com/Azure-Samples/AzureMapsCodeSamples/tree/main/Samples
130+
-->
128131

129132
## Next Steps
130133

@@ -137,7 +140,5 @@ The following articles are related to custom protocol PMTiles:
137140
> [Data Driven Style Expressions](data-driven-style-expressions-web-sdk.md)
138141
139142
[PMTiles]: https://docs.protomaps.com/pmtiles
140-
[Azure Maps Samples]: https://samples.azuremaps.com/?search=pmtiles
141-
[Azure Maps Samples GitHub Repo]: https://github.com/Azure-Samples/AzureMapsCodeSamples/tree/main/Samples
142143
[data schema]: https://docs.overturemaps.org/schema
143144
[Overture]: https://overturemaps.org

0 commit comments

Comments
 (0)