Gleo API documentation

πŸ”—GleoMap

The GleoMap is the entry point of Gleo. Users wanting a quick start might should look into MercatorMap instead.

A GleoMap wraps together, inside the same <div>:

πŸ”—Constructor

Constructor
new GleoMap(<HTMLDivElement> div, <GleoMap Options> options)
new GleoMap(<String> divID, <GleoMap Options> options)

πŸ”—Options

GleoMap Options

Option Type Default Description
resizable Boolean true Whether the map should react to changes in the size of its DOM container. Setting to false enables some memory optimizations.

View initialization options

The desired initial view of the map can be set with these options. They work the same as the options passed to the setView method.
Option Type Default Description
center Geometry undefined The desired map center
scale Number undefined The desired map scale (in CRS units per CSS pixel). Mutually exclusive with span.
span Number The desired span of the map (in CRS units on the diagonal of the viewport). Mutually exclusive with scale.
yawDegrees Number 0 The desired yaw rotation, in degrees relative to "north up", clockwise. Mutually exclusive with yawRadians.
yawRadians Number 0 The desired yaw rotation, in radians relative to "north up", counterclockwise. Mutually exclusive with yawDegrees.
crs BaseCRS The desired CRS of the map.

Interaction behaviour options

Option Type Default Description
maxBounds Array of Number An array of the form [minX, minY, maxX, maxY] defining a bounding box, in CRS units. User interactions will be constrained to this bounding box.

This option depends on BoundsClampActuator being loaded.

maxBounds undefined undefined Setting maxBounds to undefined (or any falsy value) will make the BoundsClampActuator use the CRS's viewableBounds default instead.

This is the default.

boxZoomModifier String "shift" One of "shift", "control", "alt" or "meta". Defines the modifier key that must be pressed during a map drag so it performs a box zoom instead.
boxZoomModifier Boolean Explicitly set to false to disable box zooming.
minSpan Number The minimum length, in CRS units, of the map "span". The user won't be able to zoom in so that the lenght of the diagonal is less than this value.

This option depends on SpanClampActuator being loaded. Akin to minSpan: then falsy, uses the CRS's maxSpan instead.

This is the default.

minSpan undefined undefined Setting minSpan to undefined (or any falsy value) will make the SpanClampActuator use the CRS's minSpan default instead.

This is the default.

maxSpan Number Akin to minSpan: prevents the user from zooming out so that the length of the diagonal is larger than this number.
wheelPxPerZoomLog2 Number 60 How many scroll pixels mean a change in the scale by a factor of 2. Smaller values will make wheel-zooming faster, and vice versa. The default value of 60 means that one "step" on a standard mousewheel should change the scale by a factor of 2.

This option depends on WheelActuator being loaded.

wheelZoomDuration Number 200 Duration, in milliseconds, of the mousewheel zoom animation.

This option depends on WheelActuator and InertiaActuator being loaded.

zoomSnapFactor Number 0.5 Whether the map's scale will snap to the native scale of raster symbols (ConformalRasters and RasterTileLoaders) in the map.

The value is the snap threshold, expressed in terms of the difference between the base-2 logarithms of the requested scale and the raster's scale.

For a tile pyramid with power-of-two scales per level (i.e. the scale of a level is double the scale of the previous level and half of the next level), the default threshold value of of 0.5 will always snap between pyramid levels.

This option depends on ZoomYawSnapActuator.

yawSnapTarget Number 0 The target yaw snap angle (in decimal degrees, clockwise). The yaw snap logic will only trigger when the yaw is set to a value close to this target.
yawSnapPeriod Number 90 When set to a finite value less than 360, allows for multiple values of the snap target, separated by this value. The default means that the yaw will snap to either 0, 90, 180 or 270 degrees, if the requested yaw is close to any of these values.
yawSnapTolerance Number 10 The maximum difference (in decimal degrees) between the requested yaw and the target yaw to trigger the snap logic.
zoomSnapOnlyOnYawSnap Boolean false By default, zoom snaps occur regardless of the yaw. When this is set to true, zoom snaps will only happen when the yaw is snapped.

πŸ”—Events

Pointer events

All DOM PointerEvents to the <canvas> of the map's Platina are handled by Gleo. Besides all of PointerEvent's properties and methods, Gleo adds the Geometry corresponding to the pixel the event took place in.

Most events are GleoPointerEvents, but some browsers fire exclusively MouseEvents for click/auxclick/contextmenu. In that case, expect a GleoMouseEvent instead.

Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event
gotpointercapture GleoPointerEvent Akin to the DOM gotpointercapture event
lostpointercapture GleoPointerEvent Akin to the DOM lostpointercapture event

Rendering events

Event Data Description
prerender Fired just before a symbol+acetate+platina render.
render Fired just after a symbol+acetate+platina render.

View change events

Event Data Description
crsoffset Fired when the CRS changes explicitly (by setting the map's CRS, or passing a crs option to a setView call) Fired when the CRS undergoes an implicit offset to avoid precision loss.
viewchanged Fired whenever any of the platina's view parts (center, scale/span, yaw, crs) changes.

Symbol/loader management events

Event Data Description
symbolsadded Fired whenever symbols are added to any of the platina's acetates.
symbolsremoved Fired whenever symbols are removed from any of th platina's acetates.

Inertia animation events

Event Data Description
inertiastart Event Fired at the beginning of an inertia animation.
inertiaend Event Fired at the end of an inertia animation.

πŸ”—Methods

Method Returns Description
destroy() this Destroys the map, freeing the container. Should free all used GPU resources, destroy DOM elements for controls and pins, and remove all DOM event listeners.

No methods should be called on a destroyed map.

redraw() this Forcefully redraws all acetates.

View setters

Method Returns Description
setView(<SetView Options> opts?) this (Re-)sets the map view: center (including its CRS), scale (AKA zoom) and yaw.

This will trigger an animation to the desired center/scale if the appropriate Actuators are enabled.

fitBounds(<Array of Number> bounds, <SetView Options> opts?) this Sets the platina's center and scale so that the given bounds (given in [minX, minY, maxX, maxY] form, and in the platina's CRS) are fully visible.

Any other given SetView Options will be merged with the calculated center&scale.

fitBounds(ExpandBox, <SetView Options> opts?) this Idem, but using an ExpandBox instead.
zoomInto(<Geometry> geometry, <Number> scale, <setView Options> opts?) this Performs a setView operation so that the given geometry stays at the same pixel.

Meant for user interactions on the map, including double-clicking and zooming into clusters from a Clusterer. Akin to Leaflet's zoomAround.

Actuator interface methods

Method Returns Description
registerSetViewFilter(<Function> fn) this Registers a new filter function fn which will intercept calls to setView. This function receives a set of setView Options and must return a set of setView Options, or false (which aborts the setView).

This is used to enforce map view constraints, as those of ZoomYawSnapActuator.

unregisterSetViewFilter(<Function> fn) this Opposite of registerSetViewFilter.

Symbol/Loader management

A GleoMap doesn't really hold the state of symbols/loaders in the map. These calls are proxied to the map's Platina.
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given GleoSymbol to the appropriate acetate.

Users should note that repeated calls to add() are, in performance terms, much worse than a single call to multiAdd(). Try to avoid repeated calls to add() inside a loop.

add(<Loader> loader) this Attaches the given Loader to the map.
add(<AbstractPin> pin) this Attaches the given pin (HTMLPin et al) to the map.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given GleoSymbols to the appropriate acetate(s).
multiAdd(<Array of AbstractPin> symbols) this Adds the given pins (HTMLPins, Balloons) to the map.

It's also possible to call multiAdd with an array containing both symbols and pins.

remove(<GleoSymbol> symbol) this Removes the symbol from this map.
remove(<AbstractPin> pin) this Removes the pin from this map
multiRemove(<Array of GleoSymbol> symbols) this Removes several symbols from this map.
multiRemove(<Array of AbstractPin> pins) this Removes several pins from this map.

It's also possible to call multiRemove with an array containing both symbols and pins.

addAcetate(<Acetate> ac) this Adds a new Acetate to the map.

Calling this method is usually not needed, as there are default acetates.

Interaction behaviour options

Method Returns Description
enable() this Enables this actuator. This will capture pointerdown, pointerup and pointermove (between pointerdown and pointerup) DOM events.
disable() this Disables this actuator. Stops capturing pointerdown, pointermove, pointerup DOM events.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
actuators Map of Actuator A key-value Map of actuator names to Actuator instances.
container HTMLDivElement The DOM element containing the map.
platina Platina The Platina that this GleoMap uses. Read only.
glii GliiFactory The Glii instance used by the platina. Read-only.

Controls interface

Property Type Description
controlPositions Map of String to HTMLElement A Map containing the four control container corners, indexed by a two-letter string (one of tl, tr, bl, br)

View setter/getter properties

These properties allow to fetch the state of the view then read, and modify it. Setting the value of any of these properties has the same effect as calling setView() with appropriate values.

Setting a value will trigger the map's Actuators. In most cases, this means starting an animation (via InertiaActuator) and keeping any values previously set as the target state of the animation.

Property Type Description
center RawGeometry The center of the map, as a point geometry.
scale Number The scale, in CRS units per CSS pixel.
span Number The span, in CRS units per diagonal.
crs BaseCRS The CRS being used by the platina.
yawDegrees Number The yaw rotation angle, in clockwise degrees.
yawRadians Number The yaw rotation angle, in counter-clockwise radians.
bbox ExpandBox A rectangular bounding box that completely covers the map viewport. This box is aligned to the CRS, not to the viewport. Setting its value is akin to running fitBounds.

Interaction behaviour properties

Property Type Description
maxBounds Runtime value of the maxBounds initialization option.

Updating its value will affect future map panning operations.

minSpan Runtime value for the minSpan initialization option.

Updating its value will affect future zoom operations.

maxSpan Akin to the minSpan property.
wheelPxPerLog2 Number Runtime value of the wheelPxPerLog2 initialization option.

Updating its value will affect future scrollwheel zoom operations.

wheelZoomDuration Number Runtime value of the wheelZoomDuration initialization option.

Updating its value will affect future scrollwheel zoom operations.

zoonSnapFactor Runtime value for the zoomSpanFactor option. Updating its value will affect future zoom operations.
yawSnapTarget Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapPeriod Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapTolerance Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
zoomSnapOnlyOnYawSnap Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.

πŸ”—Platina

In printing, a "platen" (or "platine" or "platina") is the glass flatbed of a photocopier or scanner where pages are laid down, and in an overhead projector, it's the glass flatbed where an acetate sheet is laid down.

In Gleo, a Platina is primarily a collection of Acetates, and the functionality to draw them in top of each other.

A Platina boils down to:

A Platina can ve used standalone to draw GleoSymbols in Acetates, but does not offer interactivity (e.g. map drag, mousewheel zoom, etc); that is left to Actuators in a GleoMap.

πŸ”—Constructor

Constructor
new Platina(<HTMLCanvasElement> canvas, <Platina Options> options?)
new Platina(<string> canvasID, <Platina Options> options?)

πŸ”—Options

Platina Options

Option Type Default Description
resizable Boolean true Whether the map should react to changes in the size of its DOM container. Setting to false enables some memory optimizations.
backgroundColour Colour [0, 0, 0, 0] Self-explanatory. The default transparent black should work for most use cases.
preserveDrawingBuffer Boolean false Whether the rendering context created from the canvas shall be able to be read back. See the preserveDrawingBuffer option of HTMLCanvasElement.getContext()
precisionThreshold Number * The order of magnitude (in terms of significant bits, or base-2 logarithm) that triggers a CRS offset.

The default value depends on the floating point precision reported by the GPU, typically 22 (for GPUs which internally use float32) or 15 for older GPUs (which internally use float24).

Raising this value may prevent spurious CRS offsets and might alleviate CRS-offset-related delays and artifacts, at the cost of possible precision artifacts. A value lower than the default has no positive effects.

View initialization Options

A Platina can take a set of SetView options, just as the ones for a setView call.
Option Type Default Description
crs BaseCRS undefined Initial CRS of the platina.
yawDegrees Number 0 Initial yaw rotation of the platina, in clockwise degrees.
yawRadians Number 0 Initial yaw rotation of the platina, in counter-clockwise radians.
center Geometry undefined Initial center of the platina.
scale Number undefined Initial scale of the platina, in CRS units per CSS pixel.
span Number undefined Initial span of the platina, in CRS units per diagonal.

πŸ”—Events

Pointer events

All DOM PointerEvents to a platina's <canvas> are handled by Gleo. Besides all of PointerEvent's properties and methods, Gleo adds the Geometry corresponding to the pixel the event took place in.

Most events are GleoPointerEvents, but some browsers fire exclusively MouseEvents for click/auxclick/contextmenu. In that case, expect a GleoMouseEvent instead.

Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event
gotpointercapture GleoPointerEvent Akin to the DOM gotpointercapture event
lostpointercapture GleoPointerEvent Akin to the DOM lostpointercapture event

Symbol/loader management events

Event Data Description
acetateadded Fired whenever an Acetate is added to the platina.
symbolsadded Fired whenever symbols are added to any of the platina's acetates.
symbolsremoved Fired whenever symbols are removed from any of th platina's acetates.
loaderadded Fired whenever a Loader is added to the platina.
loaderremoved Fired whenever a Loader is removed from the platina.

Rendering events

Event Data Description
prerender Fired prior to performing a render (rendering Acetates plus compositing them). Can be used to set the map's viewport during animations (as long as there's only one animation logic running).
render Fired just after performing a render (rendering Acetates plus compositing them).

View change events

Event Data Description
crschange Dispatched when the CRS changes explicitly (by setting the platina's CRS, or passing a crs option to a setView call)
crsoffset Dispatched when the CRS undergoes an implicit offset to avoid precision loss.
viewchanged Fired whenever the viewport changes - center, scale or yaw.

Details inclide the center, scale, and the affine matrix for converting CRS coordinates into clipspace coordinates.

This event might fire at every frame during interactions and animations.

πŸ”—Methods

Method Returns Description
destroy() this Destroys the platina, freeing the rendering context. Should free all used GPU resources.

No methods should be called on a destroyed platina.

getAcetateOfClass(<Prototype of Acetate> proto) Acetate Given a specific Acetate class (e.g. getAcetateOfClass(Sprite.Acetate)), returns an acetate instance where that kind of symbol can be drawn. Will create an acetate of the given class if it doesn't exist in the map yet.
redraw() this Redraws acetates that need to do so, and composes them together.

There is no need to call this manually, since it will be called once per animation frame.

Internal Methods

Method Returns Description
addAcetate(<Acetate> ac) this Adds a new Acetate to the map.

There's no need to call this manually - acetates will be added to a Platina (or GleoMap) automatically then they're instantiated. Do remember to pass the Platina as the first parameter to the Acetate constructor.

rebuildCompositor() Rebuilds the WebGL program in charge of compositing the acetates.

Should only be needed to run once.

The compositor just dumps one texture from one acetate into the default renderbuffer (i.e. the target <canvas>). The "clear", then "bind texture"-"dump acetate" logic is implemented elsewhere.

View setters

Method Returns Description
setView(<SetView Options> opts) this (Re-)sets the platina view to the given center/crs, scale, and yaw.

Can trigger a redraw. Changes to the view state (center/crs/scale/yaw) are atomic.

fitBounds(<Array of Number> bounds, <SetView Options> opts?) this Sets the platina's center and scale so that the given bounds (given in [minX, minY, maxX, maxY] form, and in the platina's CRS) are fully visible.

Any other given SetView Options will be merged with the calculated center&scale.

fitBounds(<ExpandBox> bounds, <SetView Options> opts?) this Idem, but using an ExpandBox instead.
zoomInto(<Geometry> geometry, <Number> scale, <setView Options> opts?) this Performs a setView operation so that the given geometry stays at the same pixel.

Meant for user interactions on the map, including double-clicking and zooming into clusters from a Clusterer. Akin to Leaflet's zoomAround.

Conversion methods

Method Returns Description
pxToGeom(<Array of Number> xy, <Boolean> wrap?) Geometry Given a (CSS) pixel coordinate relative to the <canvas> of the map, in the form [x, y], returns the point Geometry (in the map's CRS) which corresponds to that pixel, at the map's current center/scale.

The resulting geometry will be wrapped by default. To avoid this, set wrap to false.

This is akin to Leaflet's containerPointToLatLng(). Inverse of geomToPx.

geomToPx(Geometry) Array of Number Given a point Geometry, returns the [x, y] coordinates of the (CSS) pixel relative to the <canvas> of the map corresponding to that geometry (for the map's current center/scale).

This is akin to Leaflet's latLngToContainerPoint(). Inverse of pxToGeom.

Symbol/Loader management

Method Returns Description
add(<GleoSymbol> symbol) this Adds the given GleoSymbol to the appropriate acetate.

Users should note that repeated calls to add() are, in performance terms, much worse than a single call to multiAdd(). Try to avoid repeated calls to add() inside a loop.

add(<Loader> loader) this Attaches the given Loader to the map.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given GleoSymbols to the appropriate acetate(s).
remove(<GleoSymbol> symbol) this Removes one symbol from this map.
multiRemove(<Array of GleoSymbol> symbols) this Removes several symbols from this map.

Scale and pixel fidelity methods

Several use cases call for re-using a set of scale values.

In particular, raster symbols (including tiles) have a preferred (or set of preferred) scale factors to be shown as, so that they are shown at a 1:1 raster pixel / screen pixel ratio.

A Platina does not enforce these scale values; the usual way to enforce them is by using a ZoomYawSnapActuator.

Method Returns Description
setScaleStop(<String> crsName, <Number> scale) this Sets a scale stop for the given CRS name.
removeScaleStop(<String> crsName, <Number> scale) this Reverse of setScaleStop.
getScaleStops(crsName) Array of Number Returns the scale stops for the given CRS name

Internal methods

Method Returns Description
queueCursor(<String> cursor) this Called when hovering over an interactive symbol with a cursor; adds the given cursor to an internal queue. If there's only one cursor in the queue the CSS property of the platina's <canvas> will be set to it.
unqueueCursor(<String> cursor) this Called when unhovering out of an interactive symbol with a cursor; removes the given cursor from an internal queue. Resets the cursor CSS property of the platina's <canvas> to next item in that queue, or unsets it if the stack is empty.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
glii GliiFactory The Glii instance used by the platina. Read-only. The GleoMap instance used to spawn this platina. If the platina was created stand-alone, this will be undefined instead.
resizable Boolean Whether the platina reacts to changes in its DOM container. Read-only.

DOM properties

Property Type Description
canvas HTMLCanvasElement The <canvas> element this platina is attached to. Read-only.

View setter/getter properties

These properties allow to fetch the state of the view then read, and modify it. Setting the value of any of these properties has the same effect as calling setView() with appropriate values.

Setting a value does not guarantee that the final value will be the given one. For example, when setting the center and immediatly then querying the center, the actual center can be a reprojection of the given one.

Property Type Description
center RawGeometry The center of the map, as a point geometry.
scale Number The scale, in CRS units per CSS pixel.
span Number The span, in CRS units per diagonal.
crs BaseCRS The CRS being used by the platina.
yawDegrees Number The yaw rotation angle, in clockwise degrees.
yawRadians Number The yaw rotation angle, in counter-clockwise radians.
backgrounColour Colour Self-explanatory
bbox ExpandBox A rectangular bounding box that completely covers the map viewport. This box is aligned to the CRS, not to the viewport. Setting its value is akin to running fitBounds.

View getter properties

Property Type Description
pxSize Array of Number The size of the canvas, in CSS pixels, in [width, height] form. Read-only.

Symbol/loader management events

Property Type Description
target GleoMap The target where the loader was added to. Might be a GleoMap, a Platina or a SymbolGroup. Read-only.
target Platina
target SymbolGroup
platina The Platina where symbols from this loader will be drawn into. Read-only.

πŸ”—

πŸ”—SetView Options

Calls to the setView method (of GleoMap and Platina) take an object with any of the following properties. e.g.:
map.setView({ center: [ 100, 10 ], redraw: false });
map.setView({ scale: 1500, yawDegrees: 90 });
Option Type Default Description
center RawGeometry undefined The desired map center, as an instantiated RawGeometry/Geometry.
center Array of Number undefined The desired map center, as an Array of Numbers. They will be converted into a Geometry by means of DefaultGeometry.
scale Number undefined The desired map scale (in CRS units per CSS pixel). Mutually exclusive with span.
span Number undefined The desired span of the map (in CRS units on the diagonal of the viewport). Mutually exclusive with scale.
yawDegrees Number 0 The desired yaw rotation, in degrees relative to "north up", clockwise. Mutually exclusive with yawRadians.
yawRadians Number 0 The desired yaw rotation, in radians relative to "north up", counterclockwise. Mutually exclusive with yawDegrees.
crs BaseCRS undefined The desired CRS of the map.
duration Number 200 If the map has a InertiaActuator, this defines the duration of the easing animation, in milliseconds. A value of 0 effectively disables the animation.

Works only for GleoMap, and only when an InertiaActuator has been loaded; has no effect on setView calls made to a Platina.

zoomSnap Boolean true When explicitly set to false, the zoom snapping logic is disabled: the scale level of the map will not snap to the raster data for that setView call.
yawSnap Boolean true When explicitly set to false, the yaw snap logic is disabled for that setView call.

πŸ”—MercatorMap

A GleoMap with some useful defaults:

In order to have a map without these defaults, use GleoMap instead, add CRS, actuators, and controls as desired; and use DefaultGeometry functionality to define how to handle geometry inputs.

πŸ”—Usage example

<div id='gleomap' style='height:500px; width:500px;'></div>
<script type='module'>
// Import the Gleo files - the paths depend on your installation
import MercatorMap from 'gleo/src/MercatorMap.mjs';
import MercatorTiles from 'gleo/src/loaders/MercatorTiles.mjs';

// Instantiate the MercatorMap instance, given the ID of the <div>
const myGleoMap = new MercatorMap('gleomap');

// Load some default OpenStreetMap tiles in the map
new MercatorTiles("https://tile.osm.org/{z}/{y}/{x}.png", {maxZoom: 10}).addTo(myGleoMap);

// The map center can be specified as a plain array in [latitude, longitude] form
myGleoMap.center = [40, -3];

// The map span is th
myGleoMap.span = 1000000;
</script>

πŸ”—Constructor

Constructor
new MercatorMap(<HTMLDivElement> div, <GleoMap Options> options)
new MercatorMap(<string> divID, <GleoMap Options> options)

πŸ”—Options

GleoMap Options inherited from GleoMap
Option Type Default Description
resizable Boolean true Whether the map should react to changes in the size of its DOM container. Setting to false enables some memory optimizations.
View initialization options inherited from GleoMap
Option Type Default Description
center Geometry undefined The desired map center
scale Number undefined The desired map scale (in CRS units per CSS pixel). Mutually exclusive with span.
span Number The desired span of the map (in CRS units on the diagonal of the viewport). Mutually exclusive with scale.
yawDegrees Number 0 The desired yaw rotation, in degrees relative to "north up", clockwise. Mutually exclusive with yawRadians.
yawRadians Number 0 The desired yaw rotation, in radians relative to "north up", counterclockwise. Mutually exclusive with yawDegrees.
crs BaseCRS The desired CRS of the map.
Interaction behaviour options inherited from GleoMap
Option Type Default Description
maxBounds Array of Number An array of the form [minX, minY, maxX, maxY] defining a bounding box, in CRS units. User interactions will be constrained to this bounding box.

This option depends on BoundsClampActuator being loaded.

maxBounds undefined undefined Setting maxBounds to undefined (or any falsy value) will make the BoundsClampActuator use the CRS's viewableBounds default instead.

This is the default.

boxZoomModifier String "shift" One of "shift", "control", "alt" or "meta". Defines the modifier key that must be pressed during a map drag so it performs a box zoom instead.
boxZoomModifier Boolean Explicitly set to false to disable box zooming.
minSpan Number The minimum length, in CRS units, of the map "span". The user won't be able to zoom in so that the lenght of the diagonal is less than this value.

This option depends on SpanClampActuator being loaded. Akin to minSpan: then falsy, uses the CRS's maxSpan instead.

This is the default.

minSpan undefined undefined Setting minSpan to undefined (or any falsy value) will make the SpanClampActuator use the CRS's minSpan default instead.

This is the default.

maxSpan Number Akin to minSpan: prevents the user from zooming out so that the length of the diagonal is larger than this number.
wheelPxPerZoomLog2 Number 60 How many scroll pixels mean a change in the scale by a factor of 2. Smaller values will make wheel-zooming faster, and vice versa. The default value of 60 means that one "step" on a standard mousewheel should change the scale by a factor of 2.

This option depends on WheelActuator being loaded.

wheelZoomDuration Number 200 Duration, in milliseconds, of the mousewheel zoom animation.

This option depends on WheelActuator and InertiaActuator being loaded.

zoomSnapFactor Number 0.5 Whether the map's scale will snap to the native scale of raster symbols (ConformalRasters and RasterTileLoaders) in the map.

The value is the snap threshold, expressed in terms of the difference between the base-2 logarithms of the requested scale and the raster's scale.

For a tile pyramid with power-of-two scales per level (i.e. the scale of a level is double the scale of the previous level and half of the next level), the default threshold value of of 0.5 will always snap between pyramid levels.

This option depends on ZoomYawSnapActuator.

yawSnapTarget Number 0 The target yaw snap angle (in decimal degrees, clockwise). The yaw snap logic will only trigger when the yaw is set to a value close to this target.
yawSnapPeriod Number 90 When set to a finite value less than 360, allows for multiple values of the snap target, separated by this value. The default means that the yaw will snap to either 0, 90, 180 or 270 degrees, if the requested yaw is close to any of these values.
yawSnapTolerance Number 10 The maximum difference (in decimal degrees) between the requested yaw and the target yaw to trigger the snap logic.
zoomSnapOnlyOnYawSnap Boolean false By default, zoom snaps occur regardless of the yaw. When this is set to true, zoom snaps will only happen when the yaw is snapped.

πŸ”—Events

Pointer events inherited from GleoMap
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event
gotpointercapture GleoPointerEvent Akin to the DOM gotpointercapture event
lostpointercapture GleoPointerEvent Akin to the DOM lostpointercapture event
Rendering events inherited from GleoMap
Event Data Description
prerender Fired just before a symbol+acetate+platina render.
render Fired just after a symbol+acetate+platina render.
View change events inherited from GleoMap
Event Data Description
crsoffset Fired when the CRS changes explicitly (by setting the map's CRS, or passing a crs option to a setView call) Fired when the CRS undergoes an implicit offset to avoid precision loss.
viewchanged Fired whenever any of the platina's view parts (center, scale/span, yaw, crs) changes.
Symbol/loader management events inherited from GleoMap
Event Data Description
symbolsadded Fired whenever symbols are added to any of the platina's acetates.
symbolsremoved Fired whenever symbols are removed from any of th platina's acetates.
Inertia animation events inherited from GleoMap
Event Data Description
inertiastart Event Fired at the beginning of an inertia animation.
inertiaend Event Fired at the end of an inertia animation.

πŸ”—Methods

Methods inherited from GleoMap
Method Returns Description
destroy() this Destroys the map, freeing the container. Should free all used GPU resources, destroy DOM elements for controls and pins, and remove all DOM event listeners.

No methods should be called on a destroyed map.

redraw() this Forcefully redraws all acetates.
View setters inherited from GleoMap
Method Returns Description
setView(<SetView Options> opts?) this (Re-)sets the map view: center (including its CRS), scale (AKA zoom) and yaw.

This will trigger an animation to the desired center/scale if the appropriate Actuators are enabled.

fitBounds(<Array of Number> bounds, <SetView Options> opts?) this Sets the platina's center and scale so that the given bounds (given in [minX, minY, maxX, maxY] form, and in the platina's CRS) are fully visible.

Any other given SetView Options will be merged with the calculated center&scale.

fitBounds(ExpandBox, <SetView Options> opts?) this Idem, but using an ExpandBox instead.
zoomInto(<Geometry> geometry, <Number> scale, <setView Options> opts?) this Performs a setView operation so that the given geometry stays at the same pixel.

Meant for user interactions on the map, including double-clicking and zooming into clusters from a Clusterer. Akin to Leaflet's zoomAround.

Actuator interface methods inherited from GleoMap
Method Returns Description
registerSetViewFilter(<Function> fn) this Registers a new filter function fn which will intercept calls to setView. This function receives a set of setView Options and must return a set of setView Options, or false (which aborts the setView).

This is used to enforce map view constraints, as those of ZoomYawSnapActuator.

unregisterSetViewFilter(<Function> fn) this Opposite of registerSetViewFilter.
Symbol/Loader management inherited from GleoMap
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given GleoSymbol to the appropriate acetate.

Users should note that repeated calls to add() are, in performance terms, much worse than a single call to multiAdd(). Try to avoid repeated calls to add() inside a loop.

add(<Loader> loader) this Attaches the given Loader to the map.
add(<AbstractPin> pin) this Attaches the given pin (HTMLPin et al) to the map.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given GleoSymbols to the appropriate acetate(s).
multiAdd(<Array of AbstractPin> symbols) this Adds the given pins (HTMLPins, Balloons) to the map.

It's also possible to call multiAdd with an array containing both symbols and pins.

remove(<GleoSymbol> symbol) this Removes the symbol from this map.
remove(<AbstractPin> pin) this Removes the pin from this map
multiRemove(<Array of GleoSymbol> symbols) this Removes several symbols from this map.
multiRemove(<Array of AbstractPin> pins) this Removes several pins from this map.

It's also possible to call multiRemove with an array containing both symbols and pins.

addAcetate(<Acetate> ac) this Adds a new Acetate to the map.

Calling this method is usually not needed, as there are default acetates.

Interaction behaviour options inherited from GleoMap
Method Returns Description
enable() this Enables this actuator. This will capture pointerdown, pointerup and pointermove (between pointerdown and pointerup) DOM events.
disable() this Disables this actuator. Stops capturing pointerdown, pointermove, pointerup DOM events.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from GleoMap
Property Type Description
actuators Map of Actuator A key-value Map of actuator names to Actuator instances.
container HTMLDivElement The DOM element containing the map.
platina Platina The Platina that this GleoMap uses. Read only.
glii GliiFactory The Glii instance used by the platina. Read-only.
Controls interface inherited from GleoMap
Property Type Description
controlPositions Map of String to HTMLElement A Map containing the four control container corners, indexed by a two-letter string (one of tl, tr, bl, br)
View setter/getter properties inherited from GleoMap
Property Type Description
center RawGeometry The center of the map, as a point geometry.
scale Number The scale, in CRS units per CSS pixel.
span Number The span, in CRS units per diagonal.
crs BaseCRS The CRS being used by the platina.
yawDegrees Number The yaw rotation angle, in clockwise degrees.
yawRadians Number The yaw rotation angle, in counter-clockwise radians.
bbox ExpandBox A rectangular bounding box that completely covers the map viewport. This box is aligned to the CRS, not to the viewport. Setting its value is akin to running fitBounds.
Interaction behaviour properties inherited from GleoMap
Property Type Description
maxBounds Runtime value of the maxBounds initialization option.

Updating its value will affect future map panning operations.

minSpan Runtime value for the minSpan initialization option.

Updating its value will affect future zoom operations.

maxSpan Akin to the minSpan property.
wheelPxPerLog2 Number Runtime value of the wheelPxPerLog2 initialization option.

Updating its value will affect future scrollwheel zoom operations.

wheelZoomDuration Number Runtime value of the wheelZoomDuration initialization option.

Updating its value will affect future scrollwheel zoom operations.

zoonSnapFactor Runtime value for the zoomSpanFactor option. Updating its value will affect future zoom operations.
yawSnapTarget Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapPeriod Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapTolerance Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
zoomSnapOnlyOnYawSnap Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.

πŸ”—CartesianMap

As MercatorMap, but:

πŸ”—Constructor

Constructor
new CartesianMap(<HTMLDivElement> div, <GleoMap Options> options)
new CartesianMap(<string> divID, <GleoMap Options> options)

πŸ”—Options

GleoMap Options inherited from GleoMap
Option Type Default Description
resizable Boolean true Whether the map should react to changes in the size of its DOM container. Setting to false enables some memory optimizations.
View initialization options inherited from GleoMap
Option Type Default Description
center Geometry undefined The desired map center
scale Number undefined The desired map scale (in CRS units per CSS pixel). Mutually exclusive with span.
span Number The desired span of the map (in CRS units on the diagonal of the viewport). Mutually exclusive with scale.
yawDegrees Number 0 The desired yaw rotation, in degrees relative to "north up", clockwise. Mutually exclusive with yawRadians.
yawRadians Number 0 The desired yaw rotation, in radians relative to "north up", counterclockwise. Mutually exclusive with yawDegrees.
crs BaseCRS The desired CRS of the map.
Interaction behaviour options inherited from GleoMap
Option Type Default Description
maxBounds Array of Number An array of the form [minX, minY, maxX, maxY] defining a bounding box, in CRS units. User interactions will be constrained to this bounding box.

This option depends on BoundsClampActuator being loaded.

maxBounds undefined undefined Setting maxBounds to undefined (or any falsy value) will make the BoundsClampActuator use the CRS's viewableBounds default instead.

This is the default.

boxZoomModifier String "shift" One of "shift", "control", "alt" or "meta". Defines the modifier key that must be pressed during a map drag so it performs a box zoom instead.
boxZoomModifier Boolean Explicitly set to false to disable box zooming.
minSpan Number The minimum length, in CRS units, of the map "span". The user won't be able to zoom in so that the lenght of the diagonal is less than this value.

This option depends on SpanClampActuator being loaded. Akin to minSpan: then falsy, uses the CRS's maxSpan instead.

This is the default.

minSpan undefined undefined Setting minSpan to undefined (or any falsy value) will make the SpanClampActuator use the CRS's minSpan default instead.

This is the default.

maxSpan Number Akin to minSpan: prevents the user from zooming out so that the length of the diagonal is larger than this number.
wheelPxPerZoomLog2 Number 60 How many scroll pixels mean a change in the scale by a factor of 2. Smaller values will make wheel-zooming faster, and vice versa. The default value of 60 means that one "step" on a standard mousewheel should change the scale by a factor of 2.

This option depends on WheelActuator being loaded.

wheelZoomDuration Number 200 Duration, in milliseconds, of the mousewheel zoom animation.

This option depends on WheelActuator and InertiaActuator being loaded.

zoomSnapFactor Number 0.5 Whether the map's scale will snap to the native scale of raster symbols (ConformalRasters and RasterTileLoaders) in the map.

The value is the snap threshold, expressed in terms of the difference between the base-2 logarithms of the requested scale and the raster's scale.

For a tile pyramid with power-of-two scales per level (i.e. the scale of a level is double the scale of the previous level and half of the next level), the default threshold value of of 0.5 will always snap between pyramid levels.

This option depends on ZoomYawSnapActuator.

yawSnapTarget Number 0 The target yaw snap angle (in decimal degrees, clockwise). The yaw snap logic will only trigger when the yaw is set to a value close to this target.
yawSnapPeriod Number 90 When set to a finite value less than 360, allows for multiple values of the snap target, separated by this value. The default means that the yaw will snap to either 0, 90, 180 or 270 degrees, if the requested yaw is close to any of these values.
yawSnapTolerance Number 10 The maximum difference (in decimal degrees) between the requested yaw and the target yaw to trigger the snap logic.
zoomSnapOnlyOnYawSnap Boolean false By default, zoom snaps occur regardless of the yaw. When this is set to true, zoom snaps will only happen when the yaw is snapped.

πŸ”—Events

Pointer events inherited from GleoMap
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event
gotpointercapture GleoPointerEvent Akin to the DOM gotpointercapture event
lostpointercapture GleoPointerEvent Akin to the DOM lostpointercapture event
Rendering events inherited from GleoMap
Event Data Description
prerender Fired just before a symbol+acetate+platina render.
render Fired just after a symbol+acetate+platina render.
View change events inherited from GleoMap
Event Data Description
crsoffset Fired when the CRS changes explicitly (by setting the map's CRS, or passing a crs option to a setView call) Fired when the CRS undergoes an implicit offset to avoid precision loss.
viewchanged Fired whenever any of the platina's view parts (center, scale/span, yaw, crs) changes.
Symbol/loader management events inherited from GleoMap
Event Data Description
symbolsadded Fired whenever symbols are added to any of the platina's acetates.
symbolsremoved Fired whenever symbols are removed from any of th platina's acetates.
Inertia animation events inherited from GleoMap
Event Data Description
inertiastart Event Fired at the beginning of an inertia animation.
inertiaend Event Fired at the end of an inertia animation.

πŸ”—Methods

Methods inherited from GleoMap
Method Returns Description
destroy() this Destroys the map, freeing the container. Should free all used GPU resources, destroy DOM elements for controls and pins, and remove all DOM event listeners.

No methods should be called on a destroyed map.

redraw() this Forcefully redraws all acetates.
View setters inherited from GleoMap
Method Returns Description
setView(<SetView Options> opts?) this (Re-)sets the map view: center (including its CRS), scale (AKA zoom) and yaw.

This will trigger an animation to the desired center/scale if the appropriate Actuators are enabled.

fitBounds(<Array of Number> bounds, <SetView Options> opts?) this Sets the platina's center and scale so that the given bounds (given in [minX, minY, maxX, maxY] form, and in the platina's CRS) are fully visible.

Any other given SetView Options will be merged with the calculated center&scale.

fitBounds(ExpandBox, <SetView Options> opts?) this Idem, but using an ExpandBox instead.
zoomInto(<Geometry> geometry, <Number> scale, <setView Options> opts?) this Performs a setView operation so that the given geometry stays at the same pixel.

Meant for user interactions on the map, including double-clicking and zooming into clusters from a Clusterer. Akin to Leaflet's zoomAround.

Actuator interface methods inherited from GleoMap
Method Returns Description
registerSetViewFilter(<Function> fn) this Registers a new filter function fn which will intercept calls to setView. This function receives a set of setView Options and must return a set of setView Options, or false (which aborts the setView).

This is used to enforce map view constraints, as those of ZoomYawSnapActuator.

unregisterSetViewFilter(<Function> fn) this Opposite of registerSetViewFilter.
Symbol/Loader management inherited from GleoMap
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given GleoSymbol to the appropriate acetate.

Users should note that repeated calls to add() are, in performance terms, much worse than a single call to multiAdd(). Try to avoid repeated calls to add() inside a loop.

add(<Loader> loader) this Attaches the given Loader to the map.
add(<AbstractPin> pin) this Attaches the given pin (HTMLPin et al) to the map.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given GleoSymbols to the appropriate acetate(s).
multiAdd(<Array of AbstractPin> symbols) this Adds the given pins (HTMLPins, Balloons) to the map.

It's also possible to call multiAdd with an array containing both symbols and pins.

remove(<GleoSymbol> symbol) this Removes the symbol from this map.
remove(<AbstractPin> pin) this Removes the pin from this map
multiRemove(<Array of GleoSymbol> symbols) this Removes several symbols from this map.
multiRemove(<Array of AbstractPin> pins) this Removes several pins from this map.

It's also possible to call multiRemove with an array containing both symbols and pins.

addAcetate(<Acetate> ac) this Adds a new Acetate to the map.

Calling this method is usually not needed, as there are default acetates.

Interaction behaviour options inherited from GleoMap
Method Returns Description
enable() this Enables this actuator. This will capture pointerdown, pointerup and pointermove (between pointerdown and pointerup) DOM events.
disable() this Disables this actuator. Stops capturing pointerdown, pointermove, pointerup DOM events.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from GleoMap
Property Type Description
actuators Map of Actuator A key-value Map of actuator names to Actuator instances.
container HTMLDivElement The DOM element containing the map.
platina Platina The Platina that this GleoMap uses. Read only.
glii GliiFactory The Glii instance used by the platina. Read-only.
Controls interface inherited from GleoMap
Property Type Description
controlPositions Map of String to HTMLElement A Map containing the four control container corners, indexed by a two-letter string (one of tl, tr, bl, br)
View setter/getter properties inherited from GleoMap
Property Type Description
center RawGeometry The center of the map, as a point geometry.
scale Number The scale, in CRS units per CSS pixel.
span Number The span, in CRS units per diagonal.
crs BaseCRS The CRS being used by the platina.
yawDegrees Number The yaw rotation angle, in clockwise degrees.
yawRadians Number The yaw rotation angle, in counter-clockwise radians.
bbox ExpandBox A rectangular bounding box that completely covers the map viewport. This box is aligned to the CRS, not to the viewport. Setting its value is akin to running fitBounds.
Interaction behaviour properties inherited from GleoMap
Property Type Description
maxBounds Runtime value of the maxBounds initialization option.

Updating its value will affect future map panning operations.

minSpan Runtime value for the minSpan initialization option.

Updating its value will affect future zoom operations.

maxSpan Akin to the minSpan property.
wheelPxPerLog2 Number Runtime value of the wheelPxPerLog2 initialization option.

Updating its value will affect future scrollwheel zoom operations.

wheelZoomDuration Number Runtime value of the wheelZoomDuration initialization option.

Updating its value will affect future scrollwheel zoom operations.

zoonSnapFactor Runtime value for the zoomSpanFactor option. Updating its value will affect future zoom operations.
yawSnapTarget Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapPeriod Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
yawSnapTolerance Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.
zoomSnapOnlyOnYawSnap Runtime value for the yawSnapTarget option. Updating its value will affect future yaw operations.

πŸ”—DefaultGeometry

This module contains facilities for easing the task of defining geometries when a well-known CRS is used for all input coordinates.

Note that this functionality is global to all maps since it must work for stuff which does not belong to any map, or belongs to more than one map at the same time.

πŸ”—Usage example

import { setFactory, factory } from `gleo/src/coords/DefaultGeometry.mjs`;

setFactory(function(coords) {
	return new Geometry( myFavouriteCRS, coords);
}

map.center = [100, -500]; // These stand-alone coordinates will internally
                          // be converted into a `Geometry` of `myFavouriteCRS`

Calling setFactory more than once (either manually or by importing MercatorMap) is highly discouraged.

πŸ”—Functions

Function Returns Description
setFactory(<Function> fn) undefined Sets the factory function for transforming stand-alone coordinates into geometries with a specific CRS.

The function must take a single coordinates argument, and return a Geometry instance.

factory(<Array of Number> coords) RawGeometry The factory function that takes coordinates and returns Geometrys.

All Gleo functionality that can take geometries as input must pass it through this factory function.

factory(<RawGeometry> geom) RawGeometry When the factory function receives a Geometry, it is returned as is.

In this way, all Gleo functionality that uses this factory will be able to take as input either stand-alone coordinates, or fully-defined Geometrys, in a transparent way.

This check is performed by the DefaultGeometry module; users do not need to check whether the input is a RawGeometry instance when using setFactory().

factory(<undefined> geom) RawGeometry A "null" geometry, containing zero vertices, will be returned.

πŸ”—GleoSymbol

An abstract base graphical symbol.

(This would ideally called Symbol, but that's a reserved word in ES6).

In Gleo, all symbols are closely coupled to an Acetate. e.g. Dot symbols are drawn via an AcetateDot. That relationship is called the "fitting" acetate for a symbol.

It might be possible that a symbol can fit in more than one kind of Acetate, but symbol classes must always define a default acetate.

πŸ”—Constructor

Constructor
new GleoSymbol(<RawGeometry> geom, <GleoSymbol Options> opts)
new GleoSymbol(<Array of Number> geom, <GleoSymbol Options> opts)

πŸ”—Options

Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events

All GleoSymbols (set as interactive, and being drawn in an appropriate acetate) fire pointer events, in a way similar to how HTMLElements fire DOM PointerEvents.

Gleo adds the Geometry corresponding to the pixel the event took place in.

Most events are GleoPointerEvents, but some browsers fire exclusively MouseEvents for click/auxclick/contextmenu. In that case, expect a GleoMouseEvent instead.

Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods

Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Acetate Interface

Method Returns Description
updateRefs(<Acetate> ac, <Number> atb, <Number> idx) this Internal usage only, called from a corresponding Acetate. Updates the acetate that this symbol is being currently drawn on, the base vertex attribute slot (atb), and the base vertex index slot (idx).
_setGlobalStrides() this OBSOLETE: use _setGlobalStrides/_setGeometryStrides/_setPerPointStrides instead.

Should be implemented by subclasses. Acetates shall call this method with one StridedTypedArray per attribute, plus a TypedArray for the index buffer, plus any extra data they need.

A symbol shall fill up values in the given strided arrays (based on the attrBase property) as well as in the typed array for the index buffer (based on the idxBase property).

Shall be implemented by subclasses. Acetates shall call this method with any number of StridedTypedArrays plus a TypedArray fir the index buffer, plus any extra data they need.

The acetate shall call this method once, when the symbol is allocated.

_setGeometryStrides(<Geometry> geom, <Array of StridedArray> perPointStrides) this As _setGlobalStrides, but the acetate may call this whenever the geometry of the symbol changes. It receives the projected geometry and the per-point strides.

This is needed for e.g. recalculation of line joins in Stroke (and updating the attribute buffer(s) where the line join data is in).

_setPerPointStrides(<Number> n, <Symbol> pointType, <Number> vtx, <Number ...> vtxCount) this As _setGlobalStrides, but the acetate shall call this once per each point in the symbol's geometry.

This method will receive the index of the point within the geometry (0-indexed), the type of point (whether the point is a line join, or line end, or a standalone point, or part of a mesh), the vertex index for this point, the amount of vertices spawned for that point, plus any strided arrays.

Pointer methods

Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

Acetate interface

GleoSymbols must expose the following information, so that Acetates can allocate resources properly.

GleoSymbols can be thought as a collection of GL vertices (with attributes) and primitive slots (i.e. three vertex indices per triangle). A GleoSymbol must expose the amount of attribute and index slots needed, so that Acetate functionality can allocate space for attributes and for primitive indices.

Note that Dots and AcetateDots ignore idxBase and idxLength, because they have no need for keeping track of how primitives must be drawn (because of the POINTS GL draw mode).

Property Type Description
attrBase Number The (0-indexed) base offset for vertex attributes of this symbol. Set by Acetate. This is undefined until the Acetate allocates the GPU resources (vertices) for this symbol.
idxBase Number The (0-indexed) base offset for primitive slots of this symbol. Set by AcetateVertices. This is undefined until the AcetateVertices allocates the GPU resources (triangle primitive indices) for this symbol.
attrLength Number The amount of vertex attribute slots this symbol needs. Must be set by the symbol during construction time.
idxLength Number The amount of primitive slots this symbol needs. Must be set by the symbol during construction time.
_id Number The interactive ID of the symbol, to let AcetateInteractive functionality find it to dispatch pointer events.

Static properties

Any subclasses must implement the following static property.
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—MultiSymbol

A logical grouping of GleoSymbols, to ease the task of managing them at once.

Adding/removing it from a map, will add/remove all of the component symbols at once. Idem for (re-)setting its geometry. Idem for pointer events: events defined for the MultiSymbol will be trigger on any of its components.

This is meant for static sets of symbols which represent the same geographical feature, and share the same geometry (or close geometries). Once created, no new symbols can be added to a MultiSymbol.

For a counterpart where symbols can be added/removed, see the SymbolGroup loader.

πŸ”—Constructor

Constructor
new MultiSymbol(<Array of GleoSymbol> syms)

πŸ”—Options

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
bbox Returns a bounding box which covers all the geometries of all component symbols.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—Dot

A 1-pixel dot, with RGBA colour.

Dots are drawn in an AcetateDot, which leverages the POINTS drawMode of WebGL. As a consequence, the code for Dots is closely coupled to the code for AcetateDots.

πŸ”—Constructor

Static properties

Constructor
new Dot(<Geometry> geom, <Dot Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour [0,0,0,255] The colour of the dot.
size Number 1 The size of the dot, in GL pixels. Values larger than 1 will draw a square with this many pixels per side.

The maximum value depends on the GPU and WebGL/OpenGL stack.

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface methods

For internal use only
Method Returns Description
_setGlobalStrides(<StridedTypedArray> stridedColour, <StridedTypedArray> stridedDotSize) this
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateDot The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—VertexDot

An alternative implementation of the Dot symbol.

This is done exclusively for compatibility with the trajectorify decorator.

The technical difference is that Dot assumes always one vertex per Dot, whereas VertexDot behaves as multiple-vertices-per-symbol. That allows VertexDot to be trajectorifyd.

πŸ”—Constructor

Static properties

Constructor
new VertexDot(<Geometry> geom, <VertexDot Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour [0,0,0,255] The colour of the dot.
size Number 1 The size of the dot, in GL pixels. Values larger than 1 will draw a square with this many pixels per side.

The maximum value depends on the GPU and WebGL/OpenGL stack.

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateVertexDot The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Hair

A 1-pixel line, with a (possibly) different RGBA colour per hair.

Hairs are drawn in an AcetateHair, which leverages the LINES drawMode of WebGL. Therefore, they are not antialiased.

πŸ”—Constructor

Constructor
new Hair(<Geometry> geom, <Hair Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour [0,0,0,255] The colour of the hair.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate Interface

Method Returns Description
_setPerPointStrides(<Number> n, <Symbol> pointType) this As _setGlobalStrides, but only affects the n-th point in the symbol's geometry.

Takes the following parameters:

  • Index for the nth point in the geometry
  • Type of point extrusion (always "mesh" for hairs)
  • Index for the vertex attribute data
  • Number of vertices spawned for this geometry point (always 1 for hairs)
  • strided arrays, as per _getPerPointStridedArrays.

This method can be overriden or extended by subclasses and/or decorators.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateHair The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Stroke

A stroked line, with variable width, colour, dashing, and style of line joins.

The Geometry used in the constructor might have any depth. If the depth is 1, a single continuous stroke line is created. If it's deeper (e.g. geometries for polygons, multipolylines or multipolygons), then multiple line strokes are created, one per ring.

πŸ”—Constructor

Constructor
new Stroke(<Geometry> geom, <Stroke Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour '#3388ff' The colour of the stroke.
width Number 2 The width of the stroke, in CSS pixels
dashArray undefined undefined An undefined (or falsy) value for dashArray disables line dashing.
dashArray Array of Number An Array of either 2 or 4 Numbers, defining the line dashing. Works as per 2D Canvas' setLineDash, but the array must have either 0, 2 or 4 values.
joins Join type Stroke.OUTBEVEL Defines the shape of line joins. Must be one of Stroke.MITER, Stroke.BEVEL or Stroke.OUTBEVEL.
caps Cap type Stroke.BUTT Defines the shape of line caps. Must be one of Stroke.BUTT, or Stroke.SQUARE.
centerline Boolean false Whether the stroke has vertices along its centerline, or not.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate Interface

Method Returns Description
_setPerPointStrides(<Number> n, <Symbol> pointType) this As _setGlobalStrides, but only affects the n-th point in the symbol's geometry.

Takes the following parameters:

  • Index for the nth point in the geometry
  • Type of point extrusion: line join, line cap, or bevel-less loop line join
  • Index for the vertex attribute data
  • Number of vertices spawned for this geometry point
  • strided arrays, as per _getPerPointStridedArrays.

This method can be overriden or extended by subclasses and/or decorators.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
dashArray Array of Number Runtime value of the dashArray constructor option. Can be updated.
colour Colour Runtime value of the colour constructor option. Can be updated.
verticesPerEnd Number / Read-only getter for the number of line vertices used per line end/cap.
trianglesPerEnd Number / Read-only getter for the number of triangles per line end/cap.
verticesPerJoin Number / Read-only getter for the number of line vertices used per line join.
centerline Number / Read-only getter for whether there's vertices in the stroke centerline.
width Number / Read-only getter for the stroke constructor option.

Static properties

Static property constants that define how the line caps are drawn; use one of these in the caps option of the Stroke constructor. For context, see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
Property Type Description
Acetate Prototype of AcetateStroke The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—

πŸ”—Join type

Static property constants that define how the line joins are drawn; use one of these in the joins option of the Stroke constructor. For context, see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
Property Type Description
MITER Symbol "Miter" joins are sharp, and look bad with very acute angles, but require less vertices and triangles to be drawn.
BEVEL Symbol "Bevel" joins look like miters cut in a straight edge. They use points extruded perpendicularly to each segment.
OUTBEVEL Symbol "Outer bevel" joins look like bevels, in such a way that a circle of the same diameter as the stroke width, positioned at the intersection of two segments, would be tangent to each segment and to the bevel edge.

πŸ”—

πŸ”—StrokeRoad

A symbol for drawing roads - works as two Strokes in one, with two different widths, two different colours, and an explicit Z-index for drawing tunnels/bridges under/over other roads.

πŸ”—Constructor

πŸ”—Options

Static properties

Option Type Default Description
outColour Colour 'black' The colour of the outer casing of the road stroke
width Number 2 The entire width of the stroke, in CSS pixels
outWidth Number 1 The width of the outer casing of the road stroke, in CSS pixels.

Note that the inner width of the stroke is width minus outWidth.

zIndex Number 0 The z-index of this symbol (relative to others in this acetate). It will be encoded in a Int16Array, so the value must be an integer between -32000 and +32000
Options inherited from Stroke
Option Type Default Description
colour Colour '#3388ff' The colour of the stroke.
dashArray undefined undefined An undefined (or falsy) value for dashArray disables line dashing.
dashArray Array of Number An Array of either 2 or 4 Numbers, defining the line dashing. Works as per 2D Canvas' setLineDash, but the array must have either 0, 2 or 4 values.
joins Join type Stroke.OUTBEVEL Defines the shape of line joins. Must be one of Stroke.MITER, Stroke.BEVEL or Stroke.OUTBEVEL.
caps Cap type Stroke.BUTT Defines the shape of line caps. Must be one of Stroke.BUTT, or Stroke.SQUARE.
centerline Boolean false Whether the stroke has vertices along its centerline, or not.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateStrokeRoad The Acetate class that draws this symbol.
Properties inherited from Stroke
Property Type Description
dashArray Array of Number Runtime value of the dashArray constructor option. Can be updated.
colour Colour Runtime value of the colour constructor option. Can be updated.
verticesPerEnd Number / Read-only getter for the number of line vertices used per line end/cap.
trianglesPerEnd Number / Read-only getter for the number of triangles per line end/cap.
verticesPerJoin Number / Read-only getter for the number of line vertices used per line join.
centerline Number / Read-only getter for whether there's vertices in the stroke centerline.
width Number / Read-only getter for the stroke constructor option.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Fill

Simple (single-colour) fill for polygons.

The Geometry might have any depth:

This leverages Volodymir Agafonkin's earcut library.

πŸ”—Constructor

Static properties

Constructor
new Fill(<Geometry> geom, <Fill Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour '#3388ff33' The colour of the fill symbol.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
colour Colour The colour for all the dots. Can be updated.

Static properties

Property Type Description
Acetate Prototype of AcetateFill The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—MonteCarloFill

Spawns 1-pixel dots randomly sprinkled through the area of the given polygon Geometry. Useful for representing area-relative densities.

Otherwise, it's similar to Fill.

πŸ”—Constructor

Static properties

Constructor
new MonteCarloFill(<Geometry> geom, <MonteCarloFill Options> opts?)

πŸ”—Options

Option Type Default Description
colour Colour '#3388ff33' The colour of the fill symbol.
count Number 0 The number of dots to spawn
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
colour Colour The colour for all the dots. Can be updated.

Static properties

Property Type Description
Acetate Prototype of AcetateMonteCarlo The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—ConformalRaster

A rectangular, conformal (i.e. matching the display CRS) RGB(A) raster image.

If the Geometry of the raster has a different CRS than the map, consider using ArrugatedRaster instead.

πŸ”—Constructor

A ConformalRaster is created from a Geometry and a RGB(A) image. The image can be either:
  • An instance of HTMLImageElement, which must be fully loaded
  • A Promise to such a HTMLImageElement instance
  • A String containing the URL for the image In the last two cases, the addition of the ConformalRaster to the platina or map will be delayed until the image has been loaded.

The Geometry must have one ring of 4 elements. The image is assumed to be quadrangular (rectangular or quasi-rectangular), and each coordinate is mapped to the four "corners" of the image.

The 4 points of the geometry must be sorted as follows:

  • Upper-Left corner of the raster
  • Upper-right idem
  • Lower-right idem
  • Lower-left idem
Constructor
new ConformalRaster(<Geometry> coords, <HTMLImageElement> raster)
new ConformalRaster(<Geometry> coords, <Promise to HTMLImageElement> raster)
new ConformalRaster(<Geometry> coords, <String> raster)

πŸ”—Options

Option Type Default Description
interpolate Boolean false Whether to use bilinear pixel interpolation or not.

In other words: false means pixellated, true means smoother.

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Method Returns Description
setGeometry(<Geometry> geom) this Moves this conformal raster symbol to a new bounding box, as given by geom.

The given geometry must have one ring of 4 elements.

buildTexture(<Glii> glii, <AbstractRaster> raster) Promise of this Internal usage only, called from AcetateConformalRaster and only once the image promise has been resolved. Builds the texture given the Glii/WebGL context. Texture dumping might be async.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap). Cleans up resources dedicated to the GL texture.
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
raster Promise to AbstractRaster A Promise to the raster image (when instantiated with a Promise or a String containing a URL)
image AbstractRaster The raster image itself (when instantiated with a fully-loaded HTMLImageElement or GeoTIFF or the like)
texture Texture The Glii texture containing this raster's RGB(A) image. Is initialized by an acetate, after this symbol has been added to it.

Static properties

Property Type Description
Acetate Prototype of AcetateConformalRaster The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—ArrugatedRaster

A warped, reprojected (AKA "arrugated") RGB(A) raster image.

It's used just as a ConformalRaster would, but will work properly when being reprojected - i.e. when the CRS of the raster's geometry is different from the map's CRS.

πŸ”—Constructor

πŸ”—Options

Options inherited from ConformalRaster
Option Type Default Description
interpolate Boolean false Whether to use bilinear pixel interpolation or not.

In other words: false means pixellated, true means smoother.

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate Interface

Method Returns Description
updateRefs(<AcetateConformalRaster> ac, <Number> atb, <Object of Number to Number> idx, <Number> minLoD, <Number> maxLoD) this Internal usage only, called from AcetateConformalRaster.

An arrugated raster has several index slots - one per level of detail (AKA "zoom level"). Those indices refer to the same set of vertex attributes (i.e. the vertices and their data are completely shared between LoDs).

This method updates the acetate that this raster is being currently drawn on, the base vertex attribute slots (atb), the base vertex index slots (idx), and the minimum/maximum LoD (Level of Detail) for the data structures (each LoD maps to a CRS scale value, so the acetate can chose which set of triangles to render at a given scale).

Methods inherited from ConformalRaster
Method Returns Description
setGeometry(<Geometry> geom) this Moves this conformal raster symbol to a new bounding box, as given by geom.

The given geometry must have one ring of 4 elements.

buildTexture(<Glii> glii, <AbstractRaster> raster) Promise of this Internal usage only, called from AcetateConformalRaster and only once the image promise has been resolved. Builds the texture given the Glii/WebGL context. Texture dumping might be async.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap). Cleans up resources dedicated to the GL texture.
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateArrugatedRaster The Acetate class that draws this symbol.
Properties inherited from ConformalRaster
Property Type Description
raster Promise to AbstractRaster A Promise to the raster image (when instantiated with a Promise or a String containing a URL)
image AbstractRaster The raster image itself (when instantiated with a fully-loaded HTMLImageElement or GeoTIFF or the like)
texture Texture The Glii texture containing this raster's RGB(A) image. Is initialized by an acetate, after this symbol has been added to it.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Mesh

Displays a mesh of connected points, each of them with a RGB(A) colour, performing linear interpolation.

This is a mesh in the geospatial sense of the word (see e.g. MDAL). It is not a mesh in the 3D computer graphics sense of the word (since 3D graphics usually imply that a mesh includes shaders or materials, see e.g. a threeJS mesh). In particular, all Gleo Meshes are rendered using the same shader.

If your mesh data does not contain RGB(A) values for each point, consider using a symbol decorator such as intensify.

πŸ”—Usage example

const mesh = new Mesh(
	// The geometry shall be interpreted like a multipoint; rings are ignored.
	[
		[5, 5],
		[7, 3],
		[6, 8],
		[10, 12],
	],

	// The colours are assigned to the points in the geometry on a one-to-one basis
	['red', 'blue', 'green', 'yellow'],

	// The triangles are defined in a single array. Each set of 3 point indices
	// (0-indexed, relative to the geometry) defines a triangle.
	[0, 1, 2,    0, 1, 3],

	// Obviously accepts options from GleoSymbol
	{
		interactive: true,
		attribution: "FooBar"
	}
).addTo(gleoMap);

πŸ”—Constructor

Static properties

Constructor
new Mesh(<Geometry> geom, <Array of Colour> values, <array of Number> triangles, <Mesh Options> opts?)

πŸ”—Options

Static properties

Option Type Default Description
values Array of Colour The colours for the points in the mesh, one value per point.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateMesh The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—DelaunayMesh

A Mesh which is calculated from a multipoint Geometry, leveraging Volodymir Agafonkin's delaunator implementation of the Delaunay triangulation.

Works as a Mesh, but without the need of specifying the triangles array at instantiation time.

Note that the triangulation algorithm runs on the CRS of the data, and not on the display CRS of the map.

πŸ”—Constructor

Constructor
new Mesh(<Geometry> geom, <DelaunayMesh Options> opts?)

πŸ”—Options

Static properties inherited from Mesh
Option Type Default Description
values Array of Colour The colours for the points in the mesh, one value per point.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties inherited from Mesh
Property Type Description
Acetate Prototype of AcetateMesh The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—ExtrudedPoint

Abstract class, containing functionality common to symbols displayed as triangles whose vertices are extruded from a central point, which corresponds to the point Geometry of the symbol.

i.e. Sprite, CircleFill, CircleStroke, and Pie so far.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Subclass interface

Method Returns Description
_setStridedExtrusion(<StridedTypedArray> strideExtrusion) undefined Must be implemented by subclasses; must set values into the given StridedTypedArray.
_setGlobalStrides() undefined Must be implemented by subclasses. Will receive a variable number of arguments depending on the Acetate implementaion: strided attribute arrays, strided index buffer, and constants. The implementation must fill the strided arrays appropriately.
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—Sprite

A rectangular image, displayed at a constant screen ratio.

Synonym of "marker"s and "icon"s.

Works with point geometries only.

πŸ”—Usage example

new Sprite([0, 0], {
	image: "img/marker.png",
	spriteAnchor: [13, 41]
}).addTo(map);

πŸ”—Constructor

Static properties

Constructor
new Sprite(<Geometry> geom, <Sprite Options> opts?)
new Sprite(<Array of Number> geom, <Sprite Options> opts?)

πŸ”—Options

Option Type Default Description
image HTMLImageElement The image for the sprite. When given an instance of HTMLImageElement, the image should be completely loaded.
image Promise to HTMLImageElement It might be convenient to instantiate a Sprite without knowning if its image has been loaded. Display of the sprite will be delayed until this Promise resolves.
image String For convenience, a String containing a URL can be passed.
image URL For convenience, a URL instance can be passed.
spriteAnchor Array of Number The coordinates of the pixel which shall display directly on the sprite's geometry (think "the tip of the pin").

These coordinates are to be given in [x, y] form, in image pixels relative to the top-left corner of the sprite image.

Negative values are interpreted as relative to the bottom-right corner of the image, instead. For this purpose, +0 and -0 are handled as different numbers.

spriteAnchor Array of String ["50%","50%"] The sprite anchor can be given as two numeric strings ending with a percent sign (e.g. ["50%", "100%"]). Anchor percentages are relative to the size of the image.
spriteStart Array of Number [0, 0] When the image for a Sprite is a spritesheet, this is the top-left offset of the sprite within the spritesheet.

This is to be given in [x, y] form, in image pixels. Defaults to [0, 0], the top-left corner of the image.

spriteSize Array of Number * The size of the sprite, in [x, y] form, in image pixels. Defaults to the size of the image.

When the image for a Sprite is a spritesheet, this should be set to the size of the sprite (always smaller than the image itself).

spriteScale Number 1 Scale factor between image pixels and CSS pixels. Use 0.5 (or rather, 1/window.devicePixelRatio) for "hi-DPI" icons, or 2 to double the size of the sprite.
yaw Number 0 Yaw rotation of the sprite, relative to the "up" direction of the map's <canvas> (not relative to the direction of the CRS's y coordinate or "northing"), in clockwise degrees.
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideUV, <StridedTypedArray> strideExtrude, <Number> texSize) this Sets the appropriate values in the StridedTypedArrays.
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
yaw Number Runtime value of the yaw option: the yaw rotation of the sprite, in clockwise degrees. Can be updated.
spriteScale Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.

Static properties

Property Type Description
Acetate Prototype of AcetateSprite The Acetate class that draws this symbol.

Acetate interface

Property Type Description
bin Bin An array of the form [x1,y1, x2,y2], containing the coordinates of this sprite's image within the acetate's atlas texture.
image HTMLImageElement The actual image for this sprite. The acetate will copy it into a texture atlas.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—TextLabel

A text label anchored to a point geometry.

Internally treated like a Sprite, by rasterizing the text via 2D Canvas.

πŸ”—Usage example

new TextLabel([0, 0], {
	str: "Hello world!",
}).addTo(map);

πŸ”—Constructor

Constructor
new TextLabel(<Geometry> geom, <TextLabel Options> opts?)

πŸ”—Options

Option Type Default Description
str String The text itself
font String "16px Sans" A definition of a CSS font
colour String "black" The CSS colour for the text fill (not a gleo Colour!).
align String "start" Text alignment, as per 2D canvas' textAlign.
baseline String "alphabetic" Text baseline, as per 2D canvas' textBaseline.
outlineWidth Number 0 Size, in CSS pixels, of the text outline
outlineColour String "white" The CSS colour for the text outline (not a gleo Colour!)
cache Boolean false Whether to cache the rendered text for later use. Should be set to true if the text label is expected to be removed/re-added, or if several TextLabels with the exact same data exist.
Options inherited from Sprite
Option Type Default Description
image HTMLImageElement The image for the sprite. When given an instance of HTMLImageElement, the image should be completely loaded.
image Promise to HTMLImageElement It might be convenient to instantiate a Sprite without knowning if its image has been loaded. Display of the sprite will be delayed until this Promise resolves.
image String For convenience, a String containing a URL can be passed.
image URL For convenience, a URL instance can be passed.
spriteAnchor Array of Number The coordinates of the pixel which shall display directly on the sprite's geometry (think "the tip of the pin").

These coordinates are to be given in [x, y] form, in image pixels relative to the top-left corner of the sprite image.

Negative values are interpreted as relative to the bottom-right corner of the image, instead. For this purpose, +0 and -0 are handled as different numbers.

spriteAnchor Array of String ["50%","50%"] The sprite anchor can be given as two numeric strings ending with a percent sign (e.g. ["50%", "100%"]). Anchor percentages are relative to the size of the image.
spriteStart Array of Number [0, 0] When the image for a Sprite is a spritesheet, this is the top-left offset of the sprite within the spritesheet.

This is to be given in [x, y] form, in image pixels. Defaults to [0, 0], the top-left corner of the image.

spriteSize Array of Number * The size of the sprite, in [x, y] form, in image pixels. Defaults to the size of the image.

When the image for a Sprite is a spritesheet, this should be set to the size of the sprite (always smaller than the image itself).

spriteScale Number 1 Scale factor between image pixels and CSS pixels. Use 0.5 (or rather, 1/window.devicePixelRatio) for "hi-DPI" icons, or 2 to double the size of the sprite.
yaw Number 0 Yaw rotation of the sprite, relative to the "up" direction of the map's <canvas> (not relative to the direction of the CRS's y coordinate or "northing"), in clockwise degrees.
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Sprite
Property Type Description
yaw Number Runtime value of the yaw option: the yaw rotation of the sprite, in clockwise degrees. Can be updated.
spriteScale Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.
Static properties inherited from Sprite
Property Type Description
Acetate Prototype of AcetateSprite The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—TintedSprite

As Sprite, but with a colour tint applied.

πŸ”—Usage example

new Sprite([0, 0], {
	image: "img/whitemarker.png",
	spriteAnchor: [13, 41]
	tint: "red",
}).addTo(map);

πŸ”—Constructor

Static properties

Constructor
new TintedSprite(<Geometry> geom, <TintedSprite Options> opts?)
new TintedSprite(<Array of Number> geom, <TintedSprite Options> opts?)

πŸ”—Options

Option Type Default Description
tint Colour [255,255,255,255] The tint colour for the sprite. The result colour is the colour multiplication of the sprite's pixels and the tint.
Options inherited from Sprite
Option Type Default Description
image HTMLImageElement The image for the sprite. When given an instance of HTMLImageElement, the image should be completely loaded.
image Promise to HTMLImageElement It might be convenient to instantiate a Sprite without knowning if its image has been loaded. Display of the sprite will be delayed until this Promise resolves.
image String For convenience, a String containing a URL can be passed.
image URL For convenience, a URL instance can be passed.
spriteAnchor Array of Number The coordinates of the pixel which shall display directly on the sprite's geometry (think "the tip of the pin").

These coordinates are to be given in [x, y] form, in image pixels relative to the top-left corner of the sprite image.

Negative values are interpreted as relative to the bottom-right corner of the image, instead. For this purpose, +0 and -0 are handled as different numbers.

spriteAnchor Array of String ["50%","50%"] The sprite anchor can be given as two numeric strings ending with a percent sign (e.g. ["50%", "100%"]). Anchor percentages are relative to the size of the image.
spriteStart Array of Number [0, 0] When the image for a Sprite is a spritesheet, this is the top-left offset of the sprite within the spritesheet.

This is to be given in [x, y] form, in image pixels. Defaults to [0, 0], the top-left corner of the image.

spriteSize Array of Number * The size of the sprite, in [x, y] form, in image pixels. Defaults to the size of the image.

When the image for a Sprite is a spritesheet, this should be set to the size of the sprite (always smaller than the image itself).

spriteScale Number 1 Scale factor between image pixels and CSS pixels. Use 0.5 (or rather, 1/window.devicePixelRatio) for "hi-DPI" icons, or 2 to double the size of the sprite.
yaw Number 0 Yaw rotation of the sprite, relative to the "up" direction of the map's <canvas> (not relative to the direction of the CRS's y coordinate or "northing"), in clockwise degrees.
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
tint Colour Gets or sets the tint colour for this sprite

Static properties

Property Type Description
Acetate Prototype of AcetateTintedSprite The Acetate class that draws this symbol.
Properties inherited from Sprite
Property Type Description
yaw Number Runtime value of the yaw option: the yaw rotation of the sprite, in clockwise degrees. Can be updated.
spriteScale Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—CircleFill

The "fill" part of a circle symbol - a circle of constant radius (measured in CSS pixels), spawning from a point Geometry in the circle center.

πŸ”—Usage example

new CircleFill([0, 0], {
	colour: "red",
	radius: 40
}).addTo(map);

πŸ”—Constructor

Static properties

Constructor
new CircleFill(<Geometry> geom, <CircleFill Options> opts?)

πŸ”—Options

Option Type Default Description
radius Number 20 Radius of the circle, in CSS pixels
colour Colour '#3388ff33' The fill colour
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
colour The colour of this CircleFill. Read-only.

Static properties

Property Type Description
Acetate Prototype of AcetateSolidExtrusion The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—CircleStroke

The "stroke" part of a circle symbol - a line of constant width (in CSS pixels), going around the circumference of a circle with its center in the given Geometry.

πŸ”—Usage example

new CircleStroke([0, 0], {
	colour: "red",
	radius: 40,
	width: 3
}).addTo(map);

πŸ”—Constructor

Static properties

Constructor
new CircleStroke(<Geometry> geom, <CircleStroke Options> opts?)

πŸ”—Options

Option Type Default Description
radius Number 20 Radius of the circle, in CSS pixels
colour Colour '#3388ff' The stroke colour
width Number 2 The width of the stroke, in CSS pixels
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateSolidExtrusion The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Pie

A circular pie chart, displayed at a constant screen ratio.

πŸ”—Usage example

let pie = new Pie(geometry, {
	radius: 40,
	slices: {
		red: 10,
		green: 15,
		blue: 8,
		pink: 11,
		cyan: 12,
		black: 13,
	},
}

πŸ”—Constructor

Static properties

Constructor
new Pie(<Geometry> geom, <Pie Options> opts?)

πŸ”—Options

Option Type Default Description
radius Number 20 Radius of the pie chart, in CSS pixels
slices Object of Colour to Number The data for the pie chart slices. Keys must be Colours, values must be Numbers.The size of the pie chart's slices will be directly proportional to the data value.
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateSolidExtrusion The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Halo

A Halo is a circular symbol with multiple colour stops in a radial gradient, each colour stop having a different radius (specified in CSS pixels).

πŸ”—Usage example

let halo = new Halo(geometry, {
  stops: {
    90: [255,0,0,0],
    100: [255,0,0,255],
    110: [255,0,0,0]
  }
});

πŸ”—Constructor

Static properties

Constructor
new Halo(<Geometry> geom, <Halo Options> opts?)

πŸ”—Options

Option Type Default Description
stops Object of Number to Colour {} A key-value map of radii to Colours
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateSolidExtrusion The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—RadarSweep

Decorative animated rotating radar sweep.

Behaves similar to a CircleFill, but the fill colour varies radially, losing opacity. The end result is the movie-like sweep effect of a old-timey CRT radar.

πŸ”—Constructor

Static properties

Constructor
new RadarSweep(<Geometry> geom, <RadarSweep Options> opts?)

πŸ”—Options

Option Type Default Description
speed Number 0.5 Rotation speed, in revolutions per second.
Options inherited from CircleFill
Option Type Default Description
radius Number 20 Radius of the circle, in CSS pixels
colour Colour '#3388ff33' The fill colour
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateRotatingExtrusion The Acetate class that draws this symbol.
Properties inherited from CircleFill
Property Type Description
colour The colour of this CircleFill. Read-only.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—HeadingTriangle

A small triangle, meant to signify heading (or direction, or course) of a feature; should be used in conjunction with other symbol to represent the feature itself.

Works with point geometries only.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
distance Number 16 The distance from the geometry to the base of the triangle, in CSS pixels.
width Number 8 The width of the triangle, in CSS pixels.
length Number 6 The length of the triangle, in CSS pixels.
fillColour Colour 'white' The colour for the inside area of the triangle.
borderColour Colour 'black' The colour for the border of the triangle.
borderWidth Number 1 The width of the border, in CSS pixels.
feather Number 0.5 The width of the antialiasing feather, in CSS pixels.
yaw Number 0 The yaw rotation of the triangle, in clockwise degrees from "north"
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideFillColour, <StridedTypedArray> strideBorderColour, <StridedTypedArray> strideBorder, <StridedTypedArray> strideEdgeDistance, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
yaw Number Runtime value of the yaw option: the yaw rotation of the sprite, in clockwise degrees. Can be updated.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—OffScreenIndicator

A HeadingTriangle that displays only when its point geometry is off-screen. It appears at the edge of the viewport, heading towards the geometry.

The use case is to call attention to other point symbols when they go off-screen.

See also the screenedgify decorator for a similar concept.

πŸ”—Constructor

πŸ”—Options

Options inherited from HeadingTriangle
Option Type Default Description
distance Number 16 The distance from the geometry to the base of the triangle, in CSS pixels.
width Number 8 The width of the triangle, in CSS pixels.
length Number 6 The length of the triangle, in CSS pixels.
fillColour Colour 'white' The colour for the inside area of the triangle.
borderColour Colour 'black' The colour for the border of the triangle.
borderWidth Number 1 The width of the border, in CSS pixels.
feather Number 0.5 The width of the antialiasing feather, in CSS pixels.
yaw Number 0 The yaw rotation of the triangle, in clockwise degrees from "north"
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface inherited from HeadingTriangle
Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideFillColour, <StridedTypedArray> strideBorderColour, <StridedTypedArray> strideBorder, <StridedTypedArray> strideEdgeDistance, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from HeadingTriangle
Property Type Description
yaw Number Runtime value of the yaw option: the yaw rotation of the sprite, in clockwise degrees. Can be updated.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—Callout

A line segment symbol. One end of the segment is placed at the symbol's point geometry; the dimensions of the line are defined by the symbol's offset.

πŸ”—Usage example

new Callout([0, 0], {
	colour: "red",
	offset: [40, 10],
	width: 4,
}).addTo(map);
``` *

πŸ”—Constructor

Static properties

Constructor
new Callout(<Geometry> geom, <Callout Options> opts?)

πŸ”—Options

Static properties

Option Type Default Description
width Number 2 The line segment's width, in CSS pixels
colour Colour '#3388ff33' The line segment's colour
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Acetate interface

Method Returns Description
_setGlobalStrides(<StridedTypedArray> strideExtrusion, <StridedTypedArray> strideColour, <StridedTypedArray> strideFeather, <TypedArray> typedIdxs, <Number> feather) undefined Sets the appropriate values into the strided arrays, based on the symbol's attrBase and idxBase.

Receives the width of the feathering as a parameter, in pixels.

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateSolidExtrusion The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Spider

Similar to MultiSymbol, a Spider is a logical grouping of GleoSymbols.

A Spider has two sets of symbols: one collapsed, and one expanded; and at any given time it will be displayed as either.

When clicking on any of the collapsed symbols, they will be replaced by the expanded ones. Clicking on the map will switch to the collapsed ones again.

In addition, symbols in the expanded set will be automatically offset, and Callouts will be added - these are the "legs" of the Spider.

πŸ”—Constructor

Constructor
new Spider(<Array of GleoSymbol> collapsedSymbols, <Array of GleoSymbol> expandedSymbols, <Spider Options> opts?)

πŸ”—Options

Option Type Default Description
width Number undefined The width of the Callouts. If not specified, the Callout default is used.
colour Colour undefined The colour of the Callouts. If not specified, the Callout default is used.
length Number 60 The length of the Callouts, in CSS pixels.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Lifetime methods

Event Data Description
expand CustomEvent / Fired when the spider expands for any reason
collapse CustomEvent / Fired when the spider collapses for any reason
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifetime methods

Method Returns Description
expand() this Displays the "expanded" set of symbols, and removes the "collapsed" ones.
collapse() this Displays the "collapsed" set of symbols, and removes the "expanded" ones.
toggle() this
Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—Tile

A rectangular, conformal (i.e. matching the display CRS) RGB(A) raster image, part of a bigger grid mosaic.

Users should not use Tile symbols directly - in most cases, using a RasterTileLoader will fulfil most of their use cases.

πŸ”—Constructor

A Tile needs to be passed a 4-point Geometry with its bounds, the name of the pyramid level it's in, its X and Y coordinates within the pyramid level, and a HTMLImageElement
Constructor
new Tile(<RawGeometry> geom, <String> levelName, <Number> tileX, <Number> tileY)

πŸ”—Options

Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.
Static properties inherited from GleoSymbol
Property Type Description
Acetate Prototype of Acetate The Acetate prototype related to the symbol - the one that fits this class of symbol by default.

This is implemented as a static property, i.e. a property of the Dot prototype, not of the Dot instances.

This shall be used when adding a symbol to a map, in order to detect the default acetate is has to be added to.

πŸ”—HeatPoint

A point for a heatmap - an abstract blob that will increase/change the colour on the ScalarField it is in, typically an AcetateHeatMap.

πŸ”—Constructor

Static properties

Constructor
new HeatPoint(<Geometry> geom, <HeatPoint Options> opts?)

πŸ”—Options

Option Type Default Description
radius Number 20 Radius of the circle, in CSS pixels
intensity Number 10 Intensity of the point, at its center. The intensity fades linearly towards its edge (half intensity at half the radius, etc)
Options inherited from ExtrudedPoint
Option Type Default Description
draggable Boolean false When set to true, the symbol can be dragged around with the pointer, and will fire dragstart/drag/dragend events.
offset Array of Number [0,0] The amount of CSS pixels that the symbol will be offset from its geometry. The amount is up-right in [x, y] or [up, right] form.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Events inherited from ExtrudedPoint
Event Data Description
dragstart Fired whenever the user starts dragging a draggable ExtrudedPoint.
drag Fired whenever the user keeps dragging a draggable ExtrudedPoint.
dragend Fired whenever the user stops dragging a draggable ExtrudedPoint.
Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateHeatPoint The Acetate class that draws this symbol.
Properties inherited from ExtrudedPoint
Property Type Description
offset Array of Number Getter/setter for the symbol's offset, as per the homonymous option.
draggable Boolean Whether the symbol can be dragged with pointer events. By (re)setting its value, dragging is enabled or disabled.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—HeatStroke

A mix of Stroke and HeatPoint - given a (poly)line geometry, this will increase the value of a scalar field along the centre of the line, falling off towards the edges of the line.

Use a AcetateHeatMap or any other subclass of ScalarField, same as HeatPoint.

πŸ”—Constructor

πŸ”—Options

Static properties

Option Type Default Description
intensity Number 1 Intensity of the scalar field on the stroke's centerline. The intensity will fall off towards zero on the stroke's edge, in a linear fashion.
Options inherited from Stroke
Option Type Default Description
colour Colour '#3388ff' The colour of the stroke.
width Number 2 The width of the stroke, in CSS pixels
dashArray undefined undefined An undefined (or falsy) value for dashArray disables line dashing.
dashArray Array of Number An Array of either 2 or 4 Numbers, defining the line dashing. Works as per 2D Canvas' setLineDash, but the array must have either 0, 2 or 4 values.
joins Join type Stroke.OUTBEVEL Defines the shape of line joins. Must be one of Stroke.MITER, Stroke.BEVEL or Stroke.OUTBEVEL.
caps Cap type Stroke.BUTT Defines the shape of line caps. Must be one of Stroke.BUTT, or Stroke.SQUARE.
centerline Boolean false Whether the stroke has vertices along its centerline, or not.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Static properties

Property Type Description
Acetate Prototype of AcetateHeatStroke The Acetate class that draws this symbol.
Properties inherited from Stroke
Property Type Description
dashArray Array of Number Runtime value of the dashArray constructor option. Can be updated.
colour Colour Runtime value of the colour constructor option. Can be updated.
verticesPerEnd Number / Read-only getter for the number of line vertices used per line end/cap.
trianglesPerEnd Number / Read-only getter for the number of triangles per line end/cap.
verticesPerJoin Number / Read-only getter for the number of line vertices used per line join.
centerline Number / Read-only getter for whether there's vertices in the stroke centerline.
width Number / Read-only getter for the stroke constructor option.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—FuelPoint

A point for a scalar field, similar to HeatPoint. Unlike HeatPoint, FuelPoints do not have a radius in pixels and only have an intensity. The intensity of all FuelPoints in the same AcetateFuelPoint increases/decreases at the same rate.

πŸ”—Constructor

Static properties

Constructor
new HeatPoint(<Geometry> geom, <HeatPoint Options> opts?)

πŸ”—Options

Option Type Default Description
intensity Number 10 Intensity of the point, at its center. The intensity fades linearly outwards, at the same rate for all FuelPoints.
Options inherited from GleoSymbol
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.
interactive Boolean false Whether this GleoSymbol should fire mouse/pointer events (or not).

Needs the symbol to be drawn in an appropriate Acetate.

cursor String undefined The pointer cursor to be used when the primary is hovering over this symbol.

Possible values are the keywords for the cursor CSS property (e.g. "pointer", "wait", "move", etc).

Needs interactive to be true.

πŸ”—Events

Pointer events inherited from GleoSymbol
Event Data Description
click GleoPointerEvent Akin to the DOM click event
dblclick GleoPointerEvent Akin to the DOM dblclick event
auxclick GleoPointerEvent Akin to the DOM auxclick event
contextmenu GleoPointerEvent Akin to the DOM contextmenu event
pointerover GleoPointerEvent Akin to the DOM pointerover event
pointerenter GleoPointerEvent Akin to the DOM pointerenter event
pointerdown GleoPointerEvent Akin to the DOM pointerdown event
pointermove GleoPointerEvent Akin to the DOM pointermove event
pointerup GleoPointerEvent Akin to the DOM pointerup event
pointercancel GleoPointerEvent Akin to the DOM pointercancel event
pointerout GleoPointerEvent Akin to the DOM pointerout event
pointerleave GleoPointerEvent Akin to the DOM pointerleave event

πŸ”—Methods

Lifecycle Methods inherited from GleoSymbol
Method Returns Description
addTo(<GleoMap> map) this Adds this symbol to the map.

The symbol will be added to the appropriate default acetate.

addTo(<Acetate> acetate) this Adds this symbol to the given Acetate (as long as the acetate fits the symbol).
addTo(<AbstractSymbolGroup> loader) this Adds this symbol to a Loader that accepts symbols.
remove() this Removes this symbol from its containing Acetate (and, therefore, from the containing GleoMap).
isActive() Boolean Returns whether the symbol is "active": being drawn in any Acetate. In other words, it has correctly allocated all GPU resources needed for it to be drawn.

Note that some symbols can take time to allocate their resources, so they can be "inactive" after they've been added to an acetate/platina/map. (e.g. Sprites when they refer to an image from the network that hasn't finished loading)

Note that this returns true for transparent or otherwise allocated yet invisible symbols.

Pointer methods inherited from GleoSymbol
Method Returns Description
setPointerCapture(<Number> pointerId) this Akin to Element.setPointerCapture()
releasePointerCapture(<Number> pointerId) this Akin to Element.releasePointerCapture()
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
intensity The value of the intensity option at instantiation time. Read-only.

Static properties

Property Type Description
Acetate Prototype of AcetateFuelPoint The Acetate class that draws this symbol.
Properties inherited from GleoSymbol
Property Type Description
geometry Geometry The symbol's (unprojected) geometry. Can be updated with a new Geometry or nested Arrays of Numbers.
attribution String The symbol's attribution. Read-only.
interactive Boolean Whether the symbol should be interactive. Read-only.
cursor String The runtime value of the cursor option. Can only be updated when not being drawn.

πŸ”—Symbol Decorator

Abstract base for all symbol decorators.

A GleoSymbol decorator is a function that takes a symbol class and returns another, decorated, symbol class with extra functionality. Decorated symbols usually will provide a decorated Acetate in a static property.

πŸ”—intervalify

Converts a GleoSymbol into a symbol that can be filtered by a value in an interval.

Technically, this behaves as a class mix-in for a GleoSymbol and its associated Acetate. It's a function that returns new symbol and acetate classes.

Internally this will add two more options to the GleoSymbol, and two properties to its Acetate (or rather, return a GleoSymbol class with two more constructor options than the base GleoSymbol class, etc). These allow for setting the start and end values of the interval that symbol should be shown; in order to control what is shown, the acetate exposes two properties to set the start and end values of the interval.

πŸ”—Usage example

A typical use case is filtering data by a time interval. This will take the Sprite class as a base and add intervals to it.

import intervalify from 'gleo/src/symbols/Intervalify.mjs';

const IntervalSprite = intervalify(Sprite);	// "Intervalified" `Sprite` class
const IntervalAcetateSprite = IntervalSprite.Acetate;	// "Intervalified" `AcetateSprite` class

Then, instantiate these GleoSymbols as desired. The interval values must be Numbers, so unix timestamps are used. Beware of using Date.parse() with anything other than date-time strings formatted in ISO 8601 (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss.sssZ).

const sprite1 = new IntervalSprite(geom1, {
	intervalStart: Date.parse("1950-05-30"),
	intervalEnd: Date.parse("1995-11-20"),
	...spriteOptions
};
const sprite2 = new IntervalSprite(geom2, {
	intervalStart: Date.parse("1995-11-21"),
	intervalEnd: Infinity,
	...spriteOptions
};

These symbols need to be drawn in their own Acetate (and this Acetate needs to be created linked to a GleoMap or a Platina):

const myIntervalAcetate = new IntervalAcetateSprite(map.glii);
map.addAcetate(myIntervalAcetate, 6000);

myIntervalAcetate.multiAdd([sprite1, sprite2]);

Finally, set the intervalStart and intervalEnd properties of the Acetate in order to dynamically filter which symbols are drawn:

myIntervalAcatate.intervalStart = Date.parse("1975-05-30");
myIntervalAcatate.intervalEnd = Date.parse("1975-05-30");

πŸ”—Functions

Function Returns Description
intervalify(<GleoSymbol> base) GleoSymbol "Intervalifies" the given GleoSymbol class, i.e. returns a new GleoSymbol class that behaves like the original, but can contain information about a numeric interval. The corresponing Acetate also defines a numeric interval, and will filter out symbols outside whose interval is outside of the acetate's own interval.

πŸ”—

πŸ”—Intervalified GleoSymbol

The return value of the intervalify function is a GleoSymbol class. It will behave as the base class used, but with two extra constructor options:
Option Type Default Description
intervalStart Number The start (minimum value) of the symbol's numeric interval.
intervalEnd Number The end (maximum value) of the symbol's numeric interval.

πŸ”—

πŸ”—Intervalified Acetate

Interval-enabled symbols need their own acetate to be drawn into - the example code above shows how to access it from an intervalified symbol class, and how to instantiate and add it to a map/platina.

An intervalified Acetate gains two new read/write properties. Setting a new value to any of these will trigger a re-render.

Property Type Description
intervalStart Number The start (minimum value) of the symbol's numeric interval. Any symbols in this acetate with an interval that falls outside the acetate's own interval will not be drawn.
intervalEnd Number The end (maximum value) of the symbol's numeric interval.

πŸ”—bouncify

Modifies an ExtrudedPoint class (e.g. Sprites, CircleFills, etc) so that they bounce in a time-based animation.

πŸ”—Usage example

A typical use case is to create bouncing sprites (akin to "bouncing markers" in Leaflet):

import bouncify from 'gleo/src/symbols/Bouncify.mjs';

const BouncingSprite = bouncify(Sprite);	// "Bouncified" `Sprite` class
const BouncingSpriteAcetate = BouncingSprite.Acetate;	// "Bouncified" `AcetateSprite` class

Declare bouncing sprites, as desired (including the bounce-related constructor options):

const bouncySprite = new BouncingSprite(geom, {
	bounceHeight: 10,
	bounceSquish: [0.8, 1.2],
	...spriteOptions
};

As of now, there is a need to explicitly instantiate the appropriate `Acetate`
and link it to a `GleoMap`/`Platina`:

myBouncyAcetate = new BouncingSpriteAcetate(); map.addAcetate(myBouncyAcetate, 6000);

myBouncyAcetate.multiAdd([ bouncySprite ]);

πŸ”—

A "bouncified" symbol accepts these additional constructor options:

πŸ”—Bouncified GleoSymbol

Option Type Default Description
bounceHeight Number 10 The height of the boucing, in CSS pixels. This will always be vertical relative to the viewport.
bounceSquish Array of Number [0.9, 1.1] The symbol will "squish" when at the apex of the bounce, effectively being scaled horizontally/vertically; these values control the scale factors. e.g. the default of [0.9, 1.1] means that the symbol will be 90% wide and 110% high at the apex, compared to its at-rest size.
bounceSquash Array of Number [1.1, 0.7] Akin to bounceSquish, but for the bottom instant of the bounce.

πŸ”—

A "screenedgified" symbol accepts these additional constructor options:

πŸ”—ditherify

Applies a dithering-like filter to any symbol: some pixels will be transparent based on a per-symbol threshold and a acetate-wide noise texture.

πŸ”—Usage example

const DitherFill = ditherify(Fill);

const ditherPolygon = new DitherFill(polygonGeometry, { dither: 0.9 }).addTo(map);

πŸ”—

A "ditherified" symbol accepts these additional constructor options:

πŸ”—Ditherified Symbol

Option Type Default Description
dither Number 0.5 The (expected) ratio of pixels to be seen, between 0 (none) and 1 (all)

πŸ”—trajectorify

Turns a point symbol into a "moving point" symbol, that moves along a linear trajectory.

Instead of taking a point geometry, the symbol will now take a linestring geometry, along with an array of M-coordinates (one for each vertex of the linestring).

(Ideally the geometry would be a XYM or XYZM geometry, with values across the measurement ("M") dimension. But that's not implemented yet).

The typical use case is time-based: the M-coordinate for the linestring vertices would be a timestamp, when the feature passed through that specific vertex.

In a manner similar to the intervalify symbol decorator, the "trajectorified" acetate has the capability to set the M coordinate to any value, and will draw the symbols in the appropriate interpolated position.

πŸ”—

A "trajectorified" symbol accepts this additional constructor options:

πŸ”—Trajectorified GleoSymbol

Option Type Default Description
mcoords Array of Number [] The values for the M-coordinates of the geometry. This must have one M-coordinate per point in the symbol's geometry.

πŸ”—pulsify

Modifies an ExtrudedPoint class (e.g. Sprites, CircleFills, etc), so that they grow and lower their opacity with time. The effect is a "pulse", meant to notify of an event happening.

The symbols are expanded from zero extrusion size to the given size. This means that circles should be given a big radius, and Sprites should use spriteScale.

πŸ”—

A "pulsified" symbol accepts these additional constructor options:

πŸ”—Pulsified GleoSymbol

Option Type Default Description
pulseDuration Number 1000 Duration, in milliseconds, of a pulse animation.
pulseInitialOpacity Number 1.5 Opacity factor at the start of the pulse animation. The runtime value is clamped between 0 and 1, so values larger than 1 mean that the symbol stays at full opacity during a portion of the pulse animation.
pulseFinalOpacity Number 0 Opacity factor at the end of the pulse animation. Defaults to full transparency.
pulseCount Number Infinity If given a finite integer value, the pulse will be removed after that many pulse animations.

πŸ”—intensify

Takes a symbol that is normally rendered as a single solid colour (including Fill, Stroke, Circle, etc), and makes it render into a ScalarField. The symbol loses its colour option but gains an intensity option.

The symbol will work similar to HeatPoint or HeatStroke in the sense that it adds its intensity to the scalar field that is given colour later (e.g. HeatMapAcetate); the symbol must be added to such a scalar field instead of being added directly to the map. Unlike HeatPoint or HeatStroke (which apply a linear fall-off to the intensity), the intensity an intensified symbol adds to the field is constant in all its pixels.

Does not work on symbols with more than a colour (e.g. Pie, Halo) nor or those depending on a image/texture (e.g. Sprite, TextLabel)

πŸ”—

An "intensified" symbol accepts these additional constructor options:

πŸ”—IntensifiedSymbol

Option Type Default Description
intensity Number 1 Intensity applied to the scalar field on all pixels corresponding to this symbol.

πŸ”—wirify

Turns a symbol into its wireframe representation. Useful for debugging purposes.

Can only work on symbols which are drawn as triangles (i.e. not on Dot, Hair nor MonteCarloFill).

πŸ”—edgify

Takes interactive symbols, and adds a solid colour edge to them.

This is based on a trivial edge-detection algorithm that runs on the internal interactivity IDs. Thus edges will be shown only around interactive symbols.

πŸ”—Options

Option Type Default Description
edgeColour Colour 'black' The colour for edge highlighting.

πŸ”—hueify

Takes a symbol that is normally rendered as the interpolation of several solid colours (including Halo, DealunayMesh, etc), and turns the RGB(A) interpolation into a HSV(A) interpolation.

πŸ”—screenedgify

Modifies an ExtrudedPoint class (e.g. Sprites, CircleFills, etc) so that they are always visible in the viewport, sticking to the edge when they should be outside.

πŸ”—Options

Option Type Default Description
margin Array of Number [0,0,0,0] The margin for the symbols, in CSS pixels, in [top, right, bottom, left] form.

πŸ”—AbstractPin

Dummy class to optimize code usage when checking if something is an instanceof a HTMLPin.

πŸ”—HTMLPin

A HTML element that is pinned to a point Geometry inside a GleoMap, displaying on top of the map's Platina.

This is an unstyled HTML element - users should consider the Balloon class instead, which provides styling.

Note that lots of HTMLPins mean lots of HTML elements in the DOM, which means more load in the browser. Therefore, lots of HTMLPins should be avoided.

πŸ”—Constructor

Constructor
new HTMLPin(<RawGeometry> geometry, <HTMLElement> contents)
new HTMLPin(<RawGeometry> geometry, <String> contents)
new HTMLPin(<Array of Number> geometry, <HTMLElement> contents)
new HTMLPin(<Array of Number> geometry, <String> contents)

πŸ”—Options

HTMLPin Options

Option Type Default Description
offset Array of Number [0,0] Pixel offset of the HTMLPin (relative to the pixel where the point geometry is projected to).
cssClass String undefined Optional CSS class to be applied to the pin's element.

πŸ”—Methods

Method Returns Description
addTo(<GleoMap> map) this Adds this pin to the given map
remove() this Removes this pin fom whatever map it's in.

πŸ”—Properties

Property Type Description
element HTMLElement Read-only accesor to this pin's HTMLElement.
geometry RawGeometry The point Geometry for the pin. Can be overwritten with a new point Geometry.

πŸ”—Balloon

A styled HTMLPin, with a triangular tip on the anchor point and a rounded border. Suitable for popups/popovers/tooltips.

πŸ”—Constructor

Constructor
new Balloon(<RawGeometry> geometry, <HTMLElement> contents, <Balloon Options> options?)
new Balloon(<RawGeometry> geometry, <String> contents, <Balloon Options> options?)
new Balloon(<Array of Number> geometry, <HTMLElement> contents, <Balloon Options> options?)
new Balloon(<Array of Number> geometry, <String> contents, <Balloon Options> options?)

πŸ”—Options

Balloon Options

Option Type Default Description
position String 'above' Valid values are: above, below, left and right.
HTMLPin Options inherited from HTMLPin
Option Type Default Description
offset Array of Number [0,0] Pixel offset of the HTMLPin (relative to the pixel where the point geometry is projected to).
cssClass String undefined Optional CSS class to be applied to the pin's element.

πŸ”—Methods

Methods inherited from HTMLPin
Method Returns Description
addTo(<GleoMap> map) this Adds this pin to the given map
remove() this Removes this pin fom whatever map it's in.

πŸ”—Properties

Property Type Description
body HTMLElement Read-only accessor to the HTMLElement for the body of the balloon, not including the tip.
Properties inherited from HTMLPin
Property Type Description
element HTMLElement Read-only accesor to this pin's HTMLElement.
geometry RawGeometry The point Geometry for the pin. Can be overwritten with a new point Geometry.

πŸ”—Acetate

The name Acetate refers to the nickname given to transparent foil sheets used in old-school projectors.

The end result for the user is a stack of acetates (after they pass through a image composition keeping alpha, etc).

In Gleo/Glii terms, an Acetate is a collection of:

Typically, an Acetate will receive symbols, given as triangles together with the neccesary vertex attributes, e.g.:

Any given Acetate will draw symbols of the same "kind". Subclasses shall be an acetate for solid-filled polygons, another for line contours, another for circles, etc (as long as symbols of the same "kind" are to be rendered with the same WebGL1Program).

πŸ”—Constructor

Constructor
new Acetate(<GliiFactory> target, <Acetate Options> opts)
new Acetate(<Platina> target, <Acetate Options> opts)
new Acetate(<GleoMap> target, <Acetate Options> opts)

πŸ”—Options

Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

Subclass interface

Subclasses must implement all the following methods related to strided arrays:
Event Data Description
symbolsremoved Fired whenever symbols are removed from the acetate. Event details include such symbols.

πŸ”—Methods

Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Subclass interface

Subclasses of Acetate must provide/define the following methods:
Method Returns Description
glProgramDefinition() Object Returns a set of WebGL1Program options, that will be used to create the WebGL1 program to be run at every refresh.

Subclasses can rely on the parent class definition, and decorate it as needed.

The shader code (for both the vertex and fragment shaders) must be split between vertex/fragmentShaderSource and vertex/fragmentShaderMain. Do not define void main() {} in the shader source; this is done automatically by wrapping *ShaderMain.

multiAllocate(<Array of GleoSymbol> symbols) this Allocates GPU RAM for the symbol, and asks the symbol to fill up that slice of GPU RAM.

Whenever possible, use multiAllocate() instead of multiple calls to allocate(). Adding lots of symbols in a loop might cause lots of WebGL calls, which will impact performance. By contrast, implementations of allocate() should be prepared to make as few WebGL calls as possible.

Subclasses shall call multiAllocate from multiAdd, either synchronously or asynchronously.

_getStridedArrays(<Number> maxVtx, <Number> maxIdx) undefined Must return a plain array with all the StridedTypedArrays that a symbol might need, as well as any other (pseudo-)constants that the symbol's _setGlobalStrides()` method might need.

This must allocate memory for attributes and vertex indices, and so its parameters are the topmost vertex and index needed.

_commitStridedArrays(<Number> baseVtx, <Number> vtxCount, <Number> baseIdx, <Number> idxCount) undefined Called when committing data to attribute buffers. The default commits data to this._extrusions and this._attrs, so there's no need to redefine this if only those attribute storages are used.
_getGeometryStridedArrays() TODO: FIXME
_commitGeometryStridedArrays() TODO: FIXME
_getPerPointStridedArrays() TODO: FIXME TODO: maybe not needed and part of geometry strided arrays
_commitPerPointStridedArrays() TODO: FIXME TODO: maybe not needed and part of geometry strided arrays
deallocate(<GleoSymbol> symbol) this Deallocate resources for the given symbol (attributes, primitive indices). Since the primitive indices are deallocated, the symbol will not be drawn.

Deallocating symbols involves marking their primitives as not being used, in the CPU side of things. Since there is no data to upload into GPU memory, implementations don't need to worry (much) about efficiency.

Deallocation must also reset the references to the acetate, base vertex and base index to undefined.

reprojectAll() this Triggers a reprojection of all the coordinates of all vertices of all symbols in the acetate. Called when this._crs changes. AcetateDot and AcetateVertices provide implementations. Must dump a new set of values to this._coords, based on the known set of symbols added to the acetate.
remove(<GleoSymbol> symbol) this Removes the given symbol from self (stops drawning it)
multiRemove(<Array of GleoSymbol> symbols) this Removes the given symbols from self (i.e. stops drawing it).
empty() this Removes all symbols currently in this acetate
destroy() this Destroys all resources used by the acetate and detaches itself from the containing platina.

Internal Methods

Method Returns Description
multiDeallocate(<Array of GleoSymbol> symbols) this Deallocates all given symbols. Subclasses can (and should!) provide an alternative implementation that performs only one deallocation.
asTexture() Texture Returns a reference to the Glii Texture holding the visible results of this acetate.
runProgram() this Runs the GL program for this acetate. Might be overwritten by subclasses when partial runs are needed (e.g. to set per-symbol textures, or selecting a LoD).
multiSetCoords(<Number> start, <Array of Number> coordData) this Sets a section of the internal _coords SingleAttributeBuffer, and expands the bounding box of known coords to cover the new ones.

The second coordData argument must be a flattened array of x-y coordinates, of the form [x1, y1, x2, y2, x3, y3, .... xn, yn].

expandBBox(<Array of Number> coordData) this Each acetate keeps a bounding box to keep track of the extents of drawable items (to calculate antimeridian repetition).

This expects an argument in the form of [x1, y1, x2, y2, x3, y3, .... xn, yn].

dispatchPointerEvent(ev:GleoPointerEvent) Boolean Stub for interactive acetate logic. Alias for dispatchEvent.

Redrawing methods

These methods control when the acetate updates its internal texture. They are meant to be called internally.
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)

Subclass interface

These properties are meant for internal use of an Acetate subclass.
Property Type Description
_coords SingleAttribute A Glii data structure holding vec2s, for vertex CRS coordinates.
framebuffer Framebuffer The output Glii framebuffer for this acetate. Read-only.

Static properties

Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

Redrawing properties

Subclasses of Acetate must provide/define the following:
Property Type Description
dirty Boolean Whether this acetate should be rendered at the next frame. Can only be set to true; a call to redraw() will reset this to false.

Internal properties

Meant to be used only from GleoMap. Meant to be used only from within a Platina.
Property Type Description
zIndex Number The value of the zIndex constructor option. Read-only.

πŸ”—AcetateInteractive

An Acetate that renders its symbols into an invisible framebuffer so pointer events can query it to know the symbol that has been rendered in a given pixel.

πŸ”—Constructor

πŸ”—Options

AcetateInteractive Options

Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Subclass interface

Subclasses of Acetate can provide/define the following methods:
Method Returns Description
glIdProgramDefinition() Object Returns a set of WebGL1Program options, that will be used to create the WebGL1 program to be run at every refresh to create the texture containing the symbol IDs. This is needed for the getSymbolAt() functionality to work.

By default, the non-interactive program (i.e. the result of glProgramDefinition) is reused. The ID attribute aId is added, a new varying vId is added, the vertex shader is modified to dump the new attribute into the new varying, and the fragment shader is replaced.

The default interactive fragment shader dumps vId to the RGB component and sets the alpha value. It looks like:

void main() {
	gl_FragColor.rgb = vId;
	gl_FragColor.a = 1.0;
}`

Subclasses can redefine the fragment shader source if desired; a use case is to apply masking so that transparent fragments of the GleoSymbol are discarded within the interactive fragment shader (see the implementation of AcetateSprite). It's recommended that subclasses don't change any other bits of this program definition.

multiAddIds(<Array of GleoSymbol> symbols, <Number> baseVtx, <Number> maxVtx?) this Given an array of symbols (as per multiAdd) and a base vertex index, assigns a numerical ID to each symbol (unique in the acetate), packs the data, and updates the corresponding attribute buffer.

This is meant to be called from within the multiAdd() method of subclasses.

deallocate(<GleoSymbol> symbol) this Deallocates the symbol from this acetate (so it's not drawn on the next refresh), and removes the reference from its numerical ID.

Internal Methods

Method Returns Description
getSymbolAt(<Number> x, <Number> y) GleoSymbol Given the (CSS) pixel coordinates of a point (relative to the upper-left corner of the GleoMap's <canvas>), returns the GleoSymbol that has been drawn at that pixel.

Returns undefined if there is no GleoSymbol being drawn at the given pixel.

setPointerCapture(<Number> pointerId, <GleoSymbol> symbol) this Sets pointer capture for the given pointer ID to the given symbol. When pointer capture is set (for a pointer ID), normal hit detection is skipped, and the capturing symbol will receive the event instead.

See Element.setPointerCapture()

releasePointerCapture(<Number> pointerId) this Clears pointer capture for the given pointer ID. Inverse of setPointerCapture.

See Element.releasePointerCapture()

dispatchPointerEvent(<GleoPointerEvent> ev, <Object> evInit) Boolean Given a event, finds what symbol in this acetate should receive the event and, if any, makes that symbol dispatch the event. If the symbol event is not preventDefaulted, the acetate itself dispatches the event afterwards.

This is meant to be called only from the containing GleoMap.

Since a GleoPointerEvent of type pointermove might mean entering/leaving a symbol, extra pointerenter/pointerover/pointerout/pointerleave might be dispatched as well. To internally ease that, dispatching an event requires a evInit dictionary with which to instantiate these new synthetic events.

Return value as per EventTarget's dispatchEvent: Boolean false if the event is preventDefault()ed, at either the symbol or the acetate level.

FIXME: This assumes that the bbox of the acetate and the containing map are the same. It should be needed to modify the logic and rely on the geom property of the decorated GleoPointerEvent instead.

That would involve caching the (direct) CRS affine matrix from the last time the acetate was drawn, apply it to the event's geom and then round the resulting pixel coordinate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options

Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateDot

An Acetate that draws points as coloured dots (given vec4 RGBA data per dot).

In particular, this uses the POINTS drawMode of WebGL. That means every symbol gets only one vertex.

πŸ”—Constructor

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of Dot> dots) this Adds the dots to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.

GPU memory space allocated to the given points will be adjacent.

deallocate(<Dot> dot) this Deallocates the dot from this acetate (so it's not drawn on the next refresh).
reprojectAll() undefined Dumps a new set of values to this._coords, based on the known set of symbols added to the acetate.
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateMonteCarlo

Displays MonteCarloFill symbols. Performs triangulation of polygons via earcut, and creates points inside those polygons in a random uniform manner.

Uses the POINTS draw mode of WebGL, same as AcetateDot.

πŸ”—Constructor

πŸ”—Options

AcetateMonteCarlo Options

Option Type Default Description
ditSize Number 1 The size of the dots , in GL pixels. The maximum value depends on the GPU and the WebGL/OpenGL stack.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

AcetateMonteCarlo Options

Method Returns Description
reproject(<Number> start, <Number> length) Array of Number As AcetateVertices.reproject(), but also recalculates the random points positions for the affected symbols
Methods inherited from AcetateDot
Method Returns Description
multiAdd(<Array of Dot> dots) this Adds the dots to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.

GPU memory space allocated to the given points will be adjacent.

deallocate(<Dot> dot) this Deallocates the dot from this acetate (so it's not drawn on the next refresh).
reprojectAll() undefined Dumps a new set of values to this._coords, based on the known set of symbols added to the acetate.
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateMonteCarlo Options

Property Type Description
dotSize Size of each dot. Each dot will be a square, each side measuring this many GL pixels. Can be updated.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHair

An Acetate that draws lines as thin (1px) lines.

In particular, this uses the LINES drawMode of WebGL. Line segments drawn this way are 1px-wide and, depending on the OpenGL implementation, are not antialiased and cannot be any thicker (hence "hair" instead of "line").

πŸ”—Constructor

Constructor
new AcetateHair(<GliiFactory> glii)

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateVertices

An abstract Acetate that implements multiple vertices per symbol.

Most Acetates draw symbols that must be represented by more than one vertex (and typically forming triangles), and should inherit this functionality.

The only exception is acetates that do not need vertex indices at all because they do not rely on primitives (i.e. triangles) - the AcetateDot being the only instance of such.

πŸ”—Constructor

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Internal Methods

Method Returns Description
reproject() this Runs toCRS on the coordinates of all known symbols, and (re)sets the values in the coordinates attribute buffer. Dumps a new set of values to the this._coords attribute buffer, based on the known set of symbols added to the acetate (only those which have their attribute offsets between start and start+length.

If the list of symbols is already known, they can be passed as a third argument for a performance improvement.

This default implementation assumes that the attrLength of a GleoSymbol is equal to the length of its Geometry (i.e. there's `one vertex per point in the geometry).

Returns the data set into the attribute buffer: a ' Float32Arrayin the form[x1,y1, x2,y2, ... xn,yn]`.

deallocate(<GleoSymbol> symbol) this Deallocate the symbol from this acetate (so it's not drawn on the next refresh)
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateStroke

An Acetate that draws line strokes.

πŸ”—Constructor

Constructor
new AcetateStroke(<GliiFactory> glii, <AcetateStroke Options> opts)

πŸ”—Options

AcetateStroke Options

Option Type Default Description
miterLimit Number 10 Maximum value for the extrusion factor in miter line joints. Note this is not the same behaviour as 2D miter limit, which replaces miter joins with bevel joins.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

AcetateStroke Options

Method Returns Description
multiAdd(<Array of Stroke> strokes) this Adds the strokes to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.
reprojectAll(<Number> start, <Number> length, <Boolean> skipEarcut) Array of Number As AcetateVertices.reproject(), but also recalculates the values for the attributes which depend on the geometry (including the extrusion amount, which depends on the linestring angle on each node) and mesh triangulation (for dextro- or levo-oriented bevel and round joins).
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateStrokeRoad

An Acetate that draws stroke roads (strokes with two widths and an inner and outer colour).

πŸ”—Constructor

πŸ”—Options

AcetateStroke Options inherited from AcetateStroke
Option Type Default Description
miterLimit Number 10 Maximum value for the extrusion factor in miter line joints. Note this is not the same behaviour as 2D miter limit, which replaces miter joins with bevel joins.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

AcetateStroke Options inherited from AcetateStroke
Method Returns Description
multiAdd(<Array of Stroke> strokes) this Adds the strokes to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.
reprojectAll(<Number> start, <Number> length, <Boolean> skipEarcut) Array of Number As AcetateVertices.reproject(), but also recalculates the values for the attributes which depend on the geometry (including the extrusion amount, which depends on the linestring angle on each node) and mesh triangulation (for dextro- or levo-oriented bevel and round joins).
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateFill

An Acetate that draws a simple (single-colour) fill for polygons.

This leverages Vladimir Agafonkin's earcut library. Polygon triangulation happens after (every) data (re)projection.

πŸ”—Constructor

Constructor
new AcetateFill(<GliiFactory> target)

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
reproject(<Number> start, <Number> length, <Boolean> skipEarcut?, <Array of Fill> symbols?) Array of Number As AcetateVertices.reproject(), but also recalculates the earcut triangulation for the affected symbols.
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateConformalRaster

An Acetate that draws rectangular conformal (i.e. matching the display CRS) RGB(A) raster images.

Only the four corners of the raster are reprojected when displaying in a different CRS, and pixels are linearly interpolated. For proper raster reprojection, leverage Arrugator instead.

πŸ”—Constructor

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Event Data Description
rastererror Event Fired when some of the rasters to be added to this acetate have failed to load their image.
Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of ConformalRaster> rasters) this Adds the conformal rasters to this acetate (so they're drawn on the next refresh).

Note this call can be asynchronous - if any of the rasters' images has not loaded yet, that will delay this whole call until all of the images have loaded.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateArrugatedRaster

An Acetate that draws warped, reprojected (AKA "arrugated") RGB(A) raster images.

Injection of the proj4js dependency should be done before instantiating any ArrugatedRasters.

πŸ”—Constructor

Constructor
new AcetateArrugatedRaster(<GliiFactory> glii, <AcetateArrugatedRaster Options> opts)

πŸ”—Options

AcetateArrugatedRaster Options

Option Type Default Description
wireframeColour undefined undefined Disables wireframe rendering. This is the default. Enables wireframe rendering. Wireframe will have the specified solid colour. Wireframe rendering is useful for debugging but can negatively impact performance.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from AcetateConformalRaster
Event Data Description
rastererror Event Fired when some of the rasters to be added to this acetate have failed to load their image.
Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from AcetateConformalRaster
Method Returns Description
multiAdd(<Array of ConformalRaster> rasters) this Adds the conformal rasters to this acetate (so they're drawn on the next refresh).

Note this call can be asynchronous - if any of the rasters' images has not loaded yet, that will delay this whole call until all of the images have loaded.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateMesh

An Acetate that draws a simple (single-colour) fill for Meshes.

πŸ”—Constructor

Constructor
new AcetateMesh(<GliiFactory> target)

πŸ”—Options

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of Mesh> meshes) this Adds the meshes to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateExtrudedPoint

Abstract class, containing functionality common to acetates that draw point symbols (Sprite, Pie, etc).

πŸ”—Constructor

πŸ”—Options

AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Internal Methods

Method Returns Description
reproject(<Number> start, <Number> length, <Array of GleoSymbol> symbols) Array of Number Dumps a new set of values to the this._coords attribute buffer, based on the known set of symbols added to the acetate (only those which have their attribute offsets between start and start+length. Each symbol will spawn as many coordinate vec2s as their attrLength property.

Returns the data set into the attribute buffer: a plain array of coordinates in the form [x1,y1, x2,y2, ... xn,yn].

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateSolidExtrusion

An Acetate for rendering solid colors on extrusions of point geometries; this is common for Pie, CircleFill and CircleStroke symbols.

πŸ”—Constructor

Constructor
new AcetateSolidExtrusion(<Platina> target, <AcetateSolidExtrusion Options> opts?)

πŸ”—Options

Option Type Default Description
feather Number 1.5 / The feather distance (in CSS pixels)
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
feather Number Read-only getter for the value given to the feather option at instantiation time.
AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateRotatingExtrusion

An Acetate for rendering solid extrusions that rotate around the point geometry.

πŸ”—Constructor

πŸ”—Options

Options inherited from AcetateSolidExtrusion
Option Type Default Description
feather Number 1.5 / The feather distance (in CSS pixels)
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from AcetateSolidExtrusion
Property Type Description
feather Number Read-only getter for the value given to the feather option at instantiation time.
AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateSprite

An Acetate that draws square images anchored on points, at a constant screen ratio. The images are "pinned" or "anchored" to a point Geometry.

Since this acetate supports Sprites with different images, this acetate implements a texture atlas. To build it, this leverages Bryan Housel's shelf-pack library.

πŸ”—Constructor

πŸ”—Options

AcetateSprite Options

Option Type Default Description
interpolate true Whether to use bilinear pixel interpolation or not.

Enabled by default to provide a alightly better display of sprites with yaw rotation applied. If (and only if) all sprites will have a yaw rotation of zero, it might be a good idea to set this to false to have pixel-accurate sprites.

maxTextureSize Number 2048 Maximum size of the WebGL texture used to hold tiles. Should be at least the width/height of the screen. Texture size is ultimately bound by the WebGL capabilities of the browser/OS/GPU, which usually can support textures 8192 or 16384 pixels wide/high. Using higher values might cause the web browser (chromium/chrome in particular) to take a longer time during texture initialization.
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Event Data Description
spriteerror Event Fired when some of the sprites to be added to this acetate have failed to load their image.
Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of Sprite> sprites) this Adds the sprites to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.

Note this call can be asynchronous - if any of the sprites' images has not loaded yet, that will delay this whole call until all of the images have loaded.

TODO: Alternatively, split the sprites: ones with loaded images and one set per unique image. Load each set as soon as ready.

remove(<Sprite> sprite) this Removes the sprite from this acetate (so it's not drawn on the next refresh).

Also decreases the usage count of the relevant portion of the atlas.

Internal Methods

Method Returns Description
pack(<HTMLImageElement> image) Bin Given an image, returns a ShelfPack Bin, containing the box coordinates for that image inside the acetate's texture atlas.

Will upload the image to the texture atlas if it's not in the atlas already; returns a cached result if the image has already been packed in the atlas. Anyway, it will increase the usage counter for the used portion of the atlas.

pack(<ImageData> image) Bin Idem, but takes a ImageData instance (from e.g. TextLabel symbol)
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateTintedSprite

As AcetateSprite, but aditionally the shader applies a tint to the image.

Meant to be used with TintedSprite symbols.

πŸ”—Constructor

πŸ”—Options

AcetateSprite Options inherited from AcetateSprite
Option Type Default Description
interpolate true Whether to use bilinear pixel interpolation or not.

Enabled by default to provide a alightly better display of sprites with yaw rotation applied. If (and only if) all sprites will have a yaw rotation of zero, it might be a good idea to set this to false to have pixel-accurate sprites.

maxTextureSize Number 2048 Maximum size of the WebGL texture used to hold tiles. Should be at least the width/height of the screen. Texture size is ultimately bound by the WebGL capabilities of the browser/OS/GPU, which usually can support textures 8192 or 16384 pixels wide/high. Using higher values might cause the web browser (chromium/chrome in particular) to take a longer time during texture initialization.
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from AcetateSprite
Event Data Description
spriteerror Event Fired when some of the sprites to be added to this acetate have failed to load their image.
Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from AcetateSprite
Method Returns Description
multiAdd(<Array of Sprite> sprites) this Adds the sprites to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.

Note this call can be asynchronous - if any of the sprites' images has not loaded yet, that will delay this whole call until all of the images have loaded.

TODO: Alternatively, split the sprites: ones with loaded images and one set per unique image. Load each set as soon as ready.

remove(<Sprite> sprite) this Removes the sprite from this acetate (so it's not drawn on the next refresh).

Also decreases the usage count of the relevant portion of the atlas.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHeadingTriangle

An Acetate for rendering heading triangles. Much like AcetateSolidExtrusion, but handles two colours and a feathering between them.

πŸ”—Constructor

πŸ”—Options

AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateOffScreenIndicator

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
margin Array of Number [8, 8, 8, 8] The margin for the symbols, in CSS pixels, in [top, right, bottom, left] form.
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateStitchedTiles

An Acetate that draws rectangular conformal (i.e. matching the display CRS) RGB(A) raster images, all of which fit together inside a Glii texture (and so they share it). Users should not use this acetate directly; look at MercatorTiles and RasterTileLoader and instead.

This acetate will not hold an indefinite number of tiles; rather, a tile might overwrite an existing tile. The (maximum) number of tiles at any given moment depends on the size of the WebGL texture used.

πŸ”—Constructor

πŸ”—Options

AcetateStitchedTiles Options

Option Type Default Description
pyramid TilePyramid The tile pyramid to use
tileResX Number 256 Horizontal size, in pixels, of each tile.
tileResY Number 256 Vertical size, in pixels, of each tile.
minTextureSize Number 2048 Minimum size of the textures used to cache tile data. This should be set to the maximum expected size of the map (RasterTileLoader does so).

Lower values might save some GPU memory, but will cause tiles to be culled prematurely.

Higher values will keep more tiles cached in GPU textures, but will use more GPU memory and can cause browsers (notably chrome/chromium) to spend more time allocating the textures. Texture size is ultimately bound by the WebGL capabilities of the browser/OS/GPU, which usually can support textures 8192 or 16384 pixels wide/high.

interpolate Boolean false Whether to use bilinear pixel interpolation or not.

In other words: false means pixellated, true means smoother.

fadeInDuration Number 250 Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels Number 3 Number of maximum tile levels to keep loaded in their textures. Higher values can provide a slightly better experience when zooming in and out, but will use more GPU RAM.
resizablePlatina Boolean true Whether the platina can be expected to be resized up to the size of the screen. When false, less GPU RAM is used for the textures.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Acetate interface

Event Data Description
levelexpelled Event Fired whenever a texture for a level of tiles is expelled, and thus all tiles from that level should be marked as unusable. The event's detail contains the name of the expelled level.
Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of Tile> tiles) this Adds the tiles to this acetate (so they're drawn on the next refresh).

The images for the tiles are dumped into the acetate's texture.

Unlike most other acetates, tiles are added on an individual basis and their data might not be stored adjacently in the attribute/primitive buffers.

add(<Tile> tile) this Adds a single tile. The tile will be slotted in a specific portion of the available space, depending on its X and Y coordinates within its pyramid level.
reproject(<Number> start, <Number> length) Array of Number Dumps a new set of values to the this._coords attribute buffer, based on the known set of symbols added to the acetate (only those which have their attribute offsets between start and start+length.

Returns the data set into the attribute buffer: a plain array of coordinates in the form [x1,y1, x2,y2, ... xn,yn].

This implementation does not assume that the attribute allocation block contains a compact set of symbols (since tiles are statically allocated at instantiation time, then overwritten at runtime).

Acetate interface

Method Returns Description
getLevelsInfo() Object of Object Returns a data structure containing information about tile levels: tile resolution, expected texture size, number of tiles fitting in the texture, etc.

Meant for debugging and communication with a RasterTileLoader only.

isLevelAvailable(<String> levelName) Boolean Returns whether the texture for the given level name is available. In other words: when the given level has never been loaded, or it has been expelled from the MRU list, this returns false.
destroyHigherScaleLevels(<String> levelName) Boolean Searches all levels with a scale lower than the given one (i.e. those with "higher zoom levels") and marks them as invalid; will not be re-rendered until a tile for that level is allocated.
Methods inherited from Acetate
Method Returns Description
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—ScalarField

Abstract acetate, basis for AcetateGreyscaleField and AcetateHeatMap.

Holds a float32 scalar field as a platina-sized texture & framebuffer, but lacks a shader program to interpret it.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.

Acetate interface

Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateGreyscaleField

A symbol-less Acetate, meant to display a scalar field as a simple 2-colour ramp. By default, uses black for 0 and white for 1 with greyscale in-between.

Accepts HeatPoints, HeatStrokes, etc as symbols.

πŸ”—Usage example

const field = new AcetateGreyscaleField(map);

new HeatPoint(geometry, {intensity: 1}).addTo(field);

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
minValue Number 0 Minimum value of the scalar field taken into consideration
minColour Colour [0, 0, 0, 255] Colour given to the minimum (or below-minimum) scalar values
maxValue Number 1 Maximum value of the scalar field taken into consideration
maxColour Colour [255, 255, 255, 255] Colour given to the maximum (or over-maximum) scalar values
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHeatMap

An Acetate to draw heat maps, with a custom colour ramp.

Since the colour ramp is configurable, this Acetate must be manually instantiated, unlike most Acetates.

While it's possible to add HeatPoints directly to a Platina, doing so (before instantiating an AcetateHeatMap) would use the defaults and draw those HeatPoints in a black-and-white AcetateGreyscaleField. It is strongly advised to instantiate an AcetateHeatMap before placing any HeatPoints.

Very similar to AcetateGreyscaleField, but with multiple colour stops in the colour ramp (instead of two colours for min/max values).

πŸ”—Usage example

const heatmap = new AcetateHeatMap(map, {
	stops: {
		0: [255,0,0,0],
		10: [255,0,0,255],
		100: [255,255,0,255],
		200: [0,255,0,255],
		500: [0,255,255,255]
	},
});

new HeatPoint(geom, {radius: 80, intensity: 500}).addTo(heatmap);

πŸ”—Constructor

Constructor
new AcetateHeatMap(<GliiFactory> glii, <AcetateQuadBin Options> opts?)

πŸ”—Options

Option Type Default Description
stops Object of Number to Colour A map of intensities to Colours that defines how to colourize the heatmap. A pixel with an intensity of a stop will exactly get that colour; any other colours will be linearly interpolated.

The first key must always be zero, and the keys must be ordered in strictly ascending order.

Default is:

{
	0: [255,0,0,0]        	// Transparent red
 10: [255,0,0,255]     	// Red
 100: [255,255,0,255]  	// Yellow
 1000: [0,255,0,255]   	// Green
 10000: [0,255,255,255]	// Cyan
}
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
stops Object of Number to Colour / The colour ramp, as the homonymous option. Read-only.
Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—ScalarFieldAnimated

Abstract helper class for animated scalar fields (AcetateTwinkleField, AcetateHeatMirage). Handles clear() and the dirty flag.

πŸ”—Constructor

πŸ”—Options

Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateTwinkleField

An animated Acetate that twinkles. The probability of any pixel twinkling is proportional to the value of the underlying scalar field.

Works similar to AcetateHeatMap, in the sense that this needs symbols that add intensity to its scalar field.

πŸ”—Usage example

const twinkler = new AcetateTwinkleField(map, {
		colour: 'red'
		maxIntensity: 16000,
	},
});

new HeatPoint(geom, {radius: 80, intensity: 500}).addTo(twinkler);

πŸ”—Constructor

Constructor
new AcetateHeatMap(<GliiFactory> glii)

πŸ”—Options

Option Type Default Description
colour Colour [0, 0, 0, 255] The colour of the twinkling pixels.
maxIntensity Number 65536 Valur of the field that equals a probability of 1 of a pixel having a solid colour. In other words, the probability of any given pixel twinkling at any given time is its intensity divided by the maximum intensity of the twinkle field.
noiseTextureSize Number 512 Width and height of the internal noise texture used for pseudo-RNG. This repeats, so small values might result in visible non-random patterns.
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateBlurField

Blurs another acetate based on the intensity of the scalar field.

πŸ”—Usage example

An AcetateBlurField needs another Acetate or Loader to be added to itself, like:

const blur = new AcetateBlurField(...);
const tiles = new MercatorTiles(tilesUrl).addTo(blur);

new HeatPoint(...).addTo(blur);

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
minIntensity Number 0 The intensity of the field corresponding to no blur at all. Any intensity at or below this value will produce no blur.
maxIntensity Number 1 The intensity of the field corresponding to full blur. Any intensity at or above this value will produce maximum blur.
maxBlur Number 4 The maximum amplitude of the blur, in CSS pixels.
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHeatMirage

Warps another acetate based on the intensity of the scalar field, in an animated way. The amplitude of the warp is directly proportional to the value of the scalar field.

πŸ”—Usage example

An AcetateHeatMirage needs another Acetate or Loader to be added to itself, like:

const mirage = new AcetateHeatMirage( ... );
const tiles = new MercatorTiles(tilesUrl).addTo(mirage);

new HeatPoint(...).addTo(mirage);

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
amplitudeRatio Number 1 The ratio between the amplitude of the warp and the intensity of the scalar field, in (horizontal) CSS pixels per unit of amplitude.
maxAmplitude Number 32 The maximum amplitude, in CSS pixels.
phase Number 32 The phase of the wave, in CSS pixels. This can be thought as the amplitude of the "vertical" waves seen.
speed Number .25 Frequency of the wave, in hertz
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateQuadBin

As AcetateHeatMap, but using a scalar field with a much lower resolution.

This is meant to use intensifyd Dots exclusively. Any other symbols (e.g. HeatPoints) will be scaled up by a factor equal to the cell size.

πŸ”—Usage example

import AcetateQuadBin from "gleo/acetates/AcetateQuadBin.mjs";
import intensify from "gleo/symboldecorators/intensify.mjs";
import Dot from "gleo/symbols/Dot.mjs";

const IntensityDot = intensify(Dot);

const heatbin = new AcetateQuadBin(map, {
	// colour stops, cell size, etc
});

new IntensityDot(geometry, { intensity: 100 }).addTo(heatbin);

πŸ”—Constructor

Constructor
new AcetateQuadBin(<GliiFactory> glii, <AcetateQuadBin Options> opts?)

πŸ”—Options

Option Type Default Description
cellSize Number 32 The size of cells, in CSS pixels.
Options inherited from AcetateHeatMap
Option Type Default Description
stops Object of Number to Colour A map of intensities to Colours that defines how to colourize the heatmap. A pixel with an intensity of a stop will exactly get that colour; any other colours will be linearly interpolated.

The first key must always be zero, and the keys must be ordered in strictly ascending order.

Default is:

{
	0: [255,0,0,0]        	// Transparent red
 10: [255,0,0,255]     	// Red
 100: [255,255,0,255]  	// Yellow
 1000: [0,255,0,255]   	// Green
 10000: [0,255,255,255]	// Cyan
}
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
cellSize Number / The cell size, as defined by the homonymous option during instantiation. Read-only.
Properties inherited from AcetateHeatMap
Property Type Description
stops Object of Number to Colour / The colour ramp, as the homonymous option. Read-only.
Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateQuadMarginBin

As AcetateQuadBin, but each cell is displayed with a transparent margin.

πŸ”—Constructor

Constructor
new AcetateQuadMarginBin(<GliiFactory> target, <AcetateQuadMarginBin Options> opts?)

πŸ”—Options

Option Type Default Description
marginSize Number 8 The size of the cells' margin, in CSS pixels. Must be smaller than half the cell size (or else the cell won't be displayed at all).
Options inherited from AcetateQuadBin
Option Type Default Description
cellSize Number 32 The size of cells, in CSS pixels.
Options inherited from AcetateHeatMap
Option Type Default Description
stops Object of Number to Colour A map of intensities to Colours that defines how to colourize the heatmap. A pixel with an intensity of a stop will exactly get that colour; any other colours will be linearly interpolated.

The first key must always be zero, and the keys must be ordered in strictly ascending order.

Default is:

{
	0: [255,0,0,0]        	// Transparent red
 10: [255,0,0,255]     	// Red
 100: [255,255,0,255]  	// Yellow
 1000: [0,255,0,255]   	// Green
 10000: [0,255,255,255]	// Cyan
}
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from AcetateQuadBin
Property Type Description
cellSize Number / The cell size, as defined by the homonymous option during instantiation. Read-only.
Properties inherited from AcetateHeatMap
Property Type Description
stops Object of Number to Colour / The colour ramp, as the homonymous option. Read-only.
Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHexBin

As AcetateQuadMarginBin, but cells are hexagonal instead of square.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
cellSize Number 64 The diameter of the hexagonal cells, in CSS pixels.
marginSize Number 8 The size of the cells' margin, in CSS pixels. Must be smaller than half the cell size (or else the cell won't be displayed at all).
Options inherited from AcetateHeatMap
Option Type Default Description
stops Object of Number to Colour A map of intensities to Colours that defines how to colourize the heatmap. A pixel with an intensity of a stop will exactly get that colour; any other colours will be linearly interpolated.

The first key must always be zero, and the keys must be ordered in strictly ascending order.

Default is:

{
	0: [255,0,0,0]        	// Transparent red
 10: [255,0,0,255]     	// Red
 100: [255,255,0,255]  	// Yellow
 1000: [0,255,0,255]   	// Green
 10000: [0,255,255,255]	// Cyan
}
Options inherited from ScalarField
Option Type Default Description
clearValue Number 0 The value of the scalar field prior to render data on it. It should be zero for most cases (where scalar symbols are using the ADD blend equation), but should be a different number when using the MIN blend equation.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from ScalarField
Method Returns Description
getFieldVaueAt(<Number> x, <Number> y) Number Returns the value of the scalar field at the given (CSS pixel) coordinates

Used internally during event handling, so that the event can provide the field value at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Properties inherited from AcetateQuadBin
Property Type Description
cellSize Number / The cell size, as defined by the homonymous option during instantiation. Read-only.
Properties inherited from AcetateHeatMap
Property Type Description
stops Object of Number to Colour / The colour ramp, as the homonymous option. Read-only.
Properties inherited from ScalarField
Property Type Description
subAcetates Array of Acetate List of acetates currently drawing into this scalar field. Read-only.
Acetate interface inherited from ScalarField
Property Type Description
framebuffer FrameBuffer The scalar field framebuffer. Read-only. Meant only to be read from Acetates rendering into this scalar field.
framebufferRGBA FrameBuffer The RGBA framebuffer. Read-only. Meant only to be used by some decorators.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)
Static properties inherited from Acetate
Property Type Description
PostAcetate undefined Static property (implemented in the Acetate class prototype, not the instances). For Acetates that render RGBA8 textures, this is undefined. For acetates that render non-RGBA8 textures, this shall be an Acetate prototype that can post-process this into RGBA8.

πŸ”—AcetateHeatPoint

An Acetate to place HeatPoints into a scalar field.

πŸ”—Constructor

Constructor
new AcetateHeatPoint(<GliiFactory> target, <AcetateHeatPoint Options> opts)

πŸ”—Options

Option Type Default Description
blendEquation String Defines how the symbols' intensity affects the value of the scalar field. The default is "ADD", which means the intensity is added to the scalar field. Other possible values are "SUBTRACT", "MIN" and "MAX".
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
multiAdd(<Array of GleoSymbol> symbols) this Add the given symbols to self (i.e. start drawing them).

Since uploading data to the GPU is relatively costly, implementations should make an effort to pack all the symbols' data together, and make as few calls to the Glii buffers' set()/multiSet() methods.

Subclasses must call the parent multiAdd to ensure firing the symbolsadded event.

getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
PostAcetate ScalarField Signals that this Acetate isn't rendered as a RGBA8 texture, but instead uses a scalar field.
AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)

πŸ”—AcetateHeatStroke

Draws HeatStrokes onto a scalar field.

πŸ”—Constructor

πŸ”—Options

AcetateStroke Options inherited from AcetateStroke
Option Type Default Description
miterLimit Number 10 Maximum value for the extrusion factor in miter line joints. Note this is not the same behaviour as 2D miter limit, which replaces miter joins with bevel joins.
Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

AcetateStroke Options inherited from AcetateStroke
Method Returns Description
multiAdd(<Array of Stroke> strokes) this Adds the strokes to this acetate (so they're drawn on the next refresh), using as few WebGL calls as feasible.
reprojectAll(<Number> start, <Number> length, <Boolean> skipEarcut) Array of Number As AcetateVertices.reproject(), but also recalculates the values for the attributes which depend on the geometry (including the extrusion amount, which depends on the linestring angle on each node) and mesh triangulation (for dextro- or levo-oriented bevel and round joins).
Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
PostAcetate AcetateScalarField Signals that this Acetate isn't rendered as a RGBA8 texture, but instead uses a scalar field.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)

πŸ”—AcetateFuelPoint

An Acetate to place FuelPoints into a scalar field.

The AcetateFuelPoint defines the "ramp factor": the speed at which the field increases/decreases, in terms of field units per CRS unit.

πŸ”—Constructor

Constructor
new AcetateFuelPoint(<GliiFactory> target, <AcetateFuelPoint Options> opts)

πŸ”—Options

Option Type Default Description
rampFactor Number 1 Defines how fast the intensity fades out outwards, in scalar field units per CRS distance units ("units per metre").

If the ramp factor is positive, then the calculated value into the field will be the minimum of the possible values; if it's positive, then maximum.

radius Number 10000 The radius of all FuelPoints, in CRS distance units
AcetateInteractive Options inherited from AcetateInteractive
Option Type Default Description
interactive Boolean true When set to false, disables all interactivity of symbols in this acetate, regardless of the symgols' settings. Should improve performance a bit when off.
pointerTolerance Number 3 The distance, in CSS pixels, that the pointer can be away from a symbol to trigger a pointer event.

(This is achieved internally by extruding vertices this extra amount; it does not perfectly buffer the visible symbol, but rather makes the clickable triangles slightly larger than the visible triangles)

(This assumes that the sprite image somehow fills its space; transparent regions in the sprite image will shift and may behave unintuitively; a transparent border will effectively lower the extra tolerance)

Options inherited from Acetate
Option Type Default Description
queryable Boolean false If set to true, pointer events dispatched by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.
zIndex Number 0 The relative position of this acetate in terms of compositing it with other acetates. Must be a 16-bit signed integer (an integer between -32786 and 32785).
attribution String undefined The attribution for the acetate, if any. Attribution can be delegated to symbols or loaders.

πŸ”—Events

Events inherited from Acetate
Event Data Description
symbolsadded Fired whenever symbols are added to the acetate. Event details include such symbols.
programlinked Event Fired when the GL program is ready (has been compiled and linked)

πŸ”—Methods

Method Returns Description
multiAdd(<Array of FuelPoint> fuelpoints) this Adds the FuelPoints to the acetate.

Internal Methods

Method Returns Description
reproject(<Number> start, <Number> length, <Array of GleoSymbol> symbols) Array of Number Dumps a new set of values to the this._coords attribute buffer, based on the known set of symbols added to the acetate (only those which have their attribute offsets between start and start+length. Each symbol will spawn as many coordinate vec2s as their attrLength property.

Returns the data set into the attribute buffer: a plain array of coordinates in the form [x1,y1, x2,y2, ... xn,yn].

Methods inherited from Acetate
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to self. Typically this will imply a call to allocate(symbol). However, for symbols with some async load (e.g. Sprites and ConformalRasters) the call to allocate() might happen at a later time.
getColourAt(<Number> x, <Number> y) Array of Number Returns a 4-element array with the red, green, blue and alpha values of the pixel at the given coordinates. The coordinates are relative to the upper-left corner of the acetate.

Used internally during event handling, so that the event can provide the pixel colour at the coordinates of the pointer event.

Returns undefined if the coordinates fall outside of the acetate.

Redrawing methods inherited from Acetate
Method Returns Description
resize(<Number> x, <Number> y) this Resizes the internal framebuffer to the given size (in pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox) Boolean Low-level redraw of the Acetate.

The passed crs ensures display in that CRS, since it's used to either

  • Check that all coordinate data in the Acetate is using that CRS, or
  • Reproject all coordinate data in the Acetate to match the CRS.

The 9-element matrix is expected to be a 2D transformation matrix, which is then fed to the shader program as a mat3.

Note that redrawing a single Acetate does not trigger a re-composition of all acetates, i.e. the redraw is not visible until re-composition happens.

Returns true when the acetate has been redrawn, or false if a redraw is not deemed needed.

clear() this Clears the acetate: sets all pixels to transparent black.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
PostAcetate ScalarField Signals that this Acetate isn't rendered as a RGBA8 texture, but instead uses a scalar field.
rampFactor Number Gets or sets the current ramp factor.

Note that changing the sign of the ramp factor will not behave properly.

AcetateInteractive Options inherited from AcetateInteractive
Property Type Description
isInteractive Boolean Whether the acetate has interactivty (pointer events) enabled. Read-only.
idsTexture Texture Read-only accessor to the Glii Texture holding the internal IDs of interactive symbols.
Properties inherited from Acetate
Property Type Description
queryable Boolean If set to true, pointer events dispathed by this acetate will contain information about the colour of the underlying pixel. This can negatively impact performance.

Can be updated at runtime. The initial value is given by the homonymous option.

glii GliiFactory The underlying Glii instance. Read-only.
attribution String The attribution text for the acetate (for use with the Attribution control). Can not be updated (consider delegating attribution to symbols instead)

πŸ”—Loader

A Loader loads/unloads symbols as needed.

Some Loaders might watch for changes in the map's (or the Platinas) state (center, scale, etc) and load/unload symbols based on that.

Some other Loaders work with data formats, making network requests and parsing data.

πŸ”—Options

Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—AbstractTileLoader

Functionality common to RasterTileLoader and AbstractVectorTileLoader.

A AbstractTileLoader watches for changes in the map's viewport and loads/unloads/overwrites raster/vector tiles.

πŸ”—Constructor

Constructor
new GenericVectorTileLoader(<TilePyramid> pyramid, <GenericVectorTileLoader Options> opts, <Number> tileWrapX, <Number> tileWrapY)

πŸ”—Options

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Events

Event Data Description
rangechange Event Fired whenever the visible tiles (the "tile range") have changed. Not every change in the viewport triggers a range change.
tileload TileEvent Dispatched when a tile loads.
tileerror TileEvent Dispatched when a tile failed to load.

πŸ”—Methods

Extension methods

Method Returns Description
_isTileWithinRange(<Number> x, <Number> y, <Number> minX, <Number> minY, <Number> maxX, <Number> maxY, <Number> spanX, <Number> spanY) Boolean Can (and should) be used by implementations to check whether a set of x, y tile coordinates are within the given tile range with the given tile span. Tile ranges are assumed to be minimum-inclusive but maximum exclusive, i.e. [min, max)
_abortLevel(level:String) undefined Must be provided by raster and vector implementations. Should (try to) abort all pending Promises for the given level.
_onRangeChange(level:String, <Number> minX, <Number> minY, <Number> maxX, <Number> maxY, <Boolean> levelChange) undefined Must be provided by raster and vector implementations. Called whenever a rangechange event occurs. Implementations should (a) abort tiles outside the range and (b) load tiles inside the range, all according to their caching algorithm.
_onTileLoad(<String> level, <Number> x, <Number> y, <*> tile) undefined Should be called when a tile loads. The abstract implementation will only fire a tileload event and trigger a redraw.
_onTileError(<String> level, <Number> x, <Number> y, <*> tile) undefined Should be called when a tile fails to load. The abstract implementation will only fire a tileerror event.
Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
pyramid TilePyramid The tile pyramid used. Read-only.
currentLevel String The name of the level of the pyramid currently active (the one best fitting the map/platina's scale). Read-only.
currentRange Array of Number An array of the form [minX, minY, maxX, maxY] containing the range of tile XY coordinates which cover the current map/platina viewport. Read-only.

πŸ”—TileLoader

πŸ”—RasterTileLoader

Loads raster tiles, according to a Gleo TilePyramid and a callback function that returns tiles given the tile coordinates.

Will automatically spawn an AcetateStitchedTiles.

πŸ”—Constructor

A RasterTileLoader needs a TilePyramid and a function that, given the pyramid level ("z"), the coordinates of a tile within that level ("x" and "y"), and an instance of AbortController, returns an instance of HTMLImageElement, or a Promise to such an image. The promise should be rejected whenever the abort controller's signal is activated.
Constructor
new TileLoader(pyramid:TilePyramid, <Function> tileFn, <TileLoader Options> opts)

πŸ”—Options

TileLoader Options

Option Type Default Description
tileResX Number 256 Horizontal size, in source raster pixels, of each tile.
tileResX Object of String to Number A map of level identifier to horizontal raster size (in source raster pixels). e.g. {"0": 512, "1": 256}
tileResY Number 256 Vertical size, in source raster pixels, of each tile. A map of level identifier to vertical raster size (in source raster pixels). e.g. {"0": 512, "1": 256}
zIndex Number -5500 The z-index of the acetate for these tiles.
fallback HTMLImageElement An image to use as fallback is loading a tile fails.
fallback URL Idem, but using the URL to an image.
fallback String Idem, but using a String containing a URL
retry Boolean false When true, tiles that failed to load will be re-requested the next time the tile extent changes (i.e. moving the map enough so that new tiles become visible). This can potentially lead to lots of requests for missing tiles.

Options passed to spawned acetate

A RasterTileLoader creates a AcetateStitchedTiles under the hood. The following options are passed through to this acetate.
Option Type Default Description
interpolate Boolean false Whether to use bilinear pixel interpolation or not.

In other words: false means pixellated, true means smoother.

fadeInDuration Number 250 Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels Number 3 Number of maximum tile levels to keep loaded in their textures. Higher values can provide a slightly better experience when zooming in and out, but will use more GPU RAM.
resizablePlatina Boolean true Whether the platina can be expected to be resized up to the size of the screen. When false, less GPU RAM is used for the textures.

πŸ”—MercatorTiles

Convenience wrapper for RasterTileLoader. Loads tilesets in the de-facto standard for Web Mercator tiles.

This aims to expose a minimalistic Leaflet-like API, instead of needing to use a configurable TilePyramid like TileLoader does.

πŸ”—Usage example

new MercatorTiles("https://tile.osm.org/{z}/{y}/{x}.png", {
	maxZoom: 10,
	attribution: "<a href='http://osm.org/copyright'>Β© OpenStreetMap contributors</a>",
}).addTo(myGleoMap);

πŸ”—Constructor

Constructor
new MercatorTiles(<String> templateStr, <MercatorTiles Options> options)

πŸ”—Options

Option Type Default Description
minZoom Number 0 The minimum zoom level for tiles to be loaded.
maxZoom Number 18 The maximum zoom level for tiles to be loaded.
tileSize Number 256 The size of the tiles, in CSS pixels.
TileLoader Options inherited from RasterTileLoader
Option Type Default Description
tileResX Number 256 Horizontal size, in source raster pixels, of each tile.
tileResX Object of String to Number A map of level identifier to horizontal raster size (in source raster pixels). e.g. {"0": 512, "1": 256}
tileResY Number 256 Vertical size, in source raster pixels, of each tile. A map of level identifier to vertical raster size (in source raster pixels). e.g. {"0": 512, "1": 256}
zIndex Number -5500 The z-index of the acetate for these tiles.
fallback HTMLImageElement An image to use as fallback is loading a tile fails.
fallback URL Idem, but using the URL to an image.
fallback String Idem, but using a String containing a URL
retry Boolean false When true, tiles that failed to load will be re-requested the next time the tile extent changes (i.e. moving the map enough so that new tiles become visible). This can potentially lead to lots of requests for missing tiles.
Options passed to spawned acetate inherited from RasterTileLoader
Option Type Default Description
interpolate Boolean false Whether to use bilinear pixel interpolation or not.

In other words: false means pixellated, true means smoother.

fadeInDuration Number 250 Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels Number 3 Number of maximum tile levels to keep loaded in their textures. Higher values can provide a slightly better experience when zooming in and out, but will use more GPU RAM.
resizablePlatina Boolean true Whether the platina can be expected to be resized up to the size of the screen. When false, less GPU RAM is used for the textures.

πŸ”—ConformalWMS

A Loader that displays conformal rasters from a WMS service.

The constructor needs the base URL of the WMS. The ConformalWMS loader will perform a getCapabilities query. The raster will only by displayed if the CRS of the map is one of the CRSs available from the WMS.

This is an untiled WMS client implementation: every viewport change translates into a new image request to the WMS.

πŸ”—Constructor

Constructor
new ConformalWMS(<String> url, <ConformalWMS Options> opts)

πŸ”—Options

Option Type Default Description
layer String The name of the thematic layer to request, as defined per the WMS capabilities
layer Array of String The names of the thematic layers to request.
style String A style for the thematic layer, as defined per the WMS capabilities
style Array of String The styles for the thematic layers. There must be a one-to-one equivalence.
imageFormat String The MIME type for the image format to request, e.g. image/png or image/png. If ommitted, the first format listed in the WMS capabilities will be used.
transparent Boolean Whether or not to request transparent images.
debounceTime Number 500 Time, in milliseconds, to debounce the WMS requests. This is a preventative measure against overloading the WMS server.
wmsVersion String "1.3.0" The version of the WMS protocol to use
interpolate Boolean false Akin to the interpolate option of ConformalRaster
Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—ConformalOGCAPIMaps

A Loader that displays conformal rasters from a OGC API Maps service, as described in:

The constructor needs the base URL of the OGC API endpoint. The ConformalOGCAPIMaps loader will request the metadata for that endpoint (available collections, formats, CRSs, etc).

This is an untiled client implementation: every viewport change translates into a new image request to the API.

πŸ”—Constructor

Constructor
new ConformalOGCAPIMaps(<String> url, <ConformalOGCAPIMaps Options> opts)

πŸ”—Options

Option Type Default Description
collection String The ID of the collection to use. Note this is que unique id, and not the human-readable title of the collection.
imageFormat String The MIME type for the image format to request, e.g. image/png or image/jpeg. If ommitted, the first format listed in the collection metadata will be used.
debounceTime Number 500 Time, in milliseconds, to debounce the HTTP(S) requests. This is a preventative measure against overloading the OGC API server.
transparent Boolean Whether or not to request transparent images.
interpolate Boolean false Akin to the interpolate option of ConformalRaster
Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—AbstractSymbolGroup

Abstract base class for Loaders that can have GleoSymbols added to them (e.g. symbols can be added to a Clusterer loader instead of a Platina or GleoMap).

πŸ”—Options

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to this group loader.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given symbols to this group loader
remove() this Removes the Loader from the map/platina it was in.
remove(<GleoSymbol> symbol) this Removes the given symbol from this group loader.
multiRemove(symbols) this Removes the given symbols from this group loader
empty() this Empties the symbol group, by removing all known symbols in it.
has(<GleoSymbol> symbol) Boolean Returns true if this loader contains the given symbol, false otherwise.
Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Subclass interface

Property Type Description
symbols Array of GleoSymbol The GleoSymbols added to this group.

πŸ”—SymbolGroup

Akin to Leaflet's LayerGroup. Groups symbols together so that they can be added to/removed at once by adding/removing the symbol group. Symbols can be added to/removed from the group as well.

In addition to symbols, accepts nested Loaders.

For grouping symbols relating to the same geographical feature, use MultiSymbol instead.

πŸ”—Options

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to this group loader.
add(<Loader> loader) this Adds the given loader to this group loader.
remove() this Removes the Loader from the map/platina/loader it was in.
remove(<GleoSymbol> symbol) this Removes the given symbol from this group loader.
remove(<Loader> loader) this Removes the the given Loader from this group loader.
has(<GleoSymbol> symbol) Boolean Returns true if this loader contains the given symbol, false otherwise.
has(<Loader> symbol) Boolean Returns true if this loader contains the given loader, false otherwise.
Methods inherited from AbstractSymbolGroup
Method Returns Description
multiAdd(<Array of GleoSymbol> symbols) this Adds the given symbols to this group loader
multiRemove(symbols) this Removes the given symbols from this group loader
empty() this Empties the symbol group, by removing all known symbols in it.
Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Clusterer

Handles symbols with point geometries, and clusters them together whenever they're too close to each other.

πŸ”—Options

Option Type Default Description
clusterSymbolizer Function Defines how to spawn symbols for the clusters. The function will receive an Array of GleoSymbols as its first parameter, and must return an Array of GleoSymbols which must represent the cluster.
distance Number 80 The minimum distance, in CSS pixels, for two GleoSymbols to not be clustered. By implication, that's also the maximum diameter of a cluster.
clusterSetFactor Number 1 How many cluster sets to calculate per every doubling/halving of the scale.

e.g. The default value of 1 will create a set of clusters for every doubling of the scale. A value of 2 will create a set of clusters every time the scale varies by a factor of square root of 2, and a value of e.g. 0.5 will create a set of clusters every time the scale quadruples.

scaleLimit Number 0 Clusters will not be calculated past this scale factor. Instead, the most detailed clusters will be expandable Spiders.

TODO: Default to undefined, and calculate from the platina's minSpan.

onClusterClick Function An event handler that will run when clicking on a non-spider cluster.

This function receives as parameters: the event, a reference to this Clusterer, and Array of GleoSymbols with the items in the cluster, and an ExpandBox covering those items.

The default is to perform a fitBounds to the bounding box of the items in that cluster, zooming up to scaleLimit at most.

onClusterClick Boolean Setting this to false will disable cluster click events.
Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Events

Event Data Description
expand CustomEvent Fired when one of the Spiders of the clusterer expands. The Spider in question is in the event's detail
collapse CustomEvent Fired when one of the Spiders of the clusterer collapses. The Spider in question is in the event's detail
build CustomEvent Fired when one of the the internal data structures have been built (due to data being added or removed).
reset CustomEvent Fired when the internal data structures have been reset (due to data being added or removed).

πŸ”—Methods

Method Returns Description
getParent(<GleoSymbol> symbol, <Number> scale?) GleoSymbol Returns the symbol representing the cluster that the given symbol belongs to, at the given scale. If scale is not given, the current scale will be used.

Akin to leaflet-markercluster's getVisibleParent.

getUnclusterScaleFor(<GleoSymbol> symbol) Number Returns the minimum scale (in the map's CRS units) where the given symbol is not in a cluster.

If the symbol cannot be shown outside of a cluster (i.e. it belongs to a Spider at the Clusterers scaleLimit), then the return value will be zero.

zoomToShowSymbol(<GleoSymbol> symbol, <SetView Options> setViewOpts?) this Akin to leaflet-markercluster's zoomToShowLayer() - zooms into the map far enough so the given symbol is not clustered; if it's in a spider it will zoom into it and expand the spider.
Methods inherited from AbstractSymbolGroup
Method Returns Description
add(<GleoSymbol> symbol) this Adds the given symbol to this group loader.
multiAdd(<Array of GleoSymbol> symbols) this Adds the given symbols to this group loader
remove() this Removes the Loader from the map/platina it was in.
remove(<GleoSymbol> symbol) this Removes the given symbol from this group loader.
multiRemove(symbols) this Removes the given symbols from this group loader
empty() this Empties the symbol group, by removing all known symbols in it.
has(<GleoSymbol> symbol) Boolean Returns true if this loader contains the given symbol, false otherwise.
Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
bbox Array of Number / The bounding box of the data for the clusterer, in the CRS of the / platina this clusterer is in, in the form [minX, minY, maxX, maxY]. / Read-only.
scaleLimit Value of the scaleLimit option. Read-only.

πŸ”—GeoJSON

A Loader for requesting, parsing and symbolizing data in GeoJSON format

πŸ”—Constructor

Constructor
new GeoJSON(<Object> json, <GeoJSON Options> options)
new KML(<Blob> blob, <KML Options> options)
new GeoJSON(<String> url, <GeoJSON Options> options)

πŸ”—Options

GeoJSON Options

Option Type Default Description
pointSymbolizer Function * A Function that defines how features with a point (or multipoint) geometry get transformed into GleoSymbols. It receives the feature as its first parameter, an instance of a Gleo Geometry as its second parameter, and must return an array of GleoSymbols.

When not specified, a default implementation is used. This default implementation symbolizes point features with a CircleFill and a CircleStroke with default options.

This function may be called more than once for the same feature.

lineSymbolizer Function * Akin to pointSymbolizer, but for linestrings (and multilinestrings).

When not specified, the default is to use a default Stroke.

Akin to pointSymbolizer, but for linestrings (and multilinestrings).

polygonSymbolizer Function * Akin to pointSymbolizer, but for polygons (and multipolygons).

When not specified, the default is to use default Stroke and Fill. Akin to pointSymbolizer, but for polygons (and multipolygons).

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GeoJSON Options

Property Type Description
pointSymbolizer Function The Function currently used for turning a feature and one of its geometries into a set of GleoSymbols. Changing this function during runtime does not trigger a re-symbolization of the dataset.

πŸ”—JSONFG

A Loader for requesting, parsing and symbolizing data in "OGC Features and Geometries JSON" format (AKA "OGC JSON-FG"). JSON-FG is OGC's proposal for extending GeoJSON.

This Gleo implementation is built according to the draft specification as of 2022-09, from https://docs.ogc.org/DRAFTS/21-045.html .

GeoJSON files can only contain data in latitude-longitude coordinates, but JSON-FG allows for other coordinate systems. This Gleo implementation handles this extra CRS information, so that geometries work as they should.

Due to technical restrictions, any CRSs referred to in the data must already have a corresponding Gleo BaseCRS defined elsewhere.

πŸ”—Constructor

Constructor
new JSONFG(<Object> json, <JSONFG Options> options)
new JSONFG(<URL> url, <JSONFG Options> options)
new JSONFG(<String> url, <JSONFG Options> options)

πŸ”—Options

GeoJSON Options inherited from GeoJSON
Option Type Default Description
pointSymbolizer Function * A Function that defines how features with a point (or multipoint) geometry get transformed into GleoSymbols. It receives the feature as its first parameter, an instance of a Gleo Geometry as its second parameter, and must return an array of GleoSymbols.

When not specified, a default implementation is used. This default implementation symbolizes point features with a CircleFill and a CircleStroke with default options.

This function may be called more than once for the same feature.

lineSymbolizer Function * Akin to pointSymbolizer, but for linestrings (and multilinestrings).

When not specified, the default is to use a default Stroke.

Akin to pointSymbolizer, but for linestrings (and multilinestrings).

polygonSymbolizer Function * Akin to pointSymbolizer, but for polygons (and multipolygons).

When not specified, the default is to use default Stroke and Fill. Akin to pointSymbolizer, but for polygons (and multipolygons).

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GeoJSON Options inherited from GeoJSON
Property Type Description
pointSymbolizer Function The Function currently used for turning a feature and one of its geometries into a set of GleoSymbols. Changing this function during runtime does not trigger a re-symbolization of the dataset.

πŸ”—GPX

A Loader for requesting, parsing and symbolizing data in GPS Exchange Format (AKA "GPX").

πŸ”—Constructor

Constructor
new GPX(<XMLDocument> gpx, <GPX Options> options)
new GPX(<URL> url, <GPX Options> options)
new GPX(<String> url, <GPX Options> options)

πŸ”—Options

GPX Options

Option Type Default Description
waypointSymbolizer Function * A Function that defines how waypoints get transformed into GleoSymbols. It receives the waypoint (as a parsed XML node), an instance of a Gleo Geometry as its second parameter, and must return an array of GleoSymbols.

The parsed XML node is an Element, and its schema is specified at https://www.topografix.com/GPX/1/1/#type_wptType

When not specified, a default implementation is used. This default implementation symbolizes waypoints with a CircleFill and a CircleStroke with default options.

trackSymbolizer Function * Akin to pointSymbolizer, but for GPX tracks.

When not specified, the default is to use a default Stroke.

routeSymbolizer Function * Akin to pointSymbolizer, but for GPX routes.

When not specified, the default is to use a default Stroke.

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GPX Options

Property Type Description
waypointSymbolizer Function The Function currently used for turning a waypoint into a set of GleoSymbols.

Changing this function during runtime does not trigger a re-symbolization of the dataset.

trackSymbolizer Function Akin to waypointSymbolizer, but for GPX tracks.
routeSymbolizer Function Akin to `waypointSymbolizer, bt for GPX routes.

πŸ”—KML

A Loader for requesting, parsing and symbolizing data in Keyhole Markup Language (AKA "KML").

πŸ”—Constructor

Constructor
new KML(<XMLDocument> gpx, <GPX Options> options)
new KML(<Blob> blob, <KML Options> options)
new KML(<URL> url, <KML Options> options)
new KML(<String> url, <KML Options> options)

πŸ”—Options

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Events

KML Options

Event Data Description
load Fired when the KML data has been fully loaded ans symbolized.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

KML Options

Property Type Description
bbox ExpandBox The minimal bounding box that contains all geometries from all loaded symbols. The units of this bounding box correspond to the CRS of the Platina this loader is in.
bbox undefined When this loader is not in any Platina, or there are no loaded symbols, the bounding box of its loaded symbols is undefined.

πŸ”—GenericVectorTileLoader

Generic, format-less, vector tile loader.

Uses a Pyramid like a TileLoader does, but instead of a raster image, each tile contains a number of GleoSymbols instead.

This is the base, format-less, implementation; most users will be interested in a vector tile loader which requests and parses vector tiles in protobuf or geojson format. This class does allow for synthetic vector tiles, though.

πŸ”—Constructor

A GenericVectorTileLoader is built upon a TilePyramid and a function that, given the pyramid level ("z"), the coordinates of a tile within that level ("x" and "y"), and an AbortController, returns an Array of GleoSymbols, or a Promise to such an array.
Constructor
new GenericVectorTileLoader(<TilePyramid> pyramid, <Function> tileFn, <GenericVectorTileLoader Options> opts)

πŸ”—Events

Event Data Description
tileout TileEvent Dispatched when a vector tile is deleted due to being out of the platina's visible bounds.
tileprune TileEvent Dispatched when a tile is deleted due to pruning. This happens whenever a prunable tile is (a) not the best fit for the current map scale and (b) completely covered by tiles from the fitting pyramid level.

πŸ”—ProtobufVectorTileLoader

Loader for protobuffer (.pbf) vector tiles. Also known as "MVT" (mapbox/maplibre vector tiles).

Requires:

πŸ”—Usage example

let vectorTiles = new ProtobufVectorTileLoader(
	pyramid,
	"https://api.maptiler.com/tiles/v3-openmaptiles/{z}/{x}/{y}.pbf?key=API_KEY_GOES_HERE",
	function (themeName, geom, attrs) {
		if (themeName === "water") {
			return [ new Fill(geom, {
				colour: [0, 0, 128, 128],
				interactive: true,
			})];
		} else {
			return [];
		}
	}, {
		attribution: "MapTiler, OpenStreetMap"
	}
).addTo(gleoMap);

πŸ”—Constructor

Constructor
new ProtobufVectorTileLoader(<TilePyramid> pyramid, <String> templateStr, <Function> symbolyzer, <ProtobufVectorTileLoader options> opts?)

πŸ”—Options

Option Type Default Description
onEachFeature Function Callback function that will be called just after each feature has been symbolized. The callback function will receive (symbols, geometry, themeName, attributes) as parameters. The callback will not be called if a vector tile feature was filtered out or otherwise was symbolized to zero symbols.
fetchOptionsForTile Function undefined Optional callback function for supplying custom fetch options, given the tile coordinates (level, x and y).

The return value of this callback must be a set of fetch options, as per the options parameter in https://developer.mozilla.org/en-US/docs/Web/API/fetch .

πŸ”—Events

Events inherited from GenericVectorTileLoader
Event Data Description
tileout TileEvent Dispatched when a vector tile is deleted due to being out of the platina's visible bounds.
tileprune TileEvent Dispatched when a tile is deleted due to pruning. This happens whenever a prunable tile is (a) not the best fit for the current map scale and (b) completely covered by tiles from the fitting pyramid level.

πŸ”—VectorStylesheetLoader

Should read a JSON document containing a Mapbox GL JS Stylesheet, and spawn a ProtobufVectorTileLoader (plus a RasterTileLoader if there is aerial imagery specified in the stylesheet)

See https://docs.mapbox.com/mapbox-gl-js/style-spec/

πŸ”—Constructor

A VectorStylesheetLoader takes the URL of the JSON stylesheet as its only constructor parameter.
Constructor
new VectorStylesheetLoader(<URL> url)
new VectorStylesheetLoader(<String> url)

πŸ”—Options

Option Type Default Description
interactive Boolean false Whether the GleoSymbols spawned bythis loader shall be interactive themselves (or not).
Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—GeoTIFFLoader

Loads a single GeoTIFF file (from a URL), automatically handling everything needed for a default visualization of that GeoTIFF.

In particular, this handles metadata for the CRS, the min/max values and number of samples per pixel. It then provides a ArrugatedRaster, possibly paired to a AcetateHeatMap to provide greyscale rendering.

πŸ”—Usage example

new GeoTIFFLoader('file.tif').addTo(map);

πŸ”—Constructor

Constructor
new GeoTIFFLoader(<String> url, <Loader Options> opts?)
new GeoTIFFLoader(<GeoTIFF> geotiff, <Loader Options> opts?)

πŸ”—Options

Options inherited from Loader
Option Type Default Description
attribution String undefined The HTML attribution to be shown in the AttributionControl, if any.

πŸ”—Methods

Methods inherited from Loader
Method Returns Description
addTo(<GleoMap> target) this Adds the Loader to the given GleoMap
addTo(<Platina> target) this Adds the Loader to the given Platina Adds the Loader to the given SymbolGroup
remove() this Removes the Loader from the map/platina it was in.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—RawGeometry

Like Geometry, but expects the "raw" flattened coordinate array, rings array, hulls array, and skips the assertions.

πŸ”—Constructor

Constructor
new RawGeometry(<BaseCRS> crs, <Array of Number> coords, <Array of Number> rings, <Array of Number> hulls, <RawGeometry Options> options)

πŸ”—Options

RawGeometry Options

Option Type Default Description
wrap Boolean true Whether antimeridian-wrap functionality should be enabled for this geometry.

Only works for 2-dimensional Geometrys.

dimension Number 2 The dimension of each coordinate. 2 for X-Y, 3 for X-Y-Z, 4 for X-Y-Z-M.

πŸ”—Methods

RawGeometry Options

Method Returns Description
toCRS(<CRS> newCRS) Geometry Returns the Geometry, translated/projected to the given CRS, as a new instance.

If the CRS is exactly the same, this is returned instead.

toCRS(<String> newCRS) Geometry Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian") or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng() Array of Number Returns a flat array of latitude-longitude (Y-X) representing this geometry, in the form [lat1, lng1, lat2, lng2, ... latN, lngN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

asLngLat() Array of Number Returns a flat array of longitude-latitude (X-Y) representing this geometry, in the form [lng1, lat1, lng2, lat2, ... lngN, latN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

mapCoords(<Function> fn) Array of Number Returns a new array of the form [x1,y1, ... xn,yn], having run the given Function on every x,y pair of coordinates from self. The Function must take an Array of 2 Numbers as its first parameter (the coordinate pair), a Number as its second parameter (the index of the current coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.

Takes into account the dimension (dimension 3 works for x,y,z and dimension 4 works for x,y,z,m)

mapRings(<Function> fn) Array Runs the given Function once per ring (including each ring in each hull, if applicable), and returns an Array containing the return values.

The given Function can expect four parameters:

  • start coordinate (0-indexed, inclusive)
  • end coordinate (0-indexed, exclusive)
  • length of the ring (how many coordinates in that ring, also end-start)
  • i, index of the current ring (0-indexed)

πŸ”—Properties

RawGeometry Options

Property Type Description
coords Array of Number A flat Array containing the CRS-relative coordinates or the geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new ring.
hulls Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new hull.
loops Array of Boolean A read-only Array with one Boolean values per ring. The value is true for those rings which forms loops (the first coordinate pair equals the last one). A read-only containing the starts (inclusive) and ends (exclusive) of all rings.

Contains, at least, 0 and the amount of coordinate pairs (for geometries with just one ring)

πŸ”—Geometry

A Gleo Geometry is akin to geometries in the OGC Simple Features Specification: points, linestrings, polygons and multipolygons.

Internally, Geometrys are represented as a flat array of coordinates, in the form [x1,y2, x2,y2, x3,y3 ... xn,yn] for 2-dimensional geometries; plus a list of offsets specifying the n-th coordinate where a hull starts and a ring starts (0th hulls and rings are ommitted).

(About nomenclature: a multipolygon has one or more hulls, and each hull has an outer ring and zero or more inner rings. Hulls tell apart polygons within a multipolygon, and rings tell apart inner/outer boundaries of a polygon).

(TODO: [x1,y1,z1, ... xn,yn,zn] for 3-dimensional, and [x1,y1,z1,m1, ... xn,yn,zn,mn] for 4-dimensional)

πŸ”—Usage example

let point = new Geometry(crs, [x,y]);

let linestring = new Geometry(crs, [[x1,y1],[x2,y2]]);

πŸ”—Constructor

The constructor for a Geometry can take either a BaseCRS instance, or its name.

The geometry can be:

  • An Array of two Numbers (for points)
  • An Array of Arrays of two Numbers (for multipoints or linestrings)
  • An Array of Arrays of Arrays of two Numbers (for multilinestrings or polygons)
  • An Array of Arrays of Arrays of Arrays of two Numbers (for multipolygons)
Constructor
new Geometry(<BaseCRS> crs, <Array of Number> coords, <Geometry Options> opts)
new Geometry(<String> crs, <Array of Number> coords, <Geometry Options> opts)
new Geometry(<BaseCRS> crs, <Array of Array of Number> coords, <Geometry Options> opts)
new Geometry(<BaseCRS> crs, <Array of Array of Array of Number> coords, <Geometry Options> opts)
new Geometry(<BaseCRS> crs, <Array of Array of Array of Array of Number> coords, <Geometry Options> opts)

πŸ”—Options

Geometry Options

Option Type Default Description
deduplicate Boolean true Whether to detect and remove duplicated consecutive coordinates. Prevents graphical artefacts on some edge cases of topologically malformed data.
RawGeometry Options inherited from RawGeometry
Option Type Default Description
wrap Boolean true Whether antimeridian-wrap functionality should be enabled for this geometry.

Only works for 2-dimensional Geometrys.

dimension Number 2 The dimension of each coordinate. 2 for X-Y, 3 for X-Y-Z, 4 for X-Y-Z-M.

πŸ”—Methods

RawGeometry Options inherited from RawGeometry
Method Returns Description
toCRS(<CRS> newCRS) Geometry Returns the Geometry, translated/projected to the given CRS, as a new instance.

If the CRS is exactly the same, this is returned instead.

toCRS(<String> newCRS) Geometry Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian") or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng() Array of Number Returns a flat array of latitude-longitude (Y-X) representing this geometry, in the form [lat1, lng1, lat2, lng2, ... latN, lngN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

asLngLat() Array of Number Returns a flat array of longitude-latitude (X-Y) representing this geometry, in the form [lng1, lat1, lng2, lat2, ... lngN, latN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

mapCoords(<Function> fn) Array of Number Returns a new array of the form [x1,y1, ... xn,yn], having run the given Function on every x,y pair of coordinates from self. The Function must take an Array of 2 Numbers as its first parameter (the coordinate pair), a Number as its second parameter (the index of the current coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.

Takes into account the dimension (dimension 3 works for x,y,z and dimension 4 works for x,y,z,m)

mapRings(<Function> fn) Array Runs the given Function once per ring (including each ring in each hull, if applicable), and returns an Array containing the return values.

The given Function can expect four parameters:

  • start coordinate (0-indexed, inclusive)
  • end coordinate (0-indexed, exclusive)
  • length of the ring (how many coordinates in that ring, also end-start)
  • i, index of the current ring (0-indexed)

πŸ”—Properties

RawGeometry Options inherited from RawGeometry
Property Type Description
coords Array of Number A flat Array containing the CRS-relative coordinates or the geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new ring.
hulls Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new hull.
loops Array of Boolean A read-only Array with one Boolean values per ring. The value is true for those rings which forms loops (the first coordinate pair equals the last one). A read-only containing the starts (inclusive) and ends (exclusive) of all rings.

Contains, at least, 0 and the amount of coordinate pairs (for geometries with just one ring)

πŸ”—LngLat

A Geometry of longitude-latitude coordinates, assuming EPSG:4326.

Note that the order of the axis is longitude-latitude, or x-y: new LngLat([180, 90]) is equivalent to new Coord(epsg4326, [180, 90]).

The issue of the order of the axis might be confusing. See also LatLng and https://macwright.com/lonlat/ .

πŸ”—Constructor

Constructor
new LngLat(<Array of Number> xy)

πŸ”—Options

Geometry Options inherited from Geometry
Option Type Default Description
deduplicate Boolean true Whether to detect and remove duplicated consecutive coordinates. Prevents graphical artefacts on some edge cases of topologically malformed data.
RawGeometry Options inherited from RawGeometry
Option Type Default Description
wrap Boolean true Whether antimeridian-wrap functionality should be enabled for this geometry.

Only works for 2-dimensional Geometrys.

dimension Number 2 The dimension of each coordinate. 2 for X-Y, 3 for X-Y-Z, 4 for X-Y-Z-M.

πŸ”—Methods

RawGeometry Options inherited from RawGeometry
Method Returns Description
toCRS(<CRS> newCRS) Geometry Returns the Geometry, translated/projected to the given CRS, as a new instance.

If the CRS is exactly the same, this is returned instead.

toCRS(<String> newCRS) Geometry Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian") or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng() Array of Number Returns a flat array of latitude-longitude (Y-X) representing this geometry, in the form [lat1, lng1, lat2, lng2, ... latN, lngN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

asLngLat() Array of Number Returns a flat array of longitude-latitude (X-Y) representing this geometry, in the form [lng1, lat1, lng2, lat2, ... lngN, latN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

mapCoords(<Function> fn) Array of Number Returns a new array of the form [x1,y1, ... xn,yn], having run the given Function on every x,y pair of coordinates from self. The Function must take an Array of 2 Numbers as its first parameter (the coordinate pair), a Number as its second parameter (the index of the current coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.

Takes into account the dimension (dimension 3 works for x,y,z and dimension 4 works for x,y,z,m)

mapRings(<Function> fn) Array Runs the given Function once per ring (including each ring in each hull, if applicable), and returns an Array containing the return values.

The given Function can expect four parameters:

  • start coordinate (0-indexed, inclusive)
  • end coordinate (0-indexed, exclusive)
  • length of the ring (how many coordinates in that ring, also end-start)
  • i, index of the current ring (0-indexed)

πŸ”—Properties

RawGeometry Options inherited from RawGeometry
Property Type Description
coords Array of Number A flat Array containing the CRS-relative coordinates or the geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new ring.
hulls Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new hull.
loops Array of Boolean A read-only Array with one Boolean values per ring. The value is true for those rings which forms loops (the first coordinate pair equals the last one). A read-only containing the starts (inclusive) and ends (exclusive) of all rings.

Contains, at least, 0 and the amount of coordinate pairs (for geometries with just one ring)

πŸ”—LatLng

A Geometry of latitude-longitude coordinates, assuming EPSG:4326.

Note that the order of the axis is inverted: new LatLng([90, 180]) is equivalent to new Geometry(epsg4326, [180, 90]).

The issue of the order of the axis might be confusing. See also LatLng and https://macwright.com/lonlat/ .

πŸ”—Constructor

Constructor
new LatLng(<Array of Number> xy)

πŸ”—Options

Geometry Options inherited from Geometry
Option Type Default Description
deduplicate Boolean true Whether to detect and remove duplicated consecutive coordinates. Prevents graphical artefacts on some edge cases of topologically malformed data.
RawGeometry Options inherited from RawGeometry
Option Type Default Description
wrap Boolean true Whether antimeridian-wrap functionality should be enabled for this geometry.

Only works for 2-dimensional Geometrys.

dimension Number 2 The dimension of each coordinate. 2 for X-Y, 3 for X-Y-Z, 4 for X-Y-Z-M.

πŸ”—Methods

RawGeometry Options inherited from RawGeometry
Method Returns Description
toCRS(<CRS> newCRS) Geometry Returns the Geometry, translated/projected to the given CRS, as a new instance.

If the CRS is exactly the same, this is returned instead.

toCRS(<String> newCRS) Geometry Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian") or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng() Array of Number Returns a flat array of latitude-longitude (Y-X) representing this geometry, in the form [lat1, lng1, lat2, lng2, ... latN, lngN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

asLngLat() Array of Number Returns a flat array of longitude-latitude (X-Y) representing this geometry, in the form [lng1, lat1, lng2, lat2, ... lngN, latN].

Will throw an error if the geometry cannot be converted to latitude-longitude (i.e. is in a CRS that cannot be reprojected to EPSG:4326).

mapCoords(<Function> fn) Array of Number Returns a new array of the form [x1,y1, ... xn,yn], having run the given Function on every x,y pair of coordinates from self. The Function must take an Array of 2 Numbers as its first parameter (the coordinate pair), a Number as its second parameter (the index of the current coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.

Takes into account the dimension (dimension 3 works for x,y,z and dimension 4 works for x,y,z,m)

mapRings(<Function> fn) Array Runs the given Function once per ring (including each ring in each hull, if applicable), and returns an Array containing the return values.

The given Function can expect four parameters:

  • start coordinate (0-indexed, inclusive)
  • end coordinate (0-indexed, exclusive)
  • length of the ring (how many coordinates in that ring, also end-start)
  • i, index of the current ring (0-indexed)

πŸ”—Properties

RawGeometry Options inherited from RawGeometry
Property Type Description
coords Array of Number A flat Array containing the CRS-relative coordinates or the geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new ring.
hulls Array of Number A flat Array containing indices (0-indexed) of the coordinate pairs that start a new hull.
loops Array of Boolean A read-only Array with one Boolean values per ring. The value is true for those rings which forms loops (the first coordinate pair equals the last one). A read-only containing the starts (inclusive) and ends (exclusive) of all rings.

Contains, at least, 0 and the amount of coordinate pairs (for geometries with just one ring)

πŸ”—ExpandBox

Minimalistic, simplistic, 2-dimensional, expanding bounding box implementation.

This class is needed only when there's a need to calculate a bbox that covers a given set of points. Bounding boxes that can be trivially calculated are best handled manually as 4-element arrays.

This implementation also assumes that the bounds are parallel to the CRS's axes, and is not suitable for boundign boxes whenever there's a yaw rotation involved.

πŸ”—Methods

Method Returns Description
reset() this Resets all properties to their Infinity/-Infinity default values.
clone() ExpandBox Returns a cloned copy of this box.
expandPair(<Array of Number> xy) this Expands the bounding box to cover the given coordinate pair. The coordinate pair is expected to have the form [x, y].
expandXY(<Number> x, <Number> y) this Expands the bounding box to cover the given coordinate pair.
expandGeometry(<RawGeometry> geom) this Expands the bounding box to cover all points of the given Geometry. Note that no reprojection is performed, and that an ExpandBox is CRS-agnostic.
expandPercentage(<Number> p) this Expand the bounding box by the given percentage on four sides.

e.g. a value of 0.1 will raise the top by 10%, lower the bottom by 10% (idem for left & right), increasing the height by 20% (idem for width).

expandPercentages(<Number> px, <Number> py) this Expand the bounding box by the given percentages, to the left and right by px, and to the top and bottom by py
intersectsBox(<ExpandBox> b) Boolean Returns true if the given ExpandBox has at least one point in common.
containsBox(<ExpandBox> b) Boolean Returns true if the given ExpandBox completely fits.

πŸ”—Properties

Property Type Description
minX Number
maxX Number
minY Number
maxY Number

πŸ”—TilePyramid

A TilePyramid defines the size and disposition of raster tiles.

The concept is equivalent to the "Tile Matrix Set" in the OGC WMTS specification, and also equivalent to OpenLayer's TileGrids.

Tile pyramids do not have a concept of "tile size" but rather per-level "scale". A level will be loaded when the map's (platina's) scale is equal or breater than the level's.

πŸ”—Usage example

const epsg3857zoom0 = new TilePyramid(
	epsg3857,
	{
		"0": {	// (string) identifier of the pyramid level
			scale: 156543,03390625	// scale, in CRS units per CSS pixel
			bbox: [-l, l, l, -l],	// x1,y1, x2,y2
			spanX: 1,	// horizontal tiles in the level
			spanY: 1,	// vertical tiles in the level
		}
	}
);

πŸ”—Constructor

Constructor
new TilePyramid(<BaseCRS> crs, <Object of Object> levels)

πŸ”—Methods

Method Returns Description
ceilLevel(<Number> scale) String Given a scale (in terms of CRS units per CSS pixel), returns the identifier of the pyramid level with the nearest known scale in the pyramid that is equal or higher than the given one.

Returns undefined if there's no known equal-or-higher scale.

floorLevel(<Number> scale) String Given a scale (in terms of CRS units per CSS pixel), returns the identifier of the pyramid level with the nearest known scale in the pyramid that is equal or higher than the given one.

Returns undefined if there's no known equal-or-lower scale.

nearestLevel(scale:Number) String Given a scale, returns the identifier of the level with the nearest scale known in the pyramid levels, "nearest" in terms of "minimum distance in terms of base-2 logarithm"
bboxToTileRange(<String> levelId, <Array of Number> bbox) Array of Number Given a bounding box of the form [x1,y1, x2,y2] and the string identifier for a level of the pyramid, returns a bounding box containing the integer min/max tile coordinates that overlap the given bbox.

The return values can be higher than the span. This is a safeguard against misbehaviour and negative coordinates when requesting tiles across the antimeridian. When looping through this values, modulo by the tile span.

The bbox is expected to be in the same CRS as the tile pyramid.

tileRangeToBbox(<String> levelId, <Array of Number> range) Array of Number Given the identifier of a pyramid level and a tile range of the form [minX, minY, maxX, maxY], returns the bounding box (in the pyramid's CRS) that encloses the tiles within the given range.
tileCoordsToBbox(<String> levelId, <Array of Number> coords) Array of Number Given the coordinates of a tile (the identifier of a level plus an array of the form [x,y]), returns a bounding box (of the form [x1,y1, x2,y2]) with the boinding box for that tile (in the pyramid's CRS).
childTiles(<String> levelId, <Number> x, <Number> y) Array of Array of Number For a tile of the given level and coordinates, returns an array of tile coordinates for the child tiles: tiles from a lower level (one with more detail) whose bounding box overlap that of the given tile. This will be an empty array if there are no child tiles.
parentTiles(<String> levelId, <Number> x, <Number> y) Array of Array of Number Akin to childTiles(), but for the parent tiles: tiles from a higher level (one with less detail). This will be an empty array if there are no parent tiles.

Level iterators

Method Returns Description
forEachLevel(<Function> fn) this Runs the given Function fn on each level of the pyramid.

The function will receive two parameters: the name of the level (as a String), and the level definition (as an Object with scale, bbox, spanX, spanY properties).

mapLevels(<Function> fn) Array Runs the given Function fn on each level of the pyramid, and returns an array containing all the return values from each call.

In other words, works akin to Array.prototype.map.

The function will receive two parameters: the name of the level (as a String), and the level definition (as an Object with scale, bbox, spanX, spanY properties).

getLevelsCount() Number Returns the number of levels in this pyramid.

Note that the names of the levels might not be numeric: this is just the lenght of an hypothetical array containing the levels.

getLevelDef(<String> name) Object Returns the definition of a pyramid level given its identifier/name (or undefined if there's no level with that identifier).

πŸ”—Properties

Property Type Description
crs BaseCRS Read-only getter to the pyramid's CRS.

πŸ”—Pyramid3857

Factory for tile pyramids fitting the EPSG:3857 CRS (epsg3857). Assumes pyramid level 0 spans the whole surface.

πŸ”—Usage example

import { create3857Pyramid } from 'gleo/src/geometry/Pyramid3857';

const myPyramid = create3857Pyramid(0, 18);
import { tileJsonToPyramid } from 'gleo/src/geometry/TileJsonPyramid.mjs';

const myPyramid = tileJsonToPyramid("url/to/tile.json");

πŸ”—Functions

Function Returns Description
create3857Pyramid(<Number> min, <Number> max, <Number = 256> tileSize) TilePyramid Creates a TilePyramid for the epsg3857 crs, with one pyramid level for each "zoom level" between the given minimum and maximum.

The pyramid constructor also takes the (square) size of each tile, in CSS pixels, in order to calculate the right zoom level to load on any given scale. Note that the pyramid takes in CSS pixels, but the RasterTileLoader takes source raster pixels instead.

tileJsonToPyramid(<Object> json, <Number = 256> tileSize) Promise to Object Converts a TileJSON document into a TilePyramid instance and a set of URL strings.

All tiles are supposed to be square and have the given pixel size.

tileJsonToPyramid(<String> url, <Number = 256> tileSize) Promise to TilePyramid fetches the URL expecting a JSON document, parses it as TileJSON and returns the corresponding TilePyramid and URL(s)
tileJsonToPyramid(<URL> url, <Number = 256> tileSize) Promise to TilePyramid Idem, but with an instance of URL instead of a String.

πŸ”—BaseCRS

Represents a Coordinate Reference System.

A CRS is identified by:

Members of bounding boxes, as well as the minimum/maximum span, can have values of Infinity or -Infinity (or Number.POSITIVE_INFINITY/Number.NEGATIVE_INFINITY).

The wrapping delta vector is meant to draw Acetates multiple times, offsetting by that value. Also used to wrap coordinates when their X (or Y) component is larger than half the X (or Y) component of the wrapping delta vector.

It's important to note that the the wrapping vector does not mean that coordinates wrap, but rather that the display of the coordinates wrap. Thus, a point at a position P and another point at P+wrap are different, but will be displayed at the same pixel. (Idem for P+2*wrap, P-wrap and in general, for P+n*wrap for all natural numbers n).

For geographical CRSs, it's highly recommended to use names that match a Proj definition. Other functionality, such as the ConformalWMS loader, depends on the CRS names.

πŸ”—Constructor

Constructor
new BaseCRS(<String> name, <BaseCRS Options> opts)

πŸ”—Options

Option Type Default Description
wrapPeriodX Number Infinity The horizontal length, in CRS units, of the display wrapping.
wrapPeriodY Number Infinity The vertical length, in CRS units, of the display wrapping.
distance Function A distance function, that should take two point Geometrys as arguments and return the distance between them (when given non-point Geometrys, it shall return the distance between the first coordinate pair of each Geometry). The units of distance depend on the CRS. They should be meters for geographical CRSs, and unitless for cartesian.
distance BaseCRS Whenever it's not trivial or convenient to calculate distances, calculations can be proxied to another CRS (which must have a distance function defined). This is useful for geographical CRSs where a CRS represents a geoid (e.g. the EPSG:4326 CRS represents the WGS84 geoid) and all CRSs for that geoid use one common distance calculation.
flipAxes Boolean false Used only for OGC services (WMS, WFS, etc). The default false works for CRSs with an X-Y axis order (or easting-northing, or longitude-latitude).

This should be set to true whenever the CRS definition specifies that the axes should be in Y-X order (or northing-easting, or latitude-longitude) (e.g. EPSG:4326 and EPSG:3035).

Gleo Geometrys always store data in X-Y (or easting-northing, or lng-lat) order, regardless of this setting.

ogcUri String "" Used only for OGC API services (OGC API Tiles, etc). This should be a URI string like "https://www.opengis.net/def/crs/EPSG/0/4326" that will be used to match metadata.
minSpan Number 0 The minimum span of a map/platina using the CRS, expressed in CRS units (meters/degrees/etc) across the diagonal of a platina.

This is an informative value that actuators use to prevent the user from zooming in too far.

maxSpan Number Infinity The maximum span of a map/platina using the CRS, expressed in CRS units (meters/degrees/etc) across the diagonal of a platina.

This is an informative value that actuators use to prevent the user from zooming out too far.

viewableBounds Array of Number [-Infinity, -Infinity, Infinity, Infinity] The practical viewable bounds of the CRS, as an array of the form [x1, y1, x2, y2].

This is an informative value that actuators use to prevent the user from moving away from areas where the CRS makes sense.

Values are absolute, not relative to the CRS's offset (important for instances of offsetCRS).

πŸ”—Methods

Method Returns Description
offsetToBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref) Array of Number Wraps the given coordinate if it's further away from the reference ref than half the wrap period. This guarantees that the return value is less than half a period away from the reference.
wrapString(<Array of Number> xys) Array of Number Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of the linestring is less than half a period away from the CRS' origin, and idem with each pair of consecutive points.

πŸ”—Functions

Function Returns Description
guessFromCode(<String> crs) Promise to BaseCRS Factory method. Expects a string like "EPSG:12345".

Fetches information from https://crs-explorer.proj.org/ and tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js as well, assuming enableProj() has been called.

The resulting CRS might lack information such as wrap periods or min/max spans.

πŸ”—OffsetCRS

Represents a Coordinate Reference System, with the same properties than a BaseCRS, but with the [0,0] center of coordinates being offset.

The rationale is the difference of precision between numbers. A Gleo coordinate is a floating point number, which typically will be represented by:

In order to keep the numerical precision, it's important to keep the numbers low (so the mantissa has a precision of less than one screen pixel).

The way to do so is to offset the coordinates. A system based on vector tiles does this implicitly (coordinates inside a typical vector tile range from 0 to 4096, and the CRS coordinate of each tile's corner is the implicit CRS offset).

Gleo does this explicitly, translating coordinates to a offsetCRS which has a center relatively near the screen center. In other words, when the user pans or zooms the map far enough from the CRS' origin, then Gleo shall establish a new origin near the updated user's viewport, and translate (AKA "offset") all Geometrys. This doesn't lose (significant) precision since numbers are originally stored in 64-bit floats (Numbers).

πŸ”—Constructor

Build a new offset CRS, given a point Geometry. The CRS name, wrap periods and other BaseCRS Options are taken from the Geometry's CRS, and the offset is the absolute value of the Geometry's coordinates.
Constructor
new OffsetCRS(<Geometry> offset)

πŸ”—Methods

Method Returns Description
offsetToBase(<Array of Number> xys) Array of Number Given a set of coordinates [x1, y1, x2, y2, ... xn, yn], returns those coordinates as if they were using the BaseCRS's (0,0) origin of coordinates.
offsetFromBase(<Array of Number> xy) Array of Number Given a set of coordinates [x1, y1, x2, y2, ... xn, yn] in the BaseCRS of this CRS, returns those coordinates as if they were using the origin of coordinates of this offset CRS.
Methods inherited from BaseCRS
Method Returns Description
wrap(<Array of Number> xy, <Array of Number> ref) Array of Number Wraps the given coordinate if it's further away from the reference ref than half the wrap period. This guarantees that the return value is less than half a period away from the reference.
wrapString(<Array of Number> xys) Array of Number Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of the linestring is less than half a period away from the CRS' origin, and idem with each pair of consecutive points.

πŸ”—Functions

Functions inherited from BaseCRS
Function Returns Description
guessFromCode(<String> crs) Promise to BaseCRS Factory method. Expects a string like "EPSG:12345".

Fetches information from https://crs-explorer.proj.org/ and tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js as well, assuming enableProj() has been called.

The resulting CRS might lack information such as wrap periods or min/max spans.

πŸ”—knownCRSs

Holds a list of BaseCRSs globally known to Gleo, keyed by their OGC URI.

πŸ”—Functions

Function Returns Description
getCRS(<String> ogcUri) BaseCRS Returns the known BaseCRS with the given OGC URI. Accepts the URI in CURIE form (e.g. [EPSG:4326]) as well. Throws an error if not found.
getCRS(<String> name) BaseCRS Returns the known BaseCRS with the given internal name (e.g. "EPSG:4326", "cartesian"). Throws an error if not found.
registerCRS(<BaseCRS> crs, <undefined> overrideUri) undefined Registers the given CRS. Meant for internal use only. Trying to register a CRS twice (or two CRSs with the same OGC URI) will throw an error.
registerCRS(<BaseCRS> crs, <String> overrideUri) undefined Registers the given CRS, but with an alternate OGC URI. Meant for internal use only, for pointing both EPSG:4326 and OGC:WGS84 to the same object.

πŸ”—projector

The projector is the piece of code in charge of transforming ("reprojecting") coordinates (from either Coord or CoordNest) into a different BaseCRS.

By default, Gleo only supports projecting from/to EPSG:4326 and EPSG:3857. The intended way to support any other projections is to inject the proj4/proj4js dependency via enableProj().

projector works as a Singleton pattern, and cannot be instanced.

πŸ”—Usage example

import proj4 from 'proj';
import {enableProj, project} from 'gleo/src/crs/projector.mjs';

enableProj(Proj4js);

proj4.defs("EPSG:3995","+proj=stere +lat_0=90 +lat_ts=71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");

const epsg3995 = new BaseCRS("EPSG:3995", Infinity, Infinity);

map.crs = epsg3995;

πŸ”—Functions

Function Returns Description
project(<String> sCRS, <String> dCRS, <Array of Number> xy) Array of Number Projects the given Array of two Numbers from the source CRS sCRS into the destination dCRS, returning a new Array of two Numbers.
enableProj(<Module> proj) undefined Expects a reference to the proj4 (AKA proj4js) module. All further reprojections (including those from Coord.toCRS()) shall be done via the specified module.
enableProj(<undefined> undefined) undefined Disables usage of proj4/proj4js, and re-enables Gleo's built-in reprojection code.

πŸ”—epsg4326

A EPSG:4326 CRS - aka "latitude-longitude".

Note that epsg4326 works as a Singleton pattern - it's already an instance, so do not call new epsg4326().

πŸ”—Usage example

import epsg4326 from 'gleo/src/crs/epsg4326.mjs';
import Geometry from 'gleo/src/geometry/Geometry.mjs';

let myPoint = new Geometry(epsg4326, [5, 9]);

πŸ”—Constructor

πŸ”—Methods

Methods inherited from BaseCRS
Method Returns Description
offsetToBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref) Array of Number Wraps the given coordinate if it's further away from the reference ref than half the wrap period. This guarantees that the return value is less than half a period away from the reference.
wrapString(<Array of Number> xys) Array of Number Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of the linestring is less than half a period away from the CRS' origin, and idem with each pair of consecutive points.

πŸ”—Functions

Functions inherited from BaseCRS
Function Returns Description
guessFromCode(<String> crs) Promise to BaseCRS Factory method. Expects a string like "EPSG:12345".

Fetches information from https://crs-explorer.proj.org/ and tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js as well, assuming enableProj() has been called.

The resulting CRS might lack information such as wrap periods or min/max spans.

πŸ”—epsg3857

A EPSG:3857 CRS - aka "spherical web mercator".

Note that epsg3857 works as a Singleton pattern - it's already an instance, so do not call new epsg3857().

πŸ”—Usage example

import epsg3857 from 'gleo/src/crs/epsg3857.mjs';
import Geometry from 'gleo/src/geometry/Geometry.mjs';

let myPoint = new Geometry(epsg3857, [5, 9]);

πŸ”—Constructor

πŸ”—Methods

Methods inherited from BaseCRS
Method Returns Description
offsetToBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref) Array of Number Wraps the given coordinate if it's further away from the reference ref than half the wrap period. This guarantees that the return value is less than half a period away from the reference.
wrapString(<Array of Number> xys) Array of Number Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of the linestring is less than half a period away from the CRS' origin, and idem with each pair of consecutive points.

πŸ”—Functions

Functions inherited from BaseCRS
Function Returns Description
guessFromCode(<String> crs) Promise to BaseCRS Factory method. Expects a string like "EPSG:12345".

Fetches information from https://crs-explorer.proj.org/ and tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js as well, assuming enableProj() has been called.

The resulting CRS might lack information such as wrap periods or min/max spans.

πŸ”—cartesian

A cartesian CRS - with infinite bounds, no wrapping, X going right, and Y going up.

Note that cartesian works as a Singleton pattern - it's already an instance, so do not call new cartesian().

πŸ”—Usage example

import cartesian from 'gleo/src/crs/cartesian.mjs';
import Geometry from 'gleo/src/crs/coord.mjs';

let myPoint = new Geometry(cartesian, [5, 9]);

πŸ”—Constructor

πŸ”—Methods

Methods inherited from BaseCRS
Method Returns Description
offsetToBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy) Array of Number Identity function (all coordinates represented in a Base CRS are already relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref) Array of Number Wraps the given coordinate if it's further away from the reference ref than half the wrap period. This guarantees that the return value is less than half a period away from the reference.
wrapString(<Array of Number> xys) Array of Number Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of the linestring is less than half a period away from the CRS' origin, and idem with each pair of consecutive points.

πŸ”—Functions

Functions inherited from BaseCRS
Function Returns Description
guessFromCode(<String> crs) Promise to BaseCRS Factory method. Expects a string like "EPSG:12345".

Fetches information from https://crs-explorer.proj.org/ and tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js as well, assuming enableProj() has been called.

The resulting CRS might lack information such as wrap periods or min/max spans.

πŸ”—Actuator

Actuator, n: a mechanical device for moving or controlling something

In Gleo, an Actuator is an attachment to a GleoMap that handles DOM events to change the view in some ways.

πŸ”—Usage example

Any actuators defined will be registered into the map and enabled by default. In order to manage them, use the actuators property of the map.

import GleoMap from "gleo/src/Map.mjs";
import "gleo/src/actuators/DragActuator.mjs";
import "gleo/src/actuators/WheelActuator.mjs";

const gleomap = new GleoMap();

gleomap.actuators.get('drag').disable();
gleomap.actuators.get('wheel').wheelPxPerLog2 = 55;

πŸ”—Constructor

Constructor
new Actuator(<GleoMap> map)

πŸ”—Methods

Subclass interface

Subclasses of Actuator shall provide the following:
Method Returns Description
enable() this Enable this actuator. Should add DOM event listeners.
disable() this Disable this actuator. Should remove DOM event listeners.

πŸ”—InertiaActuator

The "Inertia Actuator" intercepts calls to the GleoMap's setView method, and turns them into timed, eased, animations.

πŸ”—Constructor

Constructor
new InertiaActuator(<GleoMap> map)

πŸ”—Methods

Method Returns Description
enable() this Enables this actuator. This will overload the map's setView in order to intercept all of its calls.
disable() this Disables this actuator. All calls to setView will not trigger an easing animation.
inertialSetView(<Setview Options> opts?) this Starts an easing animation to (re-)set the map's center and scale to the given one. This implementation overrides the GleoMap's default setView implementation.

πŸ”—DragActuator

Pointer drag actuator. This includes mouse drag, one-touch drag and box zoom.

Dragging a pointer through the map canvas shall drag the map around.

πŸ”—Constructor

Constructor
new DragActuator(<GleoMap> map)

πŸ”—PinchActuator

Pointer pinch actuator, for two-finger zoom and rotation.

πŸ”—Constructor

Constructor
new PinchActuator(<GleoMap> map)

πŸ”—Methods

Method Returns Description
enable() this Enables this actuator. This will capture pointerdown, pointerup and pointermove (between pointerdown and pointerup) DOM events.
disable() this Disables this actuator. Stops capturing pointerdown, pointermove, pointerup DOM events.

πŸ”—WheelActuator

Mouse wheel actuator. Scrolling the mouse wheel shall zoom the map in/out.

TODO: Fix interaction with SpanClampActuator

πŸ”—Constructor

Constructor
new WheelActuator(<GleoMap> map)

πŸ”—ZoomYawSnapActuator

Zoom & yaw snap actuator.

Zoom snap works whenever there's raster stuff in the map (TileLoaders, ConformalRasters, etc) in the map: it will snap the scale so that it matches that of the raster (when the scales are close enough)

Yaw snap acts whenever the yaw rotation angle is too close to the target angle. Its main purpose is to lock the

πŸ”—Constructor

Constructor
new ZoomYawSnapActuator(<GleoMap> map)

πŸ”—Methods

Scale and pixel fidelity methods

Method Returns Description
snapScale(<Number> scale) Number Runs the scale snap logic on the given value: returns the nearest scale snap point, if the given scale is within the zoomSnapFactor tolerance.

πŸ”—BoundsClampActuator

Bounds clamping actuator. Forces the values of the center so that the it's always within a bounding box - either ehe CRS's viewableBounds or a set of user-defined maxBounds.

πŸ”—Constructor

Constructor
new BoundsClampActuator(<GleoMap> map)

πŸ”—SpanClampActuator

Span clamping actuator. Forces the values of the scale so that the span is within the CRS's minSpan/maxSpan limits.

Akin to an enforcer of minZoom/maxZoom (albeit Gleo doesn't have the concept of min/max zoom).

πŸ”—Constructor

Constructor
new SpanClampActuator(<GleoMap> map)

πŸ”—Control

Abstract UI control.

πŸ”—Constructor

Constructor
new Control(<Control options> opts)

πŸ”—Options

Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.

Internal methods

Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface

Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—Button

A single UI button.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
string String The (text) label to be shown inside the button.
svgString String The icon for the button, as a string containing a SVG document. Mutually exclusive with string.
title String The text for the title HTML attribute of the button.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Button event handlers

Method Returns Description
on(<String> eventName, <Function> handler) this Alias to addEventListener.
off(<String> eventName, <Function> handler) this Alias to removeEventListener.
addEventListener(<String> eventName, <Function> handler) this Attaches an event handler to a DOM event of the HTMLButtonElement for the control. Detaches an event handler to a DOM event from the HTMLButtonElement for the control.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ButtonToggle

A Button which can be toggled active/inactive (or "pressed"/"depressed").

πŸ”—Usage example

let myButton = new ButtonToggle( ...stuff... )
myButton.on('click', ()=>myButton.toggle());

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
ribbons Object of Function A plain Object containing label Strings as the keys and Functions as values.

When the button is toggled, these will show up by the side of the button. Clicking on a label will trigger the corresponding function.

Options inherited from Button
Option Type Default Description
string String The (text) label to be shown inside the button.
svgString String The icon for the button, as a string containing a SVG document. Mutually exclusive with string.
title String The text for the title HTML attribute of the button.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Method Returns Description
toggle() Boolean / Toggles the pressed/depressed state of the button. / Returns true when the new state is pressed, `false otherwise.
setActive(<Boolean> active) this / Set the pressed state (when passed true) or depressed (when false).
Button event handlers inherited from Button
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to addEventListener.
off(<String> eventName, <Function> handler) this Alias to removeEventListener.
addEventListener(<String> eventName, <Function> handler) this Attaches an event handler to a DOM event of the HTMLButtonElement for the control. Detaches an event handler to a DOM event from the HTMLButtonElement for the control.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

Property Type Description
ribbons / Runtime value of the ribbons instantiation option. Can be overwritten.
GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ButtonGroup

A control for nesting Button controls inside.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
direction String 'vertical' Whether the nested buttons align horizontally or vertically. Valid values are "horizontal" and "vertical".
buttons Array of Button [] The initial set of Button controls to be in this group.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ZoomButton

Common "Zoom In"/"Zoom Out" button functionality.

πŸ”—Constructor

πŸ”—Options

Options inherited from Button
Option Type Default Description
string String The (text) label to be shown inside the button.
svgString String The icon for the button, as a string containing a SVG document. Mutually exclusive with string.
title String The text for the title HTML attribute of the button.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Button event handlers inherited from Button
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to addEventListener.
off(<String> eventName, <Function> handler) this Alias to removeEventListener.
addEventListener(<String> eventName, <Function> handler) this Attaches an event handler to a DOM event of the HTMLButtonElement for the control. Detaches an event handler to a DOM event from the HTMLButtonElement for the control.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ZoomIn

A "Zoom In" button.

πŸ”—Constructor

πŸ”—Options

Options inherited from Button
Option Type Default Description
string String The (text) label to be shown inside the button.
svgString String The icon for the button, as a string containing a SVG document. Mutually exclusive with string.
title String The text for the title HTML attribute of the button.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Button event handlers inherited from Button
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to addEventListener.
off(<String> eventName, <Function> handler) this Alias to removeEventListener.
addEventListener(<String> eventName, <Function> handler) this Attaches an event handler to a DOM event of the HTMLButtonElement for the control. Detaches an event handler to a DOM event from the HTMLButtonElement for the control.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ZoomOut

A "Zoom Out" button.

πŸ”—Constructor

πŸ”—Options

Options inherited from Button
Option Type Default Description
string String The (text) label to be shown inside the button.
svgString String The icon for the button, as a string containing a SVG document. Mutually exclusive with string.
title String The text for the title HTML attribute of the button.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Button event handlers inherited from Button
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to addEventListener.
off(<String> eventName, <Function> handler) this Alias to removeEventListener.
addEventListener(<String> eventName, <Function> handler) this Attaches an event handler to a DOM event of the HTMLButtonElement for the control. Detaches an event handler to a DOM event from the HTMLButtonElement for the control.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ZoomInOut

A group of two Buttons: one for zooming in, one for zooming out.

πŸ”—Constructor

πŸ”—Options

Options inherited from ButtonGroup
Option Type Default Description
direction String 'vertical' Whether the nested buttons align horizontally or vertically. Valid values are "horizontal" and "vertical".
buttons Array of Button [] The initial set of Button controls to be in this group.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—ScaleBar

An informative scale bar control.

πŸ”—Constructor

Constructor
new ScaleBar(<Scalebar Options> opts)

πŸ”—Options

Scalebar Options

Option Type Default Description
maxSize Number 100 Maximum size, in CSS pixels, of the scalebar line.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—EditBar

Offers editing tools - creating new points, lines or polygons (properly symbolized), as well as editing any of those.

πŸ”—Constructor

πŸ”—Options

Option Type Default Description
createPoint Boolean true / Whether to show a "Create point" button.
createLine Boolean true / Whether to show a "Create line" button.
createPolygon Boolean true / Whether to show a "Create polygon" button.
pointSymbolizer Function * / Defines how newly created points are symbolized. This must be a / function that takes in a Geometry and must return an Array of / GleoSymbols. / Idem, but for newly created lines. / Idem, but for newly created polygons.
nodeSymbolizer Function * / Idem, but for drag nodes, i.e. vertices of lines/polygons being edited. / This must be a fucntion that takes two parameters. The second one / is a boolean interactive flag (it must return interactive symbols / only when this flag is true)
Options inherited from ButtonGroup
Option Type Default Description
direction String 'vertical' Whether the nested buttons align horizontally or vertically. Valid values are "horizontal" and "vertical".
buttons Array of Button [] The initial set of Button controls to be in this group.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Events

Event Data Description
createpoint Fired whenever a new point is created.
createline Fired whenever a new line is created.
createpolygon Fired whenever a new polygon is created.

πŸ”—Methods

Method Returns Description
cancel() this Aborts the current editing action. Geometries being drawn will be destroyed.
Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—Attribution

An informative attribution control. It shall display HTML text (with links) based on the attribution option of GleoSymbols added to the map.

πŸ”—Constructor

Constructor
new Attribution(<Attribution Options> opts)

πŸ”—Options

Attribution Options

Option Type Default Description
separator String ' | ' A string to separate different attributions
prefix String 'Gleo' A prefixed attribution that shall always be present irrespective of symbols in the map.
Options inherited from Control
Option Type Default Description
position String One of tl, tr, bl, br. Indicates which corner of the map the control should be added to.
position HTMLElement Indicates that the Control should be added to the given HTML element. This allows for controls outside of the map interface itself.

πŸ”—Methods

Methods inherited from Control
Method Returns Description
addTo(<GleoMap> map) this Attaches the Control to the map, and appends the control's HTML element to the appropriate container.
remove() this Detaches the control from the map, and removes the HTML element from the DOM.
Internal methods inherited from Control
Method Returns Description
spawnElement() HTMLElement Sets this.element to the appropriate value. Should be overriden by subclasses.
Event Methods inherited from Evented
Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—Properties

GleoMap interface inherited from Control
Property Type Description
element HTMLElement The HTMLElement for the whole control. Should be treated as read-only.

πŸ”—Evented

Lightweight utility wrapper around EventTarget.

πŸ”—Methods

Event Methods

Method Returns Description
on(<String> eventName, <Function> handler) this Alias to EventTarget's addEventListener.
off(<String> eventName, <Function> handler) this Alias to EventTarget's removeEventListener.
once(<String> eventName, <Function> handler?) Promise As on(), but the handler function will only be called once (it'll be detached after the first fired event). Returns a Promise that resolves to the event when that event is fired.
fire(<String> eventName, <Object> detail) Boolean Wrapper over EventTarget's dispatchEvent. Creates a new instance of CustomEvent, dispatches it, and returns true if some event handler did preventDefault the event.
Event Methods inherited from EventTarget
Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—EventTarget

This class is not defined by Gleo, but rather by the web browser itself. Gleo just leverages it for event handling.

See DOM EventTarget at MDN for the full documentation.

πŸ”—Methods

Event Methods

Method Returns Description
addEventListener(eventName, <Function> handler) undefined As per addEventListener.
removeEventListener(eventName, <Function> handler) undefined As per removeEventListener.
dispatchEvent(<Event> ev) Boolean As per dispatchEvent.

πŸ”—GleoEvent

Class mix-in for functionality common to GleoPointerEvent and GleoMouseEvent.

πŸ”—Properties

Property Type Description
value Number For scalar field acetates (e.g. AcetateHeatMap) marked as "queryable", this contains the value for the scalar field for the pixel where the event took place.
geometry Geometry A point Geometry, containing the coordinates in map's CRS where the event took place. This is akin to Leaflet's latlng event property.
canvasX Number Akin to clientX, but relative to the map's <canvas> element.
canvasY Number Akin to clientY, but relative to the map's <canvas> element.
colour Array of Number For Acetates set as "queryable" (and GleoSymbols being drawn in such acetates), this contains the colour of the pixel the event took place over, as a 4-element array of the form [r, g, b, a], with values between 0 and 255.
colour undefined For Acetates not set as "queryable" (and GleoSymbols being drawn in such acetates), and for event that happened outside of the map (e.g. pointerout events), this value will always be undefined)

πŸ”—GleoMouseEvent

Akin to GleoPointerEvent, but only used for click events (since click events are instances of MouseEvent, not PointerEvent).

Note that Gleo does not handle any other MouseEvents. Trying to do something like map.on('mousedown', fn) will do nothing.

πŸ”—Usage example

map.on('click', function(ev) {
	console.log(ev.geom);
});

πŸ”—Methods

Methods inherited from MouseEvent
Method Returns Description
getModifierState() Returns the current state of the specified modifier key. See KeyboardEvent.getModifierState() for details.
Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Properties inherited from MouseEvent
Property Type Description
altKey Boolean Returns true if the <kbd>alt</kbd> key was down when the mouse event was fired.
button Number The button number that was pressed (if applicable) when the mouse event was fired.
buttons Number The buttons being pressed (if any) when the mouse event was fired.
clientX Number The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Number The Y coordinate of the mouse pointer in local (DOM content) coordinates.
ctrlKey Boolean Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
metaKey Boolean Returns true if the <kbd>meta</kbd> key was down when the mouse event was fired.
movementX Number The X coordinate of the mouse pointer relative to the position of the last mousemove event.
movementY Number The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
offsetX Number The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
offsetY Number The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
pageX Number The X coordinate of the mouse pointer relative to the whole document.
pageY Number The Y coordinate of the mouse pointer relative to the whole document.
relatedTarget * The secondary target for the event, if there is one.
screenX Number The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Number The Y coordinate of the mouse pointer in global (screen) coordinates.
shiftKey Boolean Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
x Number Alias for clientX.
y Number Alias for clientY.
Properties inherited from UIEvent
Property Type Description
detail * Returns a long with details about the event, depending on the event type.
view WindowProxy Returns a WindowProxy that contains the view that generated the event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.
Properties inherited from GleoEvent
Property Type Description
value Number For scalar field acetates (e.g. AcetateHeatMap) marked as "queryable", this contains the value for the scalar field for the pixel where the event took place.
geometry Geometry A point Geometry, containing the coordinates in map's CRS where the event took place. This is akin to Leaflet's latlng event property.
canvasX Number Akin to clientX, but relative to the map's <canvas> element.
canvasY Number Akin to clientY, but relative to the map's <canvas> element.
colour Array of Number For Acetates set as "queryable" (and GleoSymbols being drawn in such acetates), this contains the colour of the pixel the event took place over, as a 4-element array of the form [r, g, b, a], with values between 0 and 255.
colour undefined For Acetates not set as "queryable" (and GleoSymbols being drawn in such acetates), and for event that happened outside of the map (e.g. pointerout events), this value will always be undefined)

πŸ”—GleoPointerEvent

Gleo maps handle pointer events - such as pointerdown. All pointer events fired by a map instance are not instances of PointerEvent, but of GleoPointerEvent.

This means that a map's pointer events have extra properties - most notably a geometry with the CRS coordinates where the pointer event happened.

For the click event, see GleoMouseEvent.

πŸ”—Usage example

map.on('pointerdown', function(ev) {
	console.log(ev.geom);
});

πŸ”—Methods

Methods inherited from PointerEvent
Method Returns Description
getCoalescedEvents() Returns a sequence of all PointerEvent instances that were coalesced into the dispatched pointermove event.
getPredictedEvents() Returns a sequence of PointerEvent instances that the browser predicts will follow the dispatched pointermove event's coalesced events.
Methods inherited from MouseEvent
Method Returns Description
getModifierState() Returns the current state of the specified modifier key. See KeyboardEvent.getModifierState() for details.
Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Properties inherited from PointerEvent
Property Type Description
pointerId Number A unique identifier for the pointer causing the event.
width Number The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
height Number The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
pressure Number The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
tangentialPressure Number The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
tiltX Number The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.
tiltY Number The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.
twist Number The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
pointerType String Indicates the device type that caused the event (mouse, pen, touch, etc.).
isPrimary Boolean Indicates if the pointer represents the primary pointer of this pointer type.
Properties inherited from MouseEvent
Property Type Description
altKey Boolean Returns true if the <kbd>alt</kbd> key was down when the mouse event was fired.
button Number The button number that was pressed (if applicable) when the mouse event was fired.
buttons Number The buttons being pressed (if any) when the mouse event was fired.
clientX Number The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Number The Y coordinate of the mouse pointer in local (DOM content) coordinates.
ctrlKey Boolean Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
metaKey Boolean Returns true if the <kbd>meta</kbd> key was down when the mouse event was fired.
movementX Number The X coordinate of the mouse pointer relative to the position of the last mousemove event.
movementY Number The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
offsetX Number The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
offsetY Number The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
pageX Number The X coordinate of the mouse pointer relative to the whole document.
pageY Number The Y coordinate of the mouse pointer relative to the whole document.
relatedTarget * The secondary target for the event, if there is one.
screenX Number The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Number The Y coordinate of the mouse pointer in global (screen) coordinates.
shiftKey Boolean Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
x Number Alias for clientX.
y Number Alias for clientY.
Properties inherited from UIEvent
Property Type Description
detail * Returns a long with details about the event, depending on the event type.
view WindowProxy Returns a WindowProxy that contains the view that generated the event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.
Properties inherited from GleoEvent
Property Type Description
value Number For scalar field acetates (e.g. AcetateHeatMap) marked as "queryable", this contains the value for the scalar field for the pixel where the event took place.
geometry Geometry A point Geometry, containing the coordinates in map's CRS where the event took place. This is akin to Leaflet's latlng event property.
canvasX Number Akin to clientX, but relative to the map's <canvas> element.
canvasY Number Akin to clientY, but relative to the map's <canvas> element.
colour Array of Number For Acetates set as "queryable" (and GleoSymbols being drawn in such acetates), this contains the colour of the pixel the event took place over, as a 4-element array of the form [r, g, b, a], with values between 0 and 255.
colour undefined For Acetates not set as "queryable" (and GleoSymbols being drawn in such acetates), and for event that happened outside of the map (e.g. pointerout events), this value will always be undefined)

πŸ”—TileEvent

A TileLoader's events are of this type, and include information about the tile in question.

πŸ”—Usage example

loader.on('tileload', function(ev) {
	console.log(ev.tileLevel);
});

πŸ”—Methods

Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Property Type Description
tileLevel String The level of the tile pyramid the tile is in.
tileX Number The X coordinate of the tile, relative to its level.
tileY Number The Y coordinate of the tile, relative to its level.
tile HTMLImageElement The image for the tile.
error String The cause of a tileerror event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.

πŸ”—Event

This class is not defined by Gleo, but rather by the web browser itself. Gleo just leverages it for event handling.

See DOM Event at MDN for the full documentation.

πŸ”—Methods

Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.

πŸ”—UIEvent

This class is not defined by Gleo, but rather by the web browser itself. Gleo just leverages it for event handling.

See DOM UIEvent at MDN for the full documentation.

πŸ”—Methods

Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Property Type Description
detail * Returns a long with details about the event, depending on the event type.
view WindowProxy Returns a WindowProxy that contains the view that generated the event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.

πŸ”—MouseEvent

This class is not defined by Gleo, but rather by the web browser itself. Gleo just leverages it for event handling.

See DOM MouseEvent at MDN for the full documentation.

πŸ”—Methods

Method Returns Description
getModifierState() Returns the current state of the specified modifier key. See KeyboardEvent.getModifierState() for details.
Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Property Type Description
altKey Boolean Returns true if the <kbd>alt</kbd> key was down when the mouse event was fired.
button Number The button number that was pressed (if applicable) when the mouse event was fired.
buttons Number The buttons being pressed (if any) when the mouse event was fired.
clientX Number The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Number The Y coordinate of the mouse pointer in local (DOM content) coordinates.
ctrlKey Boolean Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
metaKey Boolean Returns true if the <kbd>meta</kbd> key was down when the mouse event was fired.
movementX Number The X coordinate of the mouse pointer relative to the position of the last mousemove event.
movementY Number The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
offsetX Number The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
offsetY Number The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
pageX Number The X coordinate of the mouse pointer relative to the whole document.
pageY Number The Y coordinate of the mouse pointer relative to the whole document.
relatedTarget * The secondary target for the event, if there is one.
screenX Number The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Number The Y coordinate of the mouse pointer in global (screen) coordinates.
shiftKey Boolean Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
x Number Alias for clientX.
y Number Alias for clientY.
Properties inherited from UIEvent
Property Type Description
detail * Returns a long with details about the event, depending on the event type.
view WindowProxy Returns a WindowProxy that contains the view that generated the event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.

πŸ”—PointerEvent

This class is not defined by Gleo, but rather by the web browser itself. Gleo just leverages it for event handling.

See DOM PointerEvent at MDN for the full documentation.

πŸ”—Methods

Method Returns Description
getCoalescedEvents() Returns a sequence of all PointerEvent instances that were coalesced into the dispatched pointermove event.
getPredictedEvents() Returns a sequence of PointerEvent instances that the browser predicts will follow the dispatched pointermove event's coalesced events.
Methods inherited from MouseEvent
Method Returns Description
getModifierState() Returns the current state of the specified modifier key. See KeyboardEvent.getModifierState() for details.
Methods inherited from Event
Method Returns Description
composedPath() Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault() Cancels the event (if it is cancelable).
stopImmediatePropagation() For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation() Stops the propagation of events further along in the DOM.

πŸ”—Properties

Property Type Description
pointerId Number A unique identifier for the pointer causing the event.
width Number The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
height Number The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
pressure Number The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
tangentialPressure Number The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
tiltX Number The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.
tiltY Number The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.
twist Number The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
pointerType String Indicates the device type that caused the event (mouse, pen, touch, etc.).
isPrimary Boolean Indicates if the pointer represents the primary pointer of this pointer type.
Properties inherited from MouseEvent
Property Type Description
altKey Boolean Returns true if the <kbd>alt</kbd> key was down when the mouse event was fired.
button Number The button number that was pressed (if applicable) when the mouse event was fired.
buttons Number The buttons being pressed (if any) when the mouse event was fired.
clientX Number The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Number The Y coordinate of the mouse pointer in local (DOM content) coordinates.
ctrlKey Boolean Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
metaKey Boolean Returns true if the <kbd>meta</kbd> key was down when the mouse event was fired.
movementX Number The X coordinate of the mouse pointer relative to the position of the last mousemove event.
movementY Number The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
offsetX Number The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
offsetY Number The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
pageX Number The X coordinate of the mouse pointer relative to the whole document.
pageY Number The Y coordinate of the mouse pointer relative to the whole document.
relatedTarget * The secondary target for the event, if there is one.
screenX Number The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Number The Y coordinate of the mouse pointer in global (screen) coordinates.
shiftKey Boolean Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
x Number Alias for clientX.
y Number Alias for clientY.
Properties inherited from UIEvent
Property Type Description
detail * Returns a long with details about the event, depending on the event type.
view WindowProxy Returns a WindowProxy that contains the view that generated the event.
Properties inherited from Event
Property Type Description
bubbles Boolean A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable Boolean A boolean value indicating whether the event is cancelable.
composed Boolean A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget Boolean A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented Boolean Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase Number Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted Boolean Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target Object A reference to the object to which the event was originally dispatched.
timeStamp Number The time at which the event was created (in milliseconds). By specification, this value is time since epochβ€”but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type String The case-insensitive name identifying the type of the event.

πŸ”—Colour

A Colour is a shorthand for representing a colour in the sRGB colour space (including opacity or alpha)

Whenever a Colour is needed, any of the following is accepted::

Gleo uses british english, not U.S. english. It's colour and not color.

Internally, parsing of the colour leverages the css-color-parser-js library.

πŸ”—Usage example

const bluedot  = new Dot(p1, { colour: [0, 0, 255, 255] });
const reddot   = new Dot(p2, { colour: "red" });
const greendot = new Dot(p3, { colour: "hsla(100, 50%, 50%, 100%)" });

πŸ”—InertialEasing

πŸ”—dom

πŸ”—Functions

Function Returns Description
getMousePosition(<MouseEvent> ev, <HTMLElement> element?) Array of Number Gets normalized mouse position from a DOM mouse/pointer event relative to the element (border excluded) or to the whole page if not specified.
getScale(<HTMLElement> el) Object Computes the CSS scale currently applied on the element. Returns an object with x and y members as horizontal and vertical scales respectively, and boundingClientRect as the result of getBoundingClientRect().

πŸ”—Util

Collection of small-ish utilities that fit nowhere else.

πŸ”—Functions

Function Returns Description
abortableImagePromise(<String> url, <AbortController> controller?) Promise Returns a Promise to an HTMLImageElement, given a URL for the image.

If an AbortController is given, the Promise will reject whenever its signal is activated.

abortableImagePromise(<URL> url, <AbortController> controller?) Promise As before, but can take an instance of URL instead of a String.
getBlendEquationConstant(<GliiFactory> glii, <String> mode) Number Given a Glii context and a blend equation string ("ADD", "SUBTRACT", "MIN", "MAX"), returns the appropriate numeric GL constant.
glslFloatify(<Number> n) String Turns a Number into a String which is a valid GLSL representation for that number.
glslVecNify(<Array of Number> a) String Turns an Array of two/three/four Numbers into a String which is a valid vec2/vec3/vec4 GLSL representation for that array.
imagePromise(<URL> url, <Boolean> fillCache?) Promise of HTMLImageElement Requests the given URL, and returns a Promise of an HTMLImageElement.

By default it caches all images, and uses a hash Map internally to de-duplicate loading the same URL. Use a false value for fillCache to prevent this.

imagePromise(<String> url, <Boolean> fillCache?) Promise of HTMLImageElement Idem, but using a String containing a URL.
imagePromise(<HTMLImageElement> image, <Boolean> fillCache?) Promise of HTMLImageElement Returns a Promise that immediately resolves to the given image. Does not cache the image.
loadProtobufferRawGeometry(<BaseCRS> crs, <VectorTileFeature> feat, <Array of Number> bbox, extent) RawGeometry Alternative way of fetching geometries from protobuffer vectot tile features (from https://github.com/mapbox/vector-tile-js ). The only foreseen usage of this function is as part of ProtobufVectorTileLoader.

The aim is similar to the loadGeometry() method of a vector-tile-js's VectorTileFeature, with a few following differences:

  • Skips array nesting
  • Returns a Gleo RawGeometry instead of an array of arrays of coordinates
  • Normalizes in-tile coordinates to absolute CRS coordinates, given the bbox and extent of the tile.
template(<String> str, <Object> data) String Simple templating facility, accepts a template string of the form 'Hello {a}, {b}' and a data object like {a: 'foo', b: 'bar'}, returns evaluated string ('Hello foo, bar'). You can also specify functions instead of strings for data values β€” they will be evaluated passing data as an argument.

πŸ”—ShelfPack

πŸ”—Usage example

var sprite = new ShelfPack(64, 64, { autoResize: false }); var bins = [ { id: 1, w: 12, h: 12 }, { id: 2, w: 12, h: 16 }, { id: 3, w: 12, h: 24 } ]; var results = sprite.pack(bins, { inPlace: false }); var results = sprite.packOne(12, 16, 'a'); var bin = sprite.allocFreebin(0, 12, 16, 'a'); var results = sprite.allocShelf(0, 12, 16, 'a'); var b = sprite.getBin('a'); var bin = sprite.getBin('a'); sprite.ref(bin); var bin = sprite.getBin('a'); sprite.unref(bin); sprite.clear(); sprite.resize(256, 256);

πŸ”—Shelf

πŸ”—Usage example

var shelf = new Shelf(64, 512, 24); shelf.alloc(12, 16, 'a'); shelf.resize(512);

πŸ”—Bin

πŸ”—Usage example

var bin = new Bin('a', 0, 0, 12, 16);

πŸ”—AbstractRaster

Intended for internal use only.

Abstract wrapper over image/raster files/datasets. Implements a common wrapper over HTMLImageElement (native to the browser), GeoTIFFs (not native to the browser).

This class worries only about the raster data and how to fit it into a Glii Texture. It does not worry abour the geographical component.

πŸ”—Methods

Method Returns Description
asTexture(<GliiFactory> glii) Texture / Dumps the raster object into a new glii texture

πŸ”—Functions

Function Returns Description
canWrap(<Object> obj) Boolean / Must return trueif the object can be wrapped into this class
fromUrl(<String> url) / Must return (a Promise to) an instance of this class. The promise might fail / if the URL is not a raster of this type.

πŸ”—Properties

Property Type Description
width / The width of the raster, in pixels. Read-only.
height Returns the height of the raster, in pixels.
bandCount Returns the number of channels/bands
bitDepth Returns the number of bits per channel/band

πŸ”—GeoTIFF

An AbstractRaster that fits GeoTIFFs.

When building from a GeoTIFF URL, this reads the first image of a GeoTIFF file.

πŸ”—HTMLImages

An AbstractRaster format that fits images natively understood by the browser, including PNG, JPG, WebP, etc.

πŸ”—trailify

Applies only to line symbols (either Hair or Stroke). The symbol gains a m-value option, like in trajectorify. The acetate can then set a lower and upper threshold for that m-value.

The symbol will be drawn only when the (interpolated) m-value of a pixel falls within the two thresholds of the acetate. The opacity of each pixel depends on how close the m-value is to the upper threshold.

πŸ”—Properties

Property Type Description
minMValue The lower threshold for the m-values of symbols. Can be updated.
maxMValue The higher threshold for the m-values of symbols. Can be updated.

πŸ”—

A "trailified" symbol accepts this additional constructor options:

πŸ”—Trailified GleoSymbol

Option Type Default Description
mcoords Array of Number [] The values for the M-coordinates of the geometry. This must have one M-coordinate per point in the symbol's geometry.