Optionalcursorthe cursor to use when hovering over the glyph. Default "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" }
]
}
OptionalgeoFilter the geometry types that will be drawn.
An empty array will support all geometry types.
Ex. ["line"]: only draw lines
Defaults to empty.
OptionaliconA LAYOUT PropertyOnlyStep.
"center"
Options are "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"
ex.
{ "textOffset": "top-left" }
ex.
{ "textOffset": { "inputValue": { "key": "positioning", "fallback": "center" } } }
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 Anchor itself or pull from feature properties using PropertyOptionaliconA LAYOUT PropertyOnlyStep.
"" (empty string)
If applying an array, the first value will be used. If the first value is not found, the second value will be used, and so on.
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 = {
// ...
icons: {
streets: 'apiURL://glyphs-v2/streets',
base: 'apiURL://glyphs-v2/base'
}
}
You can then add to the layer:
{ "type": "glyph", "iconFamily": ["streets", "base"] }
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 | string[] itself or pull from feature properties using PropertyOptionaliconA LAYOUT PropertyOnlyStep.
"" (empty string)
ex.
{ "iconField": "plane" }
ex.
{ "iconField": { "inputValue": { "key": "aircraft", "fallback": "plane" } } }
If using an array, it will merge the values into a single string. but apply the effects/transformations to each component first.
an example of utilizing an array:
// example 1
const properties = { abbr: 'U.S.', name: 'United States', ... }
const iconField = ["\"", "?abbr,?name", "\""] // here we coallese to abbr if the property exists, otherwise we fallback on name
// cooalesced: returns "U.S." or "United States" depending on whether abbr exists
// example 2
const properties = { type: 'airplane', ... }
const iconField = ["?type", "-16"]
// // cooalesced: 'airplane-16'
Transforms:
"?": coalesce from properties"!": transform the result"U": uppercase"L": lowercase"C": capitalize"P": language aquisition (e.g. "XX" -> "en"). Defined by navigator.language (browser)ex.
{ "iconField": ["?!Labbr", " - " "?!Uname"] }
// cooalesced: "u.s. - UNITED STATES"
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 | string[] itself or pull from feature properties using PropertyOptionaliconA LAYOUT PropertyOnlyStep.
[0, 0]
ex.
{ "iconOffset": [2, 2] }
ex.
{ "iconOffset": { "inputValue": { "key": "offset", "fallback": [0, 0] } } }
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 Point itself or pull from feature properties using PropertyOptionaliconA LAYOUT PropertyOnlyStep.
[0, 0]
ex.
{ "iconPadding": [2, 2] }
ex.
{ "iconPadding": { "inputValue": { "key": "padding", "fallback": [0, 0] } } }
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 Point itself or pull from feature properties using PropertyOptionaliconA PAINT Property.
16
ex.
{ "iconSize": 24 }
ex.
{ "iconSize": { "inputValue": { "key": "size", "fallback": 42 } } }
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 PropertyOptionalinteractiveif true, when hovering over the glyph, the property data will be sent to the UI via an Event. Default 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
Optionalnoif true, it's assumed RTL text has been preshaped so do not apply RTL inversion again. Defaults to false
Optionaloverdrawif true, the layer will be drawn regardless of other glyph layers. Default false
OptionalplacementA LAYOUT PropertyOnlyStep.
"line"
Can be point, line, line-center-path or line-center-point.
Only relavent if geometry is not a point.
Line and Polygon geometries will use the placement type to determine
how the glyphs are drawn. Regardless of the placement type, the glyphs
will be drawn at spacing intervals.
If set to point, the geometry will be simplified down to a set
of points of minimum distance spacing apart.
If set to line, the glyphs will draw along the line path.
If set to line-center-path, the geometry will resolve to a single point
at the center of the line. The spacing property will have no effect.
The starting point will be at the center of each line, and the glyphs will be drawn
along the line path.
If set to line-center-point, the geometry will resolve to a single point
at the center of the line. The spacing property will have no effect.
The starting point will be at the center of each line, and the glyphs will be drawn
as points are (box shaped).
ex.
{ "type": "glyph", "placement": "point" }
ex.
{ "placement": { "inputValue": { "key": "placementType", "fallback": "point" } } }
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 Placement itself or pull from feature properties using PropertyOptionalsourceThe source used to generate the layer
OptionalspacingA LAYOUT Property.
325
The distance between glyphs in pixels. Only relavent if geometry is not a point.
ex.
{ "spacing": 250 }
ex.
{ "spacing": { "inputValue": { "key": "space-between", "fallback": 350 } } }
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 PropertyOptionaltextA LAYOUT PropertyOnlyStep.
"center"
Options are "center", "left", "right", "auto"
ex.
{ "textAlign": "left" }
ex.
{ "textAlign": { "inputValue": { "key": "align", "fallback": "center" } } }
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 Alignment itself or pull from feature properties using PropertyOptionaltextA LAYOUT PropertyOnlyStep.
"center"
The anchor position for the text being rendered.
Options are "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"
ex.
{ "textAnchor": "top-left" }
ex.
{ "textAnchor": { "inputValue": { "key": "anchor", "fallback": "center" } } }
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 Anchor itself or pull from feature properties using PropertyOptionaltextA LAYOUT PropertyOnlyStep.
"" (empty string)
If applying an array, the first value will be used. If the first value is not found, the second value will be used, and so on.
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 = {
// ...
fonts: {
robotoMedium: 'apiURL://glyphs-v2/RobotoMedium',
notoMedium: 'apiURL://glyphs-v2/notoMedium'
}
}
You can then add to the layer:
{ "type": "glyph", "textFamily": ["robotoMedium", "notoMedium"] }
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 | string[] itself or pull from feature properties using PropertyOptionaltextA LAYOUT PropertyOnlyStep.
"" (empty string)
The description of the content to be rendered. Can be the text itself, or can be a transfromation input that uses the features properties to build a text string.
ex.
{ "textField": "?name" }
ex.
{ "textField": { "inputValue": { "key": "?abbreviation", "fallback": "?name" } } }
If using an array, it will merge the values into a single string. but apply the effects/transformations to each component first.
an example of utilizing an array:
// example 1
const properties = { abbr: 'U.S.', name: 'United States', ... }
const textField = ["\"", "?abbr,?name", "\""] // here we coallese to abbr if the property exists, otherwise we fallback on name
// cooalesced: returns "U.S." or "United States" depending on whether abbr exists
// example 2
const properties = { type: 'airplane', ... }
const textField = ["?type", "-16"]
// // cooalesced: 'airplane-16'
Transforms:
"?": coalesce from properties"!": transform the result"U": uppercase"L": lowercase"C": capitalize"P": language aquisition (e.g. "XX" -> "en"). Defined by navigator.language (browser)ex.
{ "textField": ["?!Labbr", " - " "?!Uname"] }
// cooalesced: "u.s. - UNITED STATES"
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 | string[] itself or pull from feature properties using PropertyOptionaltextA PAINT Property.
"rgba(0, 0, 0, 1)"
ex.
{ "textFill": "rgba(240, 2, 5, 1)" }
ex.
{ "textFill": { "inputValue": { "key": "size", "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 PropertyOptionaltextA LAYOUT Property.
0
ex.
{ "textKerning": 0.5 }
ex.
{ "textKerning": { "inputValue": { "key": "kerning", "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 PropertyOptionaltextA LAYOUT Property.
0
ex.
{ "textLineHeight": 1 }
ex.
{ "textLineHeight": { "inputValue": { "key": "lineHeight", "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 PropertyOptionaltextA LAYOUT PropertyOnlyStep.
[0, 0]
ex.
{ "textOffset": [2, 2] }
ex.
{ "textOffset": { "inputValue": { "key": "offset", "fallback": [0, 0] } } }
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 Point itself or pull from feature properties using PropertyOptionaltextA LAYOUT PropertyOnlyStep.
[0, 0]
ex.
{ "textPadding": [2, 2] }
ex.
{ "textPadding": { "inputValue": { "key": "padding", "fallback": [0, 0] } } }
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 Point itself or pull from feature properties using PropertyOptionaltextA PAINT Property.
16
ex.
{ "textSize": 24 }
ex.
{ "textSize": { "inputValue": { "key": "size", "fallback": 36 } } }
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 PropertyOptionaltextA PAINT Property.
"rgba(0, 0, 0, 1)"
ex.
{ "textStroke": "rgba(240, 2, 5, 1)" }
ex.
{ "textStroke": { "inputValue": { "key": "stroke", "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 PropertyOptionaltextA PAINT Property.
0
ex.
{ "textStrokeWidth": 2 }
ex.
{ "textStrokeWidth": { "inputValue": { "key": "strokeWidth", "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 PropertyOptionaltextA LAYOUT Property.
0
ex.
{ "textWordWrap": 8 }
ex.
{ "textWordWrap": { "inputValue": { "key": "wrapSize", "fallback": 6 } } }
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 number itself or pull from feature properties using Property[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 generatorstextSize: size of the glyphs in pixelstextFill: fill color for glyphstextStroke: stroke color for glyphstextStrokeWidth: stroke width for glyphs in pixelsiconSize: size of the icons in pixelsplacement: Can be point, line, line-center-path or line-center-point. Only relavent if geometry is not a point.spacing: The distance between glyphs in pixels. Only relavent if geometry is not a point.textFamily: The font family to use for the glyphs. Can be multiple options, first is default with each proceeding option as a fallback.textField: The description of the content to be rendered. Can be the text itself, or can be a transfromation input that uses the features properties to build a text string.textAnchor: The anchor position for the text being rendered. An example is "center" or "bottom-left"textOffset: The x and y offset of the text relative to the anchor in pixelstextPadding: The width and height padding around the rendered glyphs to ensure stronger filtering of other text/icons nearbytextRotate: The rotation of the glyphs relative to the anchortextWordWrap: Wrapping size in pixels. This ensures a max width of the box containing the words.textAlign: Alignment tool to build the words from the left, middle or right positions. Only noticable if words are wrapping.textKerning: Excess kerning for each glyph for individual glyph spacing between eachother.textLineHeight: Adjust the lineheight of glyphs to improve vertical spacing.iconFamily: The source family name to use for the icons. Can be multiple options, first is default with each proceeding option as a fallback.iconField: The name of the icon to render. Can be multiple options, first is default with each proceeding option as a fallback.iconAnchor: The anchor position for the icon to be rendered relative to the centerpoint of the icon. An example is "center" or "bottom-left"iconOffset: The x and y offset of the icon relative to the anchor in pixelsiconPadding: The width and height padding around the rendered icon to ensure stronger filtering of other text/icons nearbyiconRotate: The rotation of the icons relative to the anchorgeoFilter: [See GeoFilter] filter the geometry types that will be drawn. Options are point, line, polyoverdraw: if true, the layer will be drawn regardless of other glyph layersinteractive: boolean flag. If true, when hovering over the glyph, the property data will be sent to the UI via an EventviewCollisions: if true, the layer glyphs will display the collision boxes and colorize them based on if they are colliding or notcursor: [See Cursor] the cursor to use when hovering over the glyphOptionalviewif true, the layer glyphs will display the collision boxes and colorize them based on if they are colliding or not. Default false
OptionalvisibleWhether the layer is visible or not
Glyph 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:
textSize: size of the glyphs in pixelstextFill: fill color for glyphstextStroke: stroke color for glyphstextStrokeWidth: stroke width for glyphs in pixelsiconSize: size of the icons in pixelsOptional layout properties:
placement: Can bepoint,line,line-center-pathorline-center-point. Only relavent if geometry is not a point.spacing: The distance between glyphs in pixels. Only relavent if geometry is not a point.textFamily: The font family to use for the glyphs. Can be multiple options, first is default with each proceeding option as a fallback.textField: The description of the content to be rendered. Can be the text itself, or can be a transfromation input that uses the features properties to build a text string.textAnchor: The anchor position for the text being rendered. An example is "center" or "bottom-left"textOffset: The x and y offset of the text relative to the anchor in pixelstextPadding: The width and height padding around the rendered glyphs to ensure stronger filtering of other text/icons nearbytextRotate: The rotation of the glyphs relative to the anchortextWordWrap: Wrapping size in pixels. This ensures a max width of the box containing the words.textAlign: Alignment tool to build the words from theleft,middleorrightpositions. Only noticable if words are wrapping.textKerning: Excess kerning for each glyph for individual glyph spacing between eachother.textLineHeight: Adjust the lineheight of glyphs to improve vertical spacing.iconFamily: The source family name to use for the icons. Can be multiple options, first is default with each proceeding option as a fallback.iconField: The name of the icon to render. Can be multiple options, first is default with each proceeding option as a fallback.iconAnchor: The anchor position for the icon to be rendered relative to the centerpoint of the icon. An example is "center" or "bottom-left"iconOffset: The x and y offset of the icon relative to the anchor in pixelsiconPadding: The width and height padding around the rendered icon to ensure stronger filtering of other text/icons nearbyiconRotate: The rotation of the icons relative to the anchorOptional properties:
geoFilter: [See GeoFilter] filter the geometry types that will be drawn. Options arepoint,line,polyoverdraw: if true, the layer will be drawn regardless of other glyph layersinteractive: boolean flag. If true, when hovering over the glyph, the property data will be sent to the UI via an EventviewCollisions: if true, the layer glyphs will display the collision boxes and colorize them based on if they are colliding or notcursor: [See Cursor] the cursor to use when hovering over the glyph