OptionalcolorA 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 fill. Defaults to default
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" }
]
}
OptionalinteractiveIf true, when hovering over the fill, the property data will be sent to the UI via an Event. Defaults to false
OptionalinvertIf true, invert where the fill is drawn to on the map. Defaults to false
OptionallayerThe 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 PropertyOptionalopaqueIf true, the fill will be drawn opaque and not allow transparency. Used for performance gains. Defaults to false
OptionalpatternA LAYOUT PropertyOnlyStep.
undefined
ex.
Setting up the style definition with an image:
const style: StyleDefinition = {
// ...
images: { whale: '/images/whale.jpg' }
}
You can then add to the layer:
{ "type": "fill", "pattern": "whale" }
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 string itself or pull from feature properties using PropertyOptionalpatternA LAYOUT PropertyOnlyStep.
"__images"
If left as the default, the pattern will be searched within any images added to the style. Otherwise, you're most likely using a sprite sheet and you'll need to specify the "family" of the pattern which is the name of the sprite sheet.
ex.
Setting up the style definition with an image:
const style: StyleDefinition = {
// ...
sprites: { fishSprites: { path: 'http://...' } }
}
See UrlMap to use your own scheme/protocol for the URL path.
You can then add to the layer:
{ "type": "fill", "pattern": "whale", "patternFamily": "fishSprites" }
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 string itself or pull from feature properties using PropertyOptionalpatternA LAYOUT PropertyOnlyStep.
false
ex.
{ "type": "fill", "pattern": "whale", "patternMovement": true }
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 boolean 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 fill. Input either a string pull out the value using a Property.opacity the opacity of the fill. Choose between [0, 1], or pull out the value using a Property.pattern: Draw a pattern on the fill given an input image. Input either a string pull out the value using a PropertyOnlyStep.patternMovement: Boolean flag. If true, the pattern will move with the map rather than being static. Input either a boolean or pull out the value using a PropertyOnlyStep.patternFamily: If left as the default, the pattern will be searched within any images added to the style. Otherwise use a sprite sheet. Input is either a string to the sprite sheet name, or pull out the value using a PropertyOnlyStep.invert: if true, invert where the fill is drawn to on the mapinteractive: boolean flag. If true, when hovering over the fill, the property data will be sent to the UI via an Eventcursor: [See Cursor] the cursor to use when hovering over the fillopaque: if true, the fill will be drawn opaque and not allow transparency. Used for performance gains.OptionalvisibleWhether the layer is visible or not
Fill Style Guide
Description
A Fill layer guide defines how polygons should be colored, if they include patterns, are inverted, interactive, etc.
Base Properties:
[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 generatorsOptional paint properties:
color: Color of the fill. Input either astringpull out the value using a Property.opacity: the opacity of the fill. Choose between [0, 1], or pull out the value using a Property.Optional layout properties:
pattern: Draw a pattern on the fill given an input image. Input either astringpull out the value using a PropertyOnlyStep.patternMovement: Boolean flag. If true, the pattern will move with the map rather than being static. Input either abooleanor pull out the value using a PropertyOnlyStep.patternFamily: If left as the default, the pattern will be searched within any images added to the style. Otherwise use a sprite sheet. Input is either a string to the sprite sheet name, or pull out the value using a PropertyOnlyStep.Optional properties:
invert: if true, invert where the fill is drawn to on the mapinteractive: boolean flag. If true, when hovering over the fill, the property data will be sent to the UI via an Eventcursor: [See Cursor] the cursor to use when hovering over the fillopaque: if true, the fill will be drawn opaque and not allow transparency. Used for performance gains.