OptionalcapA LAYOUT PropertyOnlyStep.
butt
can use butt, square, or round
ex.
{ "cap": "round" }
ex.
{ "cap": { "inputValue": { "key": "capType", "fallback": "round" } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRangeStep] filter based on feature property rangesinputRange: [See InputRangeStep] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of Cap itself or pull from feature properties using PropertyOptionalcolorA PAINT Property.
"rgba(0, 0, 0, 1)"
ex.
{ "color": "rgba(240, 2, 5, 1)" }
ex.
{ "color": { "inputValue": { "key": "type", "fallback": "blue" } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRange] filter based on feature property rangesinputRange: [See InputRange] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of string itself or pull from feature properties using PropertyOptionalcursorthe cursor to use when hovering over the line. Defaults to "default"
OptionaldasharrayThe line will be dashed between visible and invisible.
OptionalfilterA filter function to filter out features from the source layer.
example:
"filter": { "key": "class", "comparator": "==", "value": "ocean" }
another example:
"filter": {
"or": [
{ "key": "class", "comparator": "==", "value": "ocean" },
{ "key": "class", "comparator": "==", "value": "bay" }
]
}
another example:
"filter": {
"and": [
{ "key": "class", "comparator": "==", "value": "ocean" },
{ "key": "size", "comparator": "==", "value": "large" },
{ "key": "type", "comparator": "!=", "value": "pacific" }
]
}
OptionalgapwidthA PAINT Property.
0
To improve render performance, you can provide a gap width to not draw a portion inside the line.
NOTE: This feature is currently not supported.
ex.
{ "gapWidth": 3 }
ex.
{ "gapWidth": { "inputValue": { "key": "partitionSize", "fallback": 1.5 } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRange] filter based on feature property rangesinputRange: [See InputRange] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of number itself or pull from feature properties using PropertyOptionalgeoFilter the geometry types that will be drawn.
Optionalinteractiveif true, when hovering over the line, the property data will be sent to the UI via an Event. Defaults to false
OptionaljoinA LAYOUT PropertyOnlyStep.
miter
can use bevel, miter, or round
ex.
{ "join": "round" }
ex.
{ "join": { "inputValue": { "key": "joinType", "fallback": "round" } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRangeStep] filter based on feature property rangesinputRange: [See InputRangeStep] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of Join itself or pull from feature properties using PropertyOptionallayerThe source's layer. Default for JSON data
OptionallchUse LCH coloring instead of RGB. Useful for color changing when the new color is very different from the old one
OptionalmaxzoomThe maximum zoom level at which the layer will be visible
OptionalmetadataAdditional metadata. Used by style generators.
OptionalminzoomThe minimum zoom level at which the layer will be visible
OptionalnameThe name of the layer - useful for sorting a layer on insert or for removal
OptionalopacityA PAINT Property.
1
ex.
{ "opacity": 0.5 }
ex.
{ "opacity": { "inputValue": { "key": "opacity", "fallback": 1 } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRange] filter based on feature property rangesinputRange: [See InputRange] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of number itself or pull from feature properties using PropertyOptionalsourceThe source used to generate the layer
[See LayerStyleBase]
name: the name of the layer, useful for sorting a layer on insert or for removalsource: the name of the source whose data this layer will uselayer: the source's layer. Defaults to "default" for JSON dataminzoom: the minimum zoom level at which the layer will be visiblemaxzoom: the maximum zoom level at which the layer will be visiblefilter: [See Filter] a filter function to filter out features from the source layerlch: use LCH coloring instead of RGB. Useful for color changing when the new color is very different from the old onevisible: whether the layer is visible or notmetadata: additional metadata. Used by style generatorscolor: Color of the line. Input either a string pull out the value using a Property.opacity: the opacity of the line. Choose between [0, 1], or pull out the value using a Property.width: the width of the line in pixelsgapwidth: split the line into two segments to reduce rendering artifactscap: [See Cap] the cap of the line. Either butt, square, or roundjoin: [See Join] the joiner used for the line. Either bevel, miter, or rounddasharray: A sequence of lengths and gaps that describe the pattern of dashes and gaps used to draw the line. Written as Array<[length: number, color: string]>OptionalvisibleWhether the layer is visible or not
OptionalwidthA PAINT Property.
1
ex.
{ "width": 5 }
ex.
{ "width": { "inputValue": { "key": "roadWidth", "fallback": 3.5 } } }
inputValue: [See InputValue] access value in feature propertiesdataCondition: [See DataCondition] filter based on feature property conditionsdataRange: [See DataRange] filter based on feature property rangesinputRange: [See InputRange] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"featureState: [See FeatureState] filter based on feature statefallback: if all else fails, use this value. A value of number itself or pull from feature properties using Property
Line Style Guide
Base Properties:
name: the name of the layer, useful for sorting a layer on insert or for removalsource: the name of the source whose data this layer will uselayer: the source's layer. Defaults to "default" for JSON dataminzoom: the minimum zoom level at which the layer will be visiblemaxzoom: the maximum zoom level at which the layer will be visiblefilter: [See Filter] a filter function to filter out features from the source layerlch: use LCH coloring instead of RGB. Useful for color changing when the new color is very different from the old onevisible: whether the layer is visible or notmetadata: additional metadata. Used by style generatorsOptional paint properties:
color: Color of the line. Input either astringpull out the value using a Property.opacity: the opacity of the line. Choose between [0, 1], or pull out the value using a Property.width: the width of the line in pixelsgapwidth: split the line into two segments to reduce rendering artifactsOptional layout properties:
cap: [See Cap] the cap of the line. Eitherbutt,square, orroundjoin: [See Join] the joiner used for the line. Eitherbevel,miter, orrounddasharray: A sequence of lengths and gaps that describe the pattern of dashes and gaps used to draw the line. Written asArray<[length: number, color: string]>Optional properties:
geoFilter: [See GeoFilter] filter the geometry types that will be drawn.interactive: boolean flag. If true, when hovering over the line, the property data will be sent to the UI via an Eventcursor: [See Cursor] the cursor to use when hovering over the line