1
1
---
2
2
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.
4
4
author : sinnypan
5
5
ms.author : sipa
6
6
ms.date : 10/13/2024
@@ -57,12 +57,12 @@ PMTiles are added as a map source during the map event. Once added, the specifie
57
57
58
58
``` js
59
59
// 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
+ );
66
66
```
67
67
68
68
> [ !NOTE]
@@ -76,55 +76,58 @@ The following sample uses the building theme's properties (for example, building
76
76
77
77
``` js
78
78
// 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
+ );
119
119
```
120
120
121
121
The following image shows a screenshot displaying the extrusion of buildings of different types near Central Park in New York City.
122
122
123
123
:::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.":::
124
124
125
+ <!--
125
126
For a fully functional sample with source code, see [Azure Maps Samples GitHub Repo].
126
-
127
127
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
+ -->
128
131
129
132
## Next Steps
130
133
@@ -137,7 +140,5 @@ The following articles are related to custom protocol PMTiles:
137
140
> [ Data Driven Style Expressions] ( data-driven-style-expressions-web-sdk.md )
138
141
139
142
[ 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
142
143
[ data schema ] : https://docs.overturemaps.org/schema
143
144
[ Overture ] : https://overturemaps.org
0 commit comments