Gleo API documentation

๐Ÿ”—Introduction

Welcome to Gleo!

Gleo is a javascript map display library: its goal is to allow web developers to show maps in their webpages. It is similar to Leaflet, OpenLayers or MapLibre. It aims to have an API that feels similar to Leaflet (imperative, object-oriented, no stylesheets, one object instance per cartographic symbol, extensible classes), but leveraging 2D WebGL rendering.

Using Gleo requires a solid grasp of the basics of web development. Gleo has been designed as Javascript modules, and does not require any bundling toolchain (like rollup, parcel, webpack, etc) to work.

๐Ÿ”—Basic usage

The simplest way to create a webpage with a Gleo map is to use the following HTML scaffolding:

<!DOCTYPE html>
<html>
	<body>
		<div style="width: 500px; height: 500px" id="gleocontainer" ></div>
		<script type="importmap">
			{
				"imports": {
				}
			}
		</script>
		<script type="module">
			import MercatorMap from "gleo/MercatorMap.mjs";
			import MercatorTiles from "gleo/loaders/MercatorTiles.mjs";

			const map = new MercatorMap("gleocontainer");

			const tiles = new MercatorTiles("https://tile.osm.org/{z}/{x}/{y}.png", {
				attribution: "<a href='http://osm.org/copyright'>ยฉ OpenStreetMap contributors</a>",
			}).addTo(map);

			map.center = [40,-3];
			map.span = 4000000;
		</script>
	</body>
</html>

You can see the above HTML working at <a href="./basic-usage.html" target="_blank">basic-usage.html</a>.

You can see the above HTML working as basic-usage.html{:target="_blank"}.

Let's see the pieces that make up this basic example:

Everything is wrapped up in an unremarkable HTML document:

<!DOCTYPE html>
<html>
	<body>
	โ€ฆ
	</body>
</html>

The webpage will need a block container where the Gleo map is to be held. For this example, it will be an empty <div> 500 pixels high and wide, with a specific id that we'll use later to link the Gleo map:

<div style="width: 500px; height: 500px" id="gleocontainer" ></div>

As noted earlier, Gleo is designed as Javascript modules with no need of a bundling toolchain. Modern web browser can load Javascript modules, but in order to do so properly we need to add an import map to the webpage. The import map tells the browser where (in which URI) it can find a specific library:

<script type="importmap">
	{
		"imports": {
			"gleo/": "https://unpkg.com/gleo/src/"
		}
	}
</script>

