-
Notifications
You must be signed in to change notification settings - Fork 8
/
mapbox-building-layer.html
114 lines (101 loc) · 2.86 KB
/
mapbox-building-layer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="./mapbox-layer.html">
<!--
A variant of the `mapbox-fill-extrusion-layer` where the building info is
derive from the building layers in mapbox's street map.
To add a building layer, just bind the corresponding `map` object from
`mapbox-gl` selement to the `mapbox-building-layer` element.
<b>Example</b>:
```html
<mapbox-gl id="map"
interactive
map="{{map}}"
script-src="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"
map-style="mapbox://styles/mapbox/dark-v9"
access-token="<MAPBOX_ACCESS_TOKEN>"
latitude=1.3521
longitude=103.8698
zoom=16
pitch=45
bearing=0></mapbox-gl>
<mapbox-building-layer layer-id="buildings"
map="[[map]]"
fill-extrusion-opacity=0.6
fill-extrusion-color="#666"></mapbox-building-layer>
```
See https://www.mapbox.com/mapbox-gl-js/style-spec/#layers-fill-extrusion for
more details.
@demo demo/building.html 3D buildings
-->
<dom-module id="mapbox-building-layer">
<script>
class MapboxBuildingLayer extends MapboxLayer {
static get is() { return 'mapbox-building-layer'; }
static get properties() {
return {
renderingType: {
type: String,
value: 'fill-extrusion'
},
/*
* Name of a source description to be used for this layer.
*/
source: {
type: String,
value: 'composite'
},
/*
* Layer to use from a vector tile source. Required if the source
* supports multiple layers.
*/
sourceLayer: {
type: String,
value: 'building'
},
/*
* A expression specifying conditions on source features. Only features
* that match the filter are displayed.
*
* @type {Array<predicate, field, condition>}
*/
filter: {
type: Array,
value: function() {
return ['==', 'extrude', 'true'];
}
},
/*
* The height (in meters) with which to extrude this layer.
*
* @type {{type: string, property: string}}
*/
fillExtrusionHeight: {
type: Object,
value: function() {
return {
type: 'identity',
property: 'height'
};
}
},
/*
* The height with which to extrude the base of this layer.
* Must be less than or equal to fill-extrusion-height.
*
* @type {{type: string, property: string}}
*/
fillExtrusionBase: {
type: Object,
value: function() {
return {
type: 'identity',
property: 'min_height'
};
}
}
};
}
}
window.customElements.define(MapboxBuildingLayer.is, MapboxBuildingLayer);
</script>
</dom-module>