Class: Style
- Last UpdatedMay 21, 2025
- 6 minute read
Instances of this class hold style configuration for rendering provider data using
H.map.render.webgl.RenderEngine. It also provides utility methods for operating with the style.
Specify a URL as a config parameter value to load the YAML
formatted style configuration.
Note that all relative paths within that configuration (textures, imported sub-styles, fonts, etc.) are resolved
relative to the hosting location of the main style. The styles are loaded automatically if a layer with the provider
using the style is added to the map. Alternatively load() method can be called explicitly to start the loading when
needed. Resulting style configuration can be obtain using the getConfig() method of the class.
import
The YAML configuration can contain an optional top-level import element, declaring an import parameter.
The value can be a single URL like import: colors.yaml, or an array of URLs import: [a.yaml, b.yaml].
The import block allows to import one or more additional files (which can then in turn recursively
import others). It works by deep-merging each imported scene into the current one: the "child" (imported)
file is merged first, with the "parent" file merged after, overwriting any properties shared with the child.
The final style configuration is a JavaScript object as a result of merging the master style on top of all
the imported styles following the order in which they are listed in the import.
Objects vs. Arrays
One important aspect of the merge behavior is that it applies to all YAML maps/JS objects, but not to YAML sequences/JS arrays. While key/value objects are merged (with new keys inserted, and existing keys overwriting the previous value), arrays are treated as scalar values that entirely overwrite the previous value (rather than merging the array contents).
Relative URLs
The relative URLs of the resources of the imported files are resolved relatively to the hosting location of that
file. The optional opt_baseUrl is applied to the master file only.
| Name | Type | Description |
|---|---|---|
config |
string | H.map.render.webgl.StyleConfig |
Either a URL to load the style from, |
opt_baseUrl |
string |
optional
The base URL to use for resolving relative URLs in the style like textures, fonts.
When URL is passed as a |
Throws:
-
if the specified configuration is invalid.
Extends
Methods
-
Normalize properties which can potentially hold relative URLs with the specified style config For example when
A.yamlimportsB.yaml, relative URLs in B should be resolved from the location of theB.yaml, rather thenA.yaml.Name Type Description configH.map.render.webgl.StyleConfig The YAML config
baseUrlstring The base URL to use for resolving relative resources
-
addEventListener (type, handler, opt_capture, opt_scope) inherited
-
This method adds a listener for a specific event.
Note that to prevent potential memory leaks, you must either call
removeEventListenerordisposeon the given object when you no longer need it. -
addOnDisposeCallback (callback, opt_scope) inherited
-
This method adds a callback which is triggered when the
EventTargetobject is being disposed.Name Type Description callbackfunction The callback function.
opt_scopeObject optional An optional scope for the callback function
-
dispatchEvent (evt) inherited
-
This method dispatches an event on the
EventTargetobject.Name Type Description evtH.util.Event | string An object representing the event or a string with the event name
-
dispose () inherited
-
This method removes listeners from the given object. Classes that extend
EventTargetmay need to override this method in order to remove references to DOM Elements and additional listeners. -
extractConfig (layerIds, opt_preserving, opt_excludeParentDraws)H.map.render.webgl.StyleConfig
-
Extracts the style configuration of the data layers with the specified ids. By default extracted layers are removed from the current layer, however that behavior can be changed by passing
trueasopt_preservingflag. Returned configuration object represents the extracted layers and can be used for creating a newH.map.render.webgl.Stylewith only that data layers.Note that the copy of the configuration is returned.
Throws:
-
if any of the layers couldn't be resolved.
Returns:
Type Description H.map.render.webgl.StyleConfig the style configuration for the extracted layers. -
-
Returns the style base URL.
Returns:
Type Description string | undefined -
getConfig ()H.map.render.webgl.StyleConfig inherited overrides
-
To get the current style configuration as a JavaScript Object, or
nullif there was an error loading/parsing the style configuration.Note that the copy of the configuration is returned.
Returns:
Type Description H.map.render.webgl.StyleConfig -
Returns the value of the property specified by the
.delimited path.Note that the copy of the configuration is returned.
Name Type Description pathstring The
.delimited property path within the style configuration.Throws:
-
if current style state is not
READY
Returns:
Type Description * The value of the property or undefinedif it is not found. -
-
getState ()H.map.render.Style.State inherited
-
Returns the state of the current style.
Returns:
Type Description H.map.render.Style.State -
Starts loading the style configuration if it was specified as a URL or parsing the style configuration if it was passed encoded string or object.
-
Merges the specified style configuration with the current one.
Name Type Description configH.map.render.webgl.StyleConfig An object describing the rendering style.
Throws:
-
-
in case of an invalid config
-
-
-
if current style state is not
READY.
-
-
-
removeEventListener (type, handler, opt_capture, opt_scope) inherited
-
This method removes a previously added listener from the
EventTargetinstance. -
Removes the property specified by the
.delimited path.Name Type Description pathstring The
.delimited property path within the style configuration.Throws:
-
if current style state is not
READY
-
-
Enables or disables object picking on objects from the data layers with the specified ids.
Throws:
-
if any of the layers couldn't be resolved.
Example
// Assumption: style has sub data layer "landuse.park" style.setInteractive('landuse.park', true); -
-
Sets the specified value to the property specified by the
.delimited path. If property by the specified path does not exist, it is created according to the nesting levels.Throws:
-
-
if current style state is not
READY
-
-
-
if the specified path exists and is not an
Object(aka attempt to create a nested object on a scalar value)
-
Example
// Assumption: style has sub data layer "landuse.park" with instructions to draw it as a polygon. style.setProperty('layers.landuse.park.draw.polygons.color', 'red'); -