(This example uses the https://unpkg.com public CDN, but it's possible to use any other CDN. It's also possible to self-host the Gleo Javascript files; and advanced users may use a Javascript bundler and escher import maps and native modules. This is out of the scope of this example.)

Since our program will use Javascript modules, it needs to be a module itself

<script type="module">
โ€ฆ
</script>

The first thing that our program does is to load two classes from the Gleo library: MercatorMap and MercatorMap:

import MercatorMap from "gleo/MercatorMap.mjs";
import MercatorTiles from "gleo/loaders/MercatorTiles.mjs";

(Since there's an import map, gleo/MercatorMap.mjs gets translated to https://unpkg.com/gleo/src/MercatorMap.mjs; idem for MercatorTiles.)

Next, create a Gleo MercatorMap inside the <div> in the webpage:

const map = new MercatorMap("gleocontainer");

(You may be asking: ยซWhy "MercatorMap" and not just "Map"?ยป. On one hand, Javascript has a Map data structure and having equal names would be a problem. On the other hand, Gleo has support for multiple map projections, so the Mercator projection is made explicit.)

Gleo doesn't come with any built-in data, or any preferred map data providers. Just like Leaflet, one of the most common things to do is add some map tiles (in the Mercator projection) with some base map. OpenStreetMap is a usual choice for this (but if you are going to use OpenStreetMap tiles yourself, do read the OpenStreetMap tile policy!).

Adding some map tiles has several parts: the class constructor (new MercatorTiles), the tile URL template ("https://tile.osm.org/{z}/{x}/{y}.png"), options like attribution; last but not least, the tiles have to be added to the map (.addTo(map)).

const tiles = new MercatorTiles("https://tile.osm.org/{z}/{x}/{y}.png", {
	attribution: "<a href='http://osm.org/copyright'>ยฉ OpenStreetMap contributors</a>",
}).addTo(map);

It may not be obvious that a lot of methods use a technique known as method chaining. In other words: const tiles = new MercatorTiles(โ€ฆ).addTo(map); works in the same way as const tiles = new MercatorTiles(โ€ฆ); tiles.addTo(map);

Finally, we have to give the map a center, and a scale or span:

map.center = [40,-3];
map.span = 4000000;

Using MercatorMap means that there's a few niceties included, like being able to define the map center as a latitude-longitude pair (as opposed to coordinates in the Mercator projection).

Unlike Leaflet, Gleo eschews the concept of "zoom level" and uses the concept of "scale", in terms of CRS units per CSS pixel (for a Mercator map, this means meters-at-the-equator per CSS pixel). Instead of defining a "scale", the example defines the map's "span": the amount of CRS units (or pseudometers) that should fit in the map's diagonal. In other words: a value of 4 000 000 means that we want our map to cover about 4000km. Note that the map will snap the scale so that it fits the scale used by the map tiles; otherwise they would become blurry.

๐Ÿ”—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.

has(<GleoSymbol> symbol) Boolean Returns true if this map contains the given symbol, false otherwise.
has(<Loader> symbol) Boolean Returns true if this map contains the given loader, false otherwise.
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 the <canvas> where the map is shown (without any map controls). The platina has a state similar to a map (center/scale/etc), and when it changes it tells all acetates to redraw themselves, then flattens all acetates together.

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.

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.

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.

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).
multiAdd(<Arrary of Loader> loaders) this Adds the given Loaders to the platina.
remove(<GleoSymbol> symbol) this Removes one symbol from this map.
multiRemove(<Array of GleoSymbol> symbols) this Removes several symbols from this map.
has(<GleoSymbol> symbol) Boolean Returns true if this platina contains the given symbol, false otherwise.
has(<Loader> symbol) Boolean Returns true if this platina contains the given loader, false otherwise.

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
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.

๐Ÿ”—

๐Ÿ”—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 importmaps and/or 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 the length of the map's diagonal in "meters"
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.

has(<GleoSymbol> symbol) Boolean Returns true if this map contains the given symbol, false otherwise.
has(<Loader> symbol) Boolean Returns true if this map contains the given loader, false otherwise.
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:

When using the cartesian CRS, all coordinates are in abstract, unit-less cartesian units in X-Y form.

๐Ÿ”—Usage example

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

const myGleoMap = new CartesianMap('gleomap');

// The map center can be specified as a plain array in [x, y] form
myGleoMap.center = [1000, 1500];

// Initial scale ("zoom"): 1 map unit per CSS pixel
myGleoMap.scale = 1;
</script>

๐Ÿ”—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.

has(<GleoSymbol> symbol) Boolean Returns true if this map contains the given symbol, false otherwise.
has(<Loader> symbol) Boolean Returns true if this map contains the given loader, false otherwise.
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.

๐Ÿ”—GleoSymbol

An abstract base graphical symbol.

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

A GleoSymbol is closely coupled to a matching Acetate. The Acetate defines the WebGL program that will render symbols in the GPU; whereas GleoSymbols hook to an acetate, and fill up some data structures provided by it.

๐Ÿ”—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 it 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 it has to be added to.

๐Ÿ”—Dot

A 1-pixel dot, with RGBA colour.

Dots are a minimalist symbol, in the sense that they use the least GPU data structures among symbols.

๐Ÿ”—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. It is possible for the maximum value to be 1.

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 different RGBA colour per hair.

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

For thicker & antialiased lines, see the Stroke symbol.

๐Ÿ”—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

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.

๐Ÿ”—

๐Ÿ”—Cap type

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
BUTT Symbol "Butt" caps are perpendicular to the first/last segment, and are located exactly at the line's endpoints.
SQUARE Symbol "Square" caps are perpendicular to the first/last segment, and are extruded an amount equal to half the stroke's width.

๐Ÿ”—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

Static properties

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

๐Ÿ”—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.

๐Ÿ”—Chain

Draws line geometries as a set of overlapping 2-point segments.

Behaves similar to Stroke symbols, but handles the line joins ("corners") differently: instead of calculating joins, corner points are drawn twice at half the opacity.

Compared with Strokes, Chains produce less graphical artefacts when drawing thick, short lines. The downside is reduced fidelity for corners between long segments.

๐Ÿ”—Constructor

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

๐Ÿ”—Options

Option Type Default Description
colour Colour '#3388ff' The colour of the chain.
width Number 4 The width of the chain, 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

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 it has to be added to.

๐Ÿ”—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 it 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 Number Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.
image Promise to HTMLImageElement A Promise to the (possibly not loaded yet) image for this sprite.

Read-only. If there's a need to update a Sprite's image, remove it and create a fresh one.

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.

๐Ÿ”—Functions

Function Returns Description
addFontFace(<String> family, <String> source, <Object> descriptors?) Promise Registers a new font face (AKA typeface) for use with TextLabel.

Note that for technical reasons (i.e. "text is rendered inside a web worker"), to Gleo.

The parameters to this static function are the same as the FontFace constructor.

Beware: any relative URLs used in the source will be interpreted as being relative to the URL of the web worker code module. Usage of absolute URLs is therefore highly encouraged.

Returns a Promise that resolves when the font face has been loaded.

๐Ÿ”—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 Number Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.
image Promise to HTMLImageElement A Promise to the (possibly not loaded yet) image for this sprite.

Read-only. If there's a need to update a Sprite's image, remove it and create a fresh one.

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 Number Runtime value of the spriteScale option: image pixel to CSS pixel ratio. Can be updated.
image Promise to HTMLImageElement A Promise to the (possibly not loaded yet) image for this sprite.

Read-only. If there's a need to update a Sprite's image, remove it and create a fresh one.

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) 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) 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) 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) 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) 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 it 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 it 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) 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.
expandAnimationDuration The animation of the leg expansion animation, in milliseconds. Set to zero to disable.
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 it 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 it 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.

See also HeatChain. For high fidelity on visible corners, use HeatStroke. To minimize rendering artefacts when zooming out on geometries with sharp turns, use HeatChain.

๐Ÿ”—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.

๐Ÿ”—HeatChain

A mix of Chain 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.

See also HeatChain. For high fidelity on visible corners, use HeatStroke. To minimize rendering artefacts when zooming out on geometries with sharp turns, use HeatChain.

๐Ÿ”—Constructor

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

๐Ÿ”—Options

Option Type Default Description
intensity Number 10 Intensity of the scalar field on the chain's centerline. The intensity will fall off towards zero on the stroke's edge, in a linear fashion.
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 it has to be added to.

๐Ÿ”—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.

๐Ÿ”—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.

๐Ÿ”—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() As _getStridedArrays(), but applies only to strided arrays that need to be updated whenever the geometry of a symbol changes.
_commitGeometryStridedArrays() As per _commitStridedArrays(), but applies only to the strided arrays returned to _getGeometryStridedArrays().
_getPerPointStridedArrays() As _getStridedArrays(), but applies only to strided arrays that contain data that has to be updated on a per-geometry-point basis.
_commitPerPointStridedArrays() As per _commitStridedArrays(), but applies only to the strided arrays returned to _getPerPointStridedArrays().
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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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.

๐Ÿ”—AcetateChain

An Acetate that draws lines as Chains of overlapping 2-point segments

๐Ÿ”—Constructor

Constructor
new AcetateChain(<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

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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)
symbols Array of GleoSymbol The symbols being drawn on this acetate.

This is a shallow copy of the internal structure holding the symbols, so any changes to it won't affect which symbols are being drawn. Read-only.

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