OptionalaccentA LAYOUT Property.
"#000"
ex.
{ "accentColor": "rgba(240, 2, 5, 1)" }
ex.
{ "accentColor": { "inputValue": { "key": "accent", "fallback": "black" } } }
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 PropertyOptionalaltitudeA LAYOUT Property.
45
ex.
{ "altitude": 45 }
ex.
{ "altitude": { "inputValue": { "key": "alt", "fallback": 45 } } }
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 PropertyOptionalazimuthA LAYOUT Property.
315
ex.
{ "azimuth": 115 }
ex.
{ "azimuth": { "inputValue": { "key": "az", "fallback": 0 } } }
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 PropertyOptionalfadeThe duration of the fade in milliseconds. Defaults to 300
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" }
]
}
OptionalhighlightA LAYOUT Property.
"#fff"
ex.
{ "highlightColor": "rgba(240, 2, 5, 1)" }
ex.
{ "highlightColor": { "inputValue": { "key": "accent", "fallback": "white" } } }
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 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 LAYOUT 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 PropertyOptionalshadowA LAYOUT Property.
"#000"
ex.
{ "shadowColor": "rgba(240, 2, 5, 1)" }
ex.
{ "shadowColor": { "inputValue": { "key": "shadow", "fallback": "black" } } }
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 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 generatorsopacity: the opacity of the hillshade. Choose between [0, 1], or pull out the value using a Property.azimuth: the azimuth of the sun's position casting the light in degrees [0, 360]. Input a number or pull out the value using a Property.altitude: the altitude of the raster in degrees [0, 90]. Input a number or pull out the value using a Property.shadowColor: Color of the shadows. Input either a string pull out the value using a Property.highlightColor: Color of the highlights. Input either a string pull out the value using a Property.accentColor: Color of the accents. Input either a string pull out the value using a Property.fadeDuration: The time it takes for each raster tile to fade in and out of view in millisecondsunpack: [See UnpackDefinition] Descriptor to help the GPU know how to unpack the incoming RGBA data into a f32.OptionalunpackA property to unpack the hillshade data via the GPU.
The formula used by the GPU is as follow:
(color.r * rMultiplier + color.g * gMultiplier + color.b * bMultiplier + color.a * aMultiplier) * zFactor + offset
The WebGPU code is as follows:
fn getElevation(
uv: vec2<f32>,
) -> f32 {
var color = textureSample(demTexture, imageSampler, uv);
return (
(
color.r * unpack.rMultiplier +
color.g * unpack.gMultiplier +
color.b * unpack.bMultiplier +
color.a * unpack.aMultiplier
) * unpack.zFactor
) + unpack.offset;
}
(Mapbox encoding):
{
"offset": -10000,
"zFactor": 0.1,
"aMultiplier": 0,
"bMultiplier": 1,
"gMultiplier": 256,
"rMultiplier": 65536 // 256 * 256
}
Should you need to use terrarium data, you can copy paste the following values:
{
// (color.r * 256. + color.g + color.b / 256.) - 32768.;
"offset": -32768,
"zFactor": 1,
"aMultiplier": 0,
"bMultiplier": 0.00390625, // 1 / 256
"gMultiplier": 1,
"rMultiplier": 256
}
OptionalvisibleWhether the layer is visible or not
Hillshade Style Guide
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:
opacity: the opacity of the hillshade. Choose between [0, 1], or pull out the value using a Property.azimuth: the azimuth of the sun's position casting the light in degrees [0, 360]. Input anumberor pull out the value using a Property.altitude: the altitude of the raster in degrees [0, 90]. Input anumberor pull out the value using a Property.shadowColor: Color of the shadows. Input either astringpull out the value using a Property.highlightColor: Color of the highlights. Input either astringpull out the value using a Property.accentColor: Color of the accents. Input either astringpull out the value using a Property.Optional layout properties:
fadeDuration: The time it takes for each raster tile to fade in and out of view in millisecondsunpack: Descriptor to help the GPU know how to unpack the incoming RGBA data into a f32.