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.
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:
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:
(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:
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)).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
Self-explanatory. The default transparent black should work for
most use cases.
backgroundColour
null
If the background is explicitly set to null, then it won't
be cleared between redraws. This might trigger an "infinite mirror"
artifact if the canvas is not otherwise cleared between redraws.
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.
renderLoop
Boolean
true
Enable/disable frame-by-frame renderloop. The default is to
trigger a redraw call on every render frame. Disable this when
manually trigering redraw calls.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Sets a maxSpan of 45 million (mainly to prevent users zooming out far
enough to see horizontal bands above 85° / below -85° when zooming), can
be overridden
Enables some actuators by default:
DragActuator to move the map with a drag-and-drop interaction.
PinchActuator to zoom/rotate the map with two-finger gestures.
All methods that take Geometrys as input can take arrays of the form
[lat, lng] instead, as per LatLng (via DefaultGeometry).
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.
<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>
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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>
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.
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.
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.
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.
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.
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.
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.
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.
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.
(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.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
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.
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.
Lifecycle Methods
Property
Type
Description
allocation
Promise to Array of Number
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
This is done exclusively for compatibility with the trajectorify decorator.
The technical difference is that Dot assumes always one vertex per Dot,
whereas VertexDotbehaves as multiple-vertices-per-symbol. That allows
VertexDot to be trajectorifyd.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
A 1-pixel line, with a different RGBA colour per hair.
Hairs are drawn in an AcetateHair, which leverages the LINESdrawMode of WebGL.
Therefore, they are not antialiased and always one device pixel (not one CSS pixel) wide.
For thicker & antialiased lines, see the Stroke symbol.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Defines the shape of line caps. Must be one of Stroke.BUTT,
Stroke.SQUARE, or Stroke.HEX.
centerline
Boolean
false
Whether the stroke has vertices along its centerline, or not.
offset
Number
0
Line offset, in CSS pixels. Positive means to the right of the
line (when going through the geometry from first to last point).
Use this to create line strokes parallel to each other.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
"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.
"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. In other words: extrudes
half a square on each cap.
HEX
Symbol
Short for "hexagon" - extrudes half a hexagon on each cap.
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.
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
capZIndex
Number
As zIndex, but for line caps. When not specified, the line caps
will use the same z-index as the main body of the stroke.
Defines the shape of line caps. Must be one of Stroke.BUTT,
Stroke.SQUARE, or Stroke.HEX.
centerline
Boolean
false
Whether the stroke has vertices along its centerline, or not.
offset
Number
0
Line offset, in CSS pixels. Positive means to the right of the
line (when going through the geometry from first to last point).
Use this to create line strokes parallel to each other.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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)
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
The amount of times to force arrugator split for all segments.
The default of zero should work for rasters with a relative small
coverage. Rasters who span the whole globe and produce artefacts
might arrugate better with values between 1 and 4.
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).
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
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);
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
image
Promise to Response
For convenience, the result of a fetch call 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.
Replaces the sprite's image and associated parameters (sprite size,
anchor, origin, scale). The first parameter is an object containing
constructor options (such as image, spriteAnchor, etc).
By default, the old image gets expelled from the acetate's texture atlas.
In order to prevent that, set retain to true. This is useful in
scenarios where replacing the images of several Sprites in the same
render frame causes artifacts such as the wrong image being displayed. Avoid
retaining large images.
Returns a Promise that resolves when the image has been loaded.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
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.
image
Promise to Response
For convenience, the result of a fetch call 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.
Replaces the sprite's image and associated parameters (sprite size,
anchor, origin, scale). The first parameter is an object containing
constructor options (such as image, spriteAnchor, etc).
By default, the old image gets expelled from the acetate's texture atlas.
In order to prevent that, set retain to true. This is useful in
scenarios where replacing the images of several Sprites in the same
render frame causes artifacts such as the wrong image being displayed. Avoid
retaining large images.
Returns a Promise that resolves when the image has been loaded.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
image
Promise to Response
For convenience, the result of a fetch call 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.
Replaces the sprite's image and associated parameters (sprite size,
anchor, origin, scale). The first parameter is an object containing
constructor options (such as image, spriteAnchor, etc).
By default, the old image gets expelled from the acetate's texture atlas.
In order to prevent that, set retain to true. This is useful in
scenarios where replacing the images of several Sprites in the same
render frame causes artifacts such as the wrong image being displayed. Avoid
retaining large images.
Returns a Promise that resolves when the image has been loaded.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
A line segment symbol. One end of the segment is always placed at the symbol's
point geometry; the dimensions of the line are defined by the symbol's offset
(measured in CSS pixels).
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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)
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
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.
Defines the shape of line caps. Must be one of Stroke.BUTT,
Stroke.SQUARE, or Stroke.HEX.
centerline
Boolean
false
Whether the stroke has vertices along its centerline, or not.
offset
Number
0
Line offset, in CSS pixels. Positive means to the right of the
line (when going through the geometry from first to last point).
Use this to create line strokes parallel to each other.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
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.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
Returns a verbose, human-understandable representation of the underlying
WebGL data (vertex attributes and triangle primitives) for this symbol.
This is an computationally expensive operation and should only be used for
debugging purposes. Note that this functions just retuns a value, so make
sure to console.log() or likewise.
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.
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.
A Promise that resolves when the symbol has been allocated into an
acetate (not just added to it). Before this promise resolves,
the values of attrBase and idxBase are either undefined or
not reliable.
A decorator is a function that takes a GleoSymbolclass and returns another, decorated, symbol class with extra functionality.
The extra functionality might mean new constructor options for the symbol, new constructor options for the symbol's acetate, and/or changes to the behaviour of how the symbols are rendered/drawn.
Technically, the decorated symbol is a subclass (or child class) of the original one. Same with the decorated Acetate, which is a subclass of the original symbol's Acetate.
Converts a GleoSymbol into a symbol that can be filtered by a value in an interval.
Each symbol gains two properties for the interval start and end values; the
corresponding Acetate gains interval start and end as well. A symbol will
be rendered only if its intervall falls within (or intersects with) the
acetate's interval.
The acetate's interval can be efficiently reset at runtime, allowing dynamic
filtering of the symbols.
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, "within"); // "Intervalified" `Sprite` 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).
These symbols need to be drawn in their own Acetate (and this Acetate needs
to be created linked to a GleoMap or a Platina). Optionally pass a mode
("within"/"intersect") and starting values for the interval to be shown:
const myIntervalAcetate = new IntervalSprite.Acetate(map, {mode = "within"});
myIntervalAcetate.multiAdd([sprite1, sprite2]);
Finally, set the intervalStart and intervalEnd properties of the
Acetate in order to dynamically filter which symbols are drawn:
"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.
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.
Option
Type
Default
Description
intervalStart
Number
-Infinity
The initial value for the acetate's interval start.
intervalEnd
Number
Infinity
The initial value for the acetate's interval end.
opacityStart
Number
1
The initial value for opacity of symbols whose interval is next to the
acetate's interval start.
opacityEnd
Number
1
The initial value for opacity of symbols whose interval is next to the
acetate's interval end.
mode
String
"within"
Controls the overlap behaviour between the symbols' intervals and the acetate's
intervals. Can take two values:
When mode is within, then a symbol will be shown if its interval is
completely within the acetate's interval. This is the default.
When mode is intersect, then a symbol will be shown if its interval
intersects with the acetate's interval.
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.
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.
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.
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.
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)
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.
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.
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.
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.
Applies a scale factor to symbols depending on the map's scale.
Typical use cases include Stroked lines that must appear thinner when
zoomed out, but thicker when zoomed in. The decorator takes in a map
of map scale values to symbol scale factors.
const ScaledStroke = factorscalify(Stroke, {
// At a map scale of 1000 CRS units per CSS pixel, halve the size of the symbols
1000: 0.5,
// At a map scale of 1 CRS unit per CSS pixel, use the symbol's original size
1: 1
});
Turns a point symbol into a polygon symbol that will draw the original
point symbol several times.
Instead of taking a point geometry, the symbol will now take a polygon
geometry and a count option. The original point symbol will
be drawn several times (count) at random points inside the polygon geometry.
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:
A Framebuffer
Including a Texture that can (and should/will) be used for composing
A WebGL1Program
An AttributeSet
A IndexBuffer
Typically, an Acetate will receive symbols, given as triangles together
with the neccesary vertex attributes, e.g.:
triangulized polygons,
extrudable line countours
extrudable points
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).
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.
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.
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.
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.
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 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.
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 _coordsSingleAttributeBuffer, 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 device pixels).
redraw(<BaseCRS> crs, <Array of Number> matrix, <ExpandBox> viewportBbox)
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.
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.
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.
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)
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.
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:
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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 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.
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.
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.
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.
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 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.
In particular, this uses the LINESdrawMode 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").
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.
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.
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.
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.
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 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.
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.
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.
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]`.
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.
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.
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.
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 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.
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.
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.
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).
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.
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.
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 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.
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.
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.
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).
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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 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.
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)
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.
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].
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.
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.
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.
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 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.
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)
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.
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.
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.
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.
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 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.
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)
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.
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.
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.
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.
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 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.
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)
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.
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.
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.
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.
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 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.
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.
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.
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)
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.
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.
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.
debugAtlasIntoCanvas(<HTMLCanvasElement> canvas)
this
Dumps the contents of the sprite atlas into the given <canvas>.
This is an expensive operation and is meant only for debugging purposes.
debugAtlasIntoConsole()
this
Dumps the contents of the sprite atlas into the developer tools' console,
with some <canvas> and console.log("%c") trickery.
This is an expensive operation and is meant only for debugging purposes.
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)
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.
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.
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 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.
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.
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)
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.
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.
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.
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.
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 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.
An Acetate that draws rectangular conformal (i.e. matching the display CRS)
RGB(A) raster images, all of which fit together inside a Glii texture (and
so they share it). Users should not use this acetate directly; look at
MercatorTiles and RasterTileLoader and instead.
This acetate will not hold an indefinite number of tiles; rather,
a tile might overwrite an existing tile. The (maximum) number of tiles at
any given moment depends on the size of the WebGL texture used.
Minimum size of the textures used to cache tile data. This should
be set to the maximum expected size of the map (RasterTileLoader
does so).
Lower values might save some GPU memory, but will cause tiles to
be culled prematurely.
Higher values will keep more tiles cached in GPU textures, but
will use more GPU memory and can cause browsers (notably
chrome/chromium) to spend more time allocating the textures. Texture
size is ultimately bound by the WebGL capabilities of the
browser/OS/GPU, which usually can support textures 8192 or 16384
pixels wide/high.
interpolate
Boolean
false
Whether to use bilinear pixel interpolation or not.
In other words: false means pixellated, true means smoother.
fadeInDuration
Number
250
Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels
Number
3
Number of maximum tile levels to keep loaded in their textures.
Higher values can provide a slightly better experience when
zooming in and out, but will use more GPU RAM.
resizablePlatina
Boolean
true
Whether the platina can be expected to be resized up to the size
of the screen. When false, less GPU RAM is used for the textures.
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.
Fired whenever a texture for a level of tiles is expelled, and
thus all tiles from that level should be marked as unusable.
The event's detail contains the name of the expelled level.
Adds a single tile. The tile will be slotted in a specific portion
of the available space, depending on its X and Y coordinates within its pyramid level.
reproject(<Number> start, <Number> length)
Array of Number
Dumps a new set of values to the this._coords attribute buffer, based on the known
set of symbols added to the acetate (only those which have their attribute offsets
between start and start+length.
Returns the data set into the attribute buffer: a plain array of coordinates
in the form [x1,y1, x2,y2, ... xn,yn].
This implementation does not assume that the attribute allocation block
contains a compact set of symbols (since tiles are statically allocated at
instantiation time, then overwritten at runtime).
Acetate interface
Method
Returns
Description
getLevelsInfo()
Object of Object
Returns a data structure containing information about tile levels:
tile resolution, expected texture size, number of tiles fitting in the
texture, etc.
Meant for debugging and communication with a RasterTileLoader only.
isLevelAvailable(<String> levelName)
Boolean
Returns whether the texture for the given level name is available.
In other words: when the given level has never been loaded, or it has
been expelled from the MRU list, this returns false.
destroyHigherScaleLevels(<String> levelName)
Boolean
Searches all levels with a scale lower than the given one (i.e. those with
"higher zoom levels") and marks them as invalid; will not be re-rendered
until a tile for that level is allocated.
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.
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.
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 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.
The value of the scalar field prior to render data on it. It should
be zero for most cases (where scalar symbols are using the ADD blend
equation), but should be a different number when using the MIN
blend equation.
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.
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.
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.
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.
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 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.
A ScalarField to draw heat maps, with a custom colour ramp.
Since the colour ramp is configurable, this ScalarField must be manually
instantiated, unlike most Acetates.
While it's possible to add HeatPoints directly to a Platina,
doing so (before instantiating a HeatMap) would use the
defaults and draw those HeatPoints in a black-and-white GreyscaleField.
It is strongly advised to instantiate a HeatMap before placing
any HeatPoints.
Very similar to GreyscaleField, but with multiple colour stops in the
colour ramp (instead of two colours for min/max values).
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
Valur of the field that equals a probability of 1 of a pixel
having a solid colour. In other words, the probability of
any given pixel twinkling at any given time is its intensity
divided by the maximum intensity of the twinkle field.
noiseTextureSize
Number
512
Width and height of the internal noise texture used for
pseudo-RNG. This repeats, so small values might result in
visible non-random patterns.
Warps another acetate based on the intensity of the scalar field, in
an animated way. The amplitude of the warp is directly proportional to the
value of the scalar field.
The duration of the blur fade-in animation, in milliseconds.
Setting this to zero will make the QuadBin (or HexBin)
render immediately when the map is moved or zoomed. This causes
bins to flicker rapidly, which is generally unpleasant to the
eye.
A value larger than zero will keep rendering semi-transparent
bins each frame, until they "settle down" when the time is over.
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
The duration of the blur fade-in animation, in milliseconds.
Setting this to zero will make the QuadBin (or HexBin)
render immediately when the map is moved or zoomed. This causes
bins to flicker rapidly, which is generally unpleasant to the
eye.
A value larger than zero will keep rendering semi-transparent
bins each frame, until they "settle down" when the time is over.
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
The duration of the blur fade-in animation, in milliseconds.
Setting this to zero will make the QuadBin (or HexBin)
render immediately when the map is moved or zoomed. This causes
bins to flicker rapidly, which is generally unpleasant to the
eye.
A value larger than zero will keep rendering semi-transparent
bins each frame, until they "settle down" when the time is over.
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
The value of the scalar field prior to rendering data on it. It should
be zero for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to rendering data on it. It should
be zero for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to rendering data on it. It should
be zero for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The length (in CSS pixels) of the arrowhead per unit of
slope. In other words: the scale factor between the slope vector
(in slope units) and the length of the arrowhead (in CSS pixels)
The value of the scalar field prior to rendering data on it. It should
be zero for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
The value of the scalar field prior to render data on it. It should
be [zero, zero] for most cases.
Defines how the symbols' intensity affects the value of the
scalar field. The default is "ADD", which means the intensity
is added to the scalar field. Other possible values are "SUBTRACT",
"MIN" and "MAX".
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)
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Defines how the symbols' intensity affects the value of the
scalar field. The default is "ADD", which means the intensity
is added to the scalar field. Other possible values are "SUBTRACT",
"MIN" and "MAX".
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.
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.
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.
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.
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.
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)
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.
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].
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.
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.
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.
Defines how the symbols' intensity affects the value of the
scalar field. The default is "ADD", which means the intensity
is added to the scalar field. Other possible values are "SUBTRACT",
"MIN" and "MAX".
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)
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.
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.
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.
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.
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.
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.
Can (and should) be used by implementations to check whether a set
of x, y tile coordinates are within the given tile range with
the given tile span.
Tile ranges are assumed to be minimum-inclusive but maximum exclusive,
i.e. [min, max)
_abortLevel(level:String)
undefined
Must be provided by raster and vector implementations. Should
(try to) abort all pending Promises for the given level.
Must be provided by raster and vector implementations.
Called whenever a rangechange event occurs. Implementations should
(a) abort tiles outside the range and (b) load tiles inside the range,
all according to their caching algorithm.
_onTileLoad(<String> level, <Number> x, <Number> y, <*> tile)
undefined
Should be called when a tile loads. The abstract implementation will
only fire a tileload event and trigger a redraw.
_onTileError(<String> level, <Number> x, <Number> y, <*> tile)
undefined
Should be called when a tile fails to load. The abstract implementation will
only fire a tileerror event.
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.
A RasterTileLoader needs a TilePyramid and a function that, given the
pyramid level ("z"), the coordinates of a tile within that level
("x" and "y"), and an instance of AbortController, returns an
instance of HTMLImageElement, or a Promise to such an image. The
promise should be rejected whenever the abort controller's signal is
activated.
Constructor
new TileLoader(pyramid:TilePyramid, <Function> tileFn, <TileLoader Options> opts)
Horizontal size, in source raster pixels, of each tile.
tileResX
Object of String to Number
A map of level identifier to horizontal raster size (in source raster pixels).
e.g. {"0": 512, "1": 256}
tileResY
Number
256
Vertical size, in source raster pixels, of each tile.
A map of level identifier to vertical raster size (in source raster pixels).
e.g. {"0": 512, "1": 256}
zIndex
Number
-5500
The z-index of the acetate for these tiles.
fallback
HTMLImageElement
An image to use as fallback is loading a tile fails.
fallback
URL
Idem, but using the URL to an image.
fallback
String
Idem, but using a String containing a URL
retry
Boolean
false
When true, tiles that failed to load will be re-requested
the next time the tile extent changes (i.e. moving the map enough
so that new tiles become visible). This can potentially
lead to lots of requests for missing tiles.
Whether to use bilinear pixel interpolation or not.
In other words: false means pixellated, true means smoother.
fadeInDuration
Number
250
Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels
Number
3
Number of maximum tile levels to keep loaded in their textures.
Higher values can provide a slightly better experience when
zooming in and out, but will use more GPU RAM.
resizablePlatina
Boolean
true
Whether the platina can be expected to be resized up to the size
of the screen. When false, less GPU RAM is used for the textures.
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.
Horizontal size, in source raster pixels, of each tile.
tileResX
Object of String to Number
A map of level identifier to horizontal raster size (in source raster pixels).
e.g. {"0": 512, "1": 256}
tileResY
Number
256
Vertical size, in source raster pixels, of each tile.
A map of level identifier to vertical raster size (in source raster pixels).
e.g. {"0": 512, "1": 256}
zIndex
Number
-5500
The z-index of the acetate for these tiles.
fallback
HTMLImageElement
An image to use as fallback is loading a tile fails.
fallback
URL
Idem, but using the URL to an image.
fallback
String
Idem, but using a String containing a URL
retry
Boolean
false
When true, tiles that failed to load will be re-requested
the next time the tile extent changes (i.e. moving the map enough
so that new tiles become visible). This can potentially
lead to lots of requests for missing tiles.
Options passed to spawned acetate inherited from RasterTileLoader
Option
Type
Default
Description
interpolate
Boolean
false
Whether to use bilinear pixel interpolation or not.
In other words: false means pixellated, true means smoother.
fadeInDuration
Number
250
Duration, in milliseconds, of the tile fade-in animation.
maxLoadedLevels
Number
3
Number of maximum tile levels to keep loaded in their textures.
Higher values can provide a slightly better experience when
zooming in and out, but will use more GPU RAM.
resizablePlatina
Boolean
true
Whether the platina can be expected to be resized up to the size
of the screen. When false, less GPU RAM is used for the textures.
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.
A Loader that displays conformal rasters from a WMS service.
The constructor needs the base URL of the WMS. The ConformalWMS loader
will perform a getCapabilities query. The raster will only by displayed if
the CRS of the map is one of the CRSs available from the WMS.
This is an untiled WMS client implementation: every viewport change
translates into a new image request to the WMS.
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.
The constructor needs the base URL of the OGC API endpoint. The ConformalOGCAPIMaps
loader will request the metadata for that endpoint (available collections,
formats, CRSs, etc).
This is an untiled client implementation: every viewport change
translates into a new image request to the API.
The ID of the collection to use. Note this is que unique id, and not
the human-readable title of the collection.
imageFormat
String
The MIME type for the image format to request, e.g. image/png or
image/jpeg.
If ommitted, the first format listed in the collection metadata will be used.
debounceTime
Number
500
Time, in milliseconds, to debounce the HTTP(S) requests. This is a
preventative measure against overloading the OGC API server.
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.
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.
Akin to Leaflet's LayerGroup. Groups symbols together so that they can be
added to/removed at once by adding/removing the symbol group. Symbols can be
added to/removed from the group as well.
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.
Defines how to spawn symbols for the clusters. The function will
receive an Array of GleoSymbols as its first parameter, and must
return an Array of GleoSymbols which must represent the cluster.
distance
Number
80
The minimum distance, in CSS pixels, for two GleoSymbols to not be
clustered. By implication, that's also the maximum diameter of a cluster.
clusterSetFactor
Number
1
How many cluster sets to calculate per every doubling/halving
of the scale.
e.g. The default value of 1 will create a set of clusters for every
doubling of the scale. A value of 2 will create a set of clusters
every time the scale varies by a factor of square root of 2, and
a value of e.g. 0.5 will create a set of clusters every time the
scale quadruples.
scaleLimit
Number
0
Clusters will not be calculated past this scale factor. Instead, the
most detailed clusters will be expandable Spiders.
TODO: Default to undefined, and calculate from the platina's minSpan.
onClusterClick
Function
An event handler that will run when clicking on a non-spider cluster.
This function receives as parameters: the event, a reference to this
Clusterer, and Array of GleoSymbols with the items in the cluster,
and an ExpandBox covering those items.
The default is to perform a fitBounds to the bounding box of the
items in that cluster, zooming up to scaleLimit at most.
onClusterClick
Boolean
Setting this to false will disable cluster click events.
spiderOptions
Spider Options
A set of options for the Spider constructor, that shall be applied
to any Spiders spawned by this clusterer.
Returns the symbol representing the cluster that the given symbol belongs to,
at the given scale. If scale is not given, the current scale will be
used.
Akin to leaflet-markercluster's zoomToShowLayer() - zooms into the map
far enough so the given symbol is not clustered; if it's in a spider
it will zoom into it and expand the spider.
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.
A Function that defines how features with a point (or multipoint)
geometry get transformed into GleoSymbols. It receives the feature
as its first parameter, an instance of a Gleo Geometry as its
second parameter, and must return an array of GleoSymbols.
When not specified, a default implementation is used. This default
implementation symbolizes point features with a CircleFill and
a CircleStroke with default options.
This function may be called more than once for the same feature.
lineSymbolizer
Function
*
Akin to pointSymbolizer, but for linestrings (and multilinestrings).
When not specified, the default is to use a default Stroke.
Akin to pointSymbolizer, but for linestrings (and multilinestrings).
polygonSymbolizer
Function
*
Akin to pointSymbolizer, but for polygons (and multipolygons).
When not specified, the default is to use default Stroke and Fill.
Akin to pointSymbolizer, but for polygons (and multipolygons).
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.
The Function currently used for turning a feature and one of its
geometries into a set of GleoSymbols.
Changing this function during runtime does not trigger a
re-symbolization of the dataset.
A Loader for requesting, parsing and symbolizing data in "OGC Features and
Geometries JSON" format (AKA "OGC JSON-FG"). JSON-FG is OGC's proposal for
extending GeoJSON.
This Gleo implementation is built according to the draft specification as
of 2022-09, from https://docs.ogc.org/DRAFTS/21-045.html .
GeoJSON files can only contain data in latitude-longitude coordinates, but
JSON-FG allows for other coordinate systems. This Gleo implementation
handles this extra CRS information, so that geometries work as they should.
Due to technical restrictions, any CRSs referred to in the data must
already have a corresponding Gleo BaseCRS defined elsewhere.
A Function that defines how features with a point (or multipoint)
geometry get transformed into GleoSymbols. It receives the feature
as its first parameter, an instance of a Gleo Geometry as its
second parameter, and must return an array of GleoSymbols.
When not specified, a default implementation is used. This default
implementation symbolizes point features with a CircleFill and
a CircleStroke with default options.
This function may be called more than once for the same feature.
lineSymbolizer
Function
*
Akin to pointSymbolizer, but for linestrings (and multilinestrings).
When not specified, the default is to use a default Stroke.
Akin to pointSymbolizer, but for linestrings (and multilinestrings).
polygonSymbolizer
Function
*
Akin to pointSymbolizer, but for polygons (and multipolygons).
When not specified, the default is to use default Stroke and Fill.
Akin to pointSymbolizer, but for polygons (and multipolygons).
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.
The Function currently used for turning a feature and one of its
geometries into a set of GleoSymbols.
Changing this function during runtime does not trigger a
re-symbolization of the dataset.
A Function that defines how waypoints get transformed into
GleoSymbols. It receives the waypoint (as a parsed XML node),
an instance of a Gleo Geometry as its second parameter, and
must return an array of GleoSymbols.
When not specified, a default implementation is used. This default
implementation symbolizes waypoints with a CircleFill and
a CircleStroke with default options.
trackSymbolizer
Function
*
Akin to pointSymbolizer, but for GPX tracks.
When not specified, the default is to use a default Stroke.
routeSymbolizer
Function
*
Akin to pointSymbolizer, but for GPX routes.
When not specified, the default is to use a default Stroke.
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.
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.
The minimal bounding box that contains all geometries from all loaded
symbols.
The units of this bounding box correspond to the CRS of the Platina
this loader is in.
bbox
undefined
When this loader is not in any Platina, or there are no loaded symbols,
the bounding box of its loaded symbols is undefined.
Uses a Pyramid like a TileLoader does, but instead of a raster image,
each tile contains a number of GleoSymbols instead.
This is the base, format-less, implementation; most users will be interested
in a vector tile loader which requests and parses vector tiles in protobuf
or geojson format. This class does allow for synthetic vector tiles, though.
A GenericVectorTileLoader is built upon a TilePyramid and a function
that, given the pyramid level ("z"), the coordinates of a tile
within that level ("x" and "y"), and an AbortController, returns
an Array of GleoSymbols, or a Promise to such an array.
Constructor
new GenericVectorTileLoader(<TilePyramid> pyramid, <Function> tileFn, <GenericVectorTileLoader Options> opts)
Dispatched when a tile is deleted due to pruning. This happens
whenever a prunable tile is (a) not the best fit for the current
map scale and (b) completely covered by tiles from the fitting
pyramid level.
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.
Callback function that will be called just after each feature has
been symbolized.
The callback function will receive (symbols, geometry, themeName, attributes)
as parameters. The callback will not be called if a vector tile
feature was filtered out or otherwise was symbolized to zero symbols.
fetchOptionsForTile
Function
undefined
Optional callback function for supplying custom fetch options, given
the tile coordinates (level, x and y).
The return value of this callback must be a set of fetch options,
as per the options parameter in https://developer.mozilla.org/en-US/docs/Web/API/fetch .
Dispatched when a tile is deleted due to pruning. This happens
whenever a prunable tile is (a) not the best fit for the current
map scale and (b) completely covered by tiles from the fitting
pyramid level.
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.
Should read a JSON document containing a Mapbox GL JS Stylesheet, and
spawn a ProtobufVectorTileLoader (plus a RasterTileLoader if there is
aerial imagery specified in the stylesheet)
See https://docs.mapbox.com/mapbox-gl-js/style-spec/
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.
A key-value map of symbolizer callback functions. The keys
must be the names of the themes in the tileset (e.g. "roads" or
"natural"), the values must be symbolizer functions that must
return an array of zero or more GleoSymbols.
defaultSymbolizer
Function
A callback symbolizer function used whenever there is no matching entry in
symbolizers. It must return an array of zero or more GleoSymbols.
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.
Loads a single GeoTIFF file (from a URL), automatically handling everything
needed for a default visualization of that GeoTIFF.
In particular, this handles metadata for the CRS, the min/max values and number
of samples per pixel. It then provides a ArrugatedRaster, possibly paired
to a HeatMap to provide greyscale rendering.
Note this works for single GeoTIFFs with one image inside. It will not
work for CloudOptimized GeoTIFFs (COGs) or the like.
Any options not recognized by gleo will be passed on to the GeoTIFF.js library
when requesting a GeoTIFF from a URL.
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.
Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian")
or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng()
Array of Number
Returns a flat array of latitude-longitude (Y-X) representing this geometry,
in the form [lat1, lng1, lat2, lng2, ... latN, lngN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
asLngLat()
Array of Number
Returns a flat array of longitude-latitude (X-Y) representing this geometry,
in the form [lng1, lat1, lng2, lat2, ... lngN, latN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
mapCoords(<Function> fn)
Array of Number
Returns a new array of the form [x1,y1, ... xn,yn], having run the given
Function on every x,y pair of coordinates from self. The Function
must take an Array of 2 Numbers as its first parameter (the coordinate
pair), a Number as its second parameter (the index of the current
coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.
Takes into account the dimension (dimension 3 works for x,y,z and dimension 4
works for x,y,z,m)
mapRings(<Function> fn)
Array
Runs the given Function once per ring (including each ring in each hull, if
applicable), and returns an Array containing the return values.
The given Function can expect four parameters:
start coordinate (0-indexed, inclusive)
end coordinate (0-indexed, exclusive)
length of the ring (how many coordinates in that ring, also end-start)
A flat Array containing the CRS-relative coordinates or the
geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new ring.
hulls
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new hull.
loops
Array of Boolean
A read-only Array with one Boolean values per ring. The value is
true for those rings which forms loops (the first coordinate pair
equals the last one).
A read-only containing the starts (inclusive) and ends (exclusive)
of all rings.
Contains, at least, 0 and the amount of coordinate pairs (for
geometries with just one ring)
A Gleo Geometry is akin to geometries in the OGC Simple Features Specification:
points, linestrings, polygons and multipolygons.
Internally, Geometrys are represented as a flat array of coordinates, in the form
[x1,y2, x2,y2, x3,y3 ... xn,yn] for 2-dimensional geometries; plus a list of
offsets specifying the n-th coordinate where a hull starts and a ring starts (0th
hulls and rings are ommitted).
(About nomenclature: a multipolygon has one or more hulls, and each hull
has an outer ring and zero or more inner rings. Hulls tell apart polygons
within a multipolygon, and rings tell apart inner/outer boundaries of a
polygon).
(TODO: [x1,y1,z1, ... xn,yn,zn] for 3-dimensional, and [x1,y1,z1,m1, ... xn,yn,zn,mn]
for 4-dimensional)
Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian")
or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng()
Array of Number
Returns a flat array of latitude-longitude (Y-X) representing this geometry,
in the form [lat1, lng1, lat2, lng2, ... latN, lngN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
asLngLat()
Array of Number
Returns a flat array of longitude-latitude (X-Y) representing this geometry,
in the form [lng1, lat1, lng2, lat2, ... lngN, latN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
mapCoords(<Function> fn)
Array of Number
Returns a new array of the form [x1,y1, ... xn,yn], having run the given
Function on every x,y pair of coordinates from self. The Function
must take an Array of 2 Numbers as its first parameter (the coordinate
pair), a Number as its second parameter (the index of the current
coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.
Takes into account the dimension (dimension 3 works for x,y,z and dimension 4
works for x,y,z,m)
mapRings(<Function> fn)
Array
Runs the given Function once per ring (including each ring in each hull, if
applicable), and returns an Array containing the return values.
The given Function can expect four parameters:
start coordinate (0-indexed, inclusive)
end coordinate (0-indexed, exclusive)
length of the ring (how many coordinates in that ring, also end-start)
A flat Array containing the CRS-relative coordinates or the
geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new ring.
hulls
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new hull.
loops
Array of Boolean
A read-only Array with one Boolean values per ring. The value is
true for those rings which forms loops (the first coordinate pair
equals the last one).
A read-only containing the starts (inclusive) and ends (exclusive)
of all rings.
Contains, at least, 0 and the amount of coordinate pairs (for
geometries with just one ring)
Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian")
or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng()
Array of Number
Returns a flat array of latitude-longitude (Y-X) representing this geometry,
in the form [lat1, lng1, lat2, lng2, ... latN, lngN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
asLngLat()
Array of Number
Returns a flat array of longitude-latitude (X-Y) representing this geometry,
in the form [lng1, lat1, lng2, lat2, ... lngN, latN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
mapCoords(<Function> fn)
Array of Number
Returns a new array of the form [x1,y1, ... xn,yn], having run the given
Function on every x,y pair of coordinates from self. The Function
must take an Array of 2 Numbers as its first parameter (the coordinate
pair), a Number as its second parameter (the index of the current
coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.
Takes into account the dimension (dimension 3 works for x,y,z and dimension 4
works for x,y,z,m)
mapRings(<Function> fn)
Array
Runs the given Function once per ring (including each ring in each hull, if
applicable), and returns an Array containing the return values.
The given Function can expect four parameters:
start coordinate (0-indexed, inclusive)
end coordinate (0-indexed, exclusive)
length of the ring (how many coordinates in that ring, also end-start)
A flat Array containing the CRS-relative coordinates or the
geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new ring.
hulls
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new hull.
loops
Array of Boolean
A read-only Array with one Boolean values per ring. The value is
true for those rings which forms loops (the first coordinate pair
equals the last one).
A read-only containing the starts (inclusive) and ends (exclusive)
of all rings.
Contains, at least, 0 and the amount of coordinate pairs (for
geometries with just one ring)
Idem, but takes a String containing the name (e.g. "EPSG:4326", "cartesian")
or the OGC URI of a CRS. The corresponding CRS instance will be looked up.
asLatLng()
Array of Number
Returns a flat array of latitude-longitude (Y-X) representing this geometry,
in the form [lat1, lng1, lat2, lng2, ... latN, lngN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
asLngLat()
Array of Number
Returns a flat array of longitude-latitude (X-Y) representing this geometry,
in the form [lng1, lat1, lng2, lat2, ... lngN, latN].
Will throw an error if the geometry cannot be converted to latitude-longitude
(i.e. is in a CRS that cannot be reprojected to EPSG:4326).
mapCoords(<Function> fn)
Array of Number
Returns a new array of the form [x1,y1, ... xn,yn], having run the given
Function on every x,y pair of coordinates from self. The Function
must take an Array of 2 Numbers as its first parameter (the coordinate
pair), a Number as its second parameter (the index of the current
coordinate pair, 0-indexed), and must return an Array of 2 Numbers as well.
Takes into account the dimension (dimension 3 works for x,y,z and dimension 4
works for x,y,z,m)
mapRings(<Function> fn)
Array
Runs the given Function once per ring (including each ring in each hull, if
applicable), and returns an Array containing the return values.
The given Function can expect four parameters:
start coordinate (0-indexed, inclusive)
end coordinate (0-indexed, exclusive)
length of the ring (how many coordinates in that ring, also end-start)
A flat Array containing the CRS-relative coordinates or the
geometry, in [x1, y1, x2, y2, ..., xn, yn] form.
rings
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new ring.
hulls
Array of Number
A flat Array containing indices (0-indexed) of the coordinate
pairs that start a new hull.
loops
Array of Boolean
A read-only Array with one Boolean values per ring. The value is
true for those rings which forms loops (the first coordinate pair
equals the last one).
A read-only containing the starts (inclusive) and ends (exclusive)
of all rings.
Contains, at least, 0 and the amount of coordinate pairs (for
geometries with just one ring)
This module contains facilities for easing the task of defining geometries
when a well-known CRS is used for all input coordinates.
Note that this functionality is global to all maps since it must work for
stuff which does not belong to any map, or belongs to more than one map at
the same time.
import { setFactory, factory } from `gleo/src/coords/DefaultGeometry.mjs`;
setFactory(function(coords, opts) {
return new Geometry( myFavouriteCRS, coords, opts);
}
map.center = [100, -500]; // These stand-alone coordinates will internally
// be converted into a `Geometry` of `myFavouriteCRS`
Calling setFactory more than once (either manually or by importing MercatorMap)
is highly discouraged.
When the factory function receives a Geometry, it is returned as is.
In this way, all Gleo functionality that uses this factory will be able to
take as input either stand-alone coordinates, or fully-defined Geometrys,
in a transparent way.
This check is performed by the DefaultGeometry module; users do not need
to check whether the input is a RawGeometry instance when using setFactory().
This class is needed only when there's a need to calculate a bbox that covers
a given set of points. Bounding boxes that can be trivially calculated are best
handled manually as 4-element arrays.
This implementation also assumes that the bounds are parallel to the CRS's axes,
and is not suitable for boundign boxes whenever there's a yaw rotation involved.
A TilePyramid defines the size and disposition of raster tiles.
The concept is equivalent to the "Tile Matrix Set" in the
OGC WMTS specification,
and also equivalent to OpenLayer's TileGrids.
Tile pyramids do not have a concept of "tile size" but rather per-level "scale".
A level will be loaded when the map's (platina's) scale is equal or breater
than the level's.
Given a scale (in terms of CRS units per CSS pixel), returns the
identifier of the pyramid level with the nearest known scale in
the pyramid that is equal or higher than the given one.
Returns undefined if there's no known equal-or-higher scale.
floorLevel(<Number> scale)
String
Given a scale (in terms of CRS units per CSS pixel), returns the
identifier of the pyramid level with the nearest known scale in
the pyramid that is equal or higher than the given one.
Returns undefined if there's no known equal-or-lower scale.
nearestLevel(scale:Number)
String
Given a scale, returns the identifier of the level with the nearest
scale known in the pyramid levels,
"nearest" in terms of "minimum distance in terms of base-2 logarithm"
bboxToTileRange(<String> levelId, <Array of Number> bbox)
Array of Number
Given a bounding box of the form [x1,y1, x2,y2] and the string
identifier for a level of the pyramid, returns a bounding box
containing the integer min/max tile coordinates that overlap the given
bbox.
The return values can be higher than the span. This is a safeguard against
misbehaviour and negative coordinates when requesting tiles across the
antimeridian. When looping through this values, modulo by the tile span.
The bbox is expected to be in the same CRS as the tile pyramid.
tileRangeToBbox(<String> levelId, <Array of Number> range)
Array of Number
Given the identifier of a pyramid level and a tile range of the form
[minX, minY, maxX, maxY], returns the bounding box (in the pyramid's
CRS) that encloses the tiles within the given range.
tileCoordsToBbox(<String> levelId, <Array of Number> coords)
Array of Number
Given the coordinates of a tile (the identifier of a level plus an array
of the form [x,y]), returns a bounding box (of the form [x1,y1, x2,y2])
with the boinding box for that tile (in the pyramid's CRS).
For a tile of the given level and coordinates, returns an array of
tile coordinates for the child tiles: tiles from a lower level (one with
more detail) whose bounding box overlap that of the given tile.
This will be an empty array if there are no child tiles.
Akin to childTiles(), but for the parent tiles: tiles from a higher
level (one with less detail).
This will be an empty array if there are no parent tiles.
Level iterators
Method
Returns
Description
forEachLevel(<Function> fn)
this
Runs the given Functionfn on each level of the pyramid.
The function will receive two parameters: the name of the level (as a String), and
the level definition (as an Object with scale, bbox, spanX, spanY properties).
mapLevels(<Function> fn)
Array
Runs the given Functionfn on each level of the pyramid, and returns an array
containing all the return values from each call.
The function will receive two parameters: the name of the level (as a String), and
the level definition (as an Object with scale, bbox, spanX, spanY properties).
getLevelsCount()
Number
Returns the number of levels in this pyramid.
Note that the names of the levels might not be numeric: this is just the lenght
of an hypothetical array containing the levels.
getLevelDef(<String> name)
Object
Returns the definition of a pyramid level given its identifier/name (or undefined
if there's no level with that identifier).
Creates a TilePyramid for the epsg3857 crs, with one pyramid level for
each "zoom level" between the given minimum and maximum.
The pyramid constructor also takes the (square) size of each tile, in
CSS pixels, in order to calculate the right zoom level to load on any
given scale. Note that the pyramid takes in CSS pixels, but the RasterTileLoader
takes source raster pixels instead.
Abstract wrapper over image/raster files/datasets. Implements a common wrapper
over HTMLImageElement (native to the browser), GeoTIFFs (not native to the
browser).
This class worries only about the raster data and how to fit it into a Glii
Texture. It does not worry abour the geographical component.
Its well-known name (e.g. "EPSG:4326" or "cartesian")
A wrapping delta vector (the wrapPeriodX and wrapPeriodY options)
A way to calculate distance, either
A distance function that takes two points in the CRS, or
An instance of a different CRS that will perform the distance
calculations after reprojecting the points
An bounding box (in the [minX, minY, maxX, maxY] form)
informative of the area in which the CRS makes sense; this is mostly to
prevent users from setting the platina's center too far away.
An informative set of minimum and maximum span; this is mostly to
prevent users from zooming in/out foo far.
Members of bounding boxes, as well as the minimum/maximum span, can have
values of Infinity or -Infinity (or Number.POSITIVE_INFINITY/Number.NEGATIVE_INFINITY).
The wrapping delta vector is meant to draw Acetates multiple times, offsetting
by that value. Also used to wrap coordinates when their X (or Y) component is larger
than half the X (or Y) component of the wrapping delta vector.
It's important to note that the the wrapping vector does not mean that
coordinates wrap, but rather that the display of the coordinates wrap.
Thus, a point at a position P and another point at P+wrap are different,
but will be displayed at the same pixel. (Idem for P+2*wrap, P-wrap and
in general, for P+n*wrap for all natural numbers n).
For geographical CRSs, it's highly recommended to use names that match
a Proj definition. Other functionality, such as the ConformalWMS loader,
depends on the CRS names.
The horizontal length, in CRS units, of the display wrapping.
wrapPeriodY
Number
Infinity
The vertical length, in CRS units, of the display wrapping.
distance
Function
A distance function, that should take two point Geometrys as arguments
and return the distance between them (when given non-point Geometrys,
it shall return the distance between the first coordinate pair of each
Geometry). The units of distance depend on the CRS. They should
be meters for geographical CRSs, and unitless for cartesian.
Whenever it's not trivial or convenient to calculate distances,
calculations can be proxied to another CRS (which must have a distance
function defined). This is useful for geographical CRSs where a CRS
represents a geoid (e.g. the EPSG:4326 CRS represents the WGS84 geoid)
and all CRSs for that geoid use one common distance calculation.
flipAxes
Boolean
false
Used only for OGC services (WMS, WFS, etc). The default false works
for CRSs with an X-Y axis order (or easting-northing, or longitude-latitude).
This should be set to true whenever the CRS definition specifies that
the axes should be in Y-X order (or northing-easting, or latitude-longitude)
(e.g. EPSG:4326 and EPSG:3035).
Gleo Geometrys always store data in X-Y (or easting-northing, or
lng-lat) order, regardless of this setting.
ogcUri
String
""
Used only for OGC API services (OGC API Tiles, etc). This
should be a URI string like "https://www.opengis.net/def/crs/EPSG/0/4326"
that will be used to match metadata.
minSpan
Number
0
The minimum span of a map/platina using the CRS, expressed in CRS units
(meters/degrees/etc) across the diagonal of a platina.
This is an informative value that actuators use to prevent the user from
zooming in too far.
maxSpan
Number
Infinity
The maximum span of a map/platina using the CRS, expressed in CRS units
(meters/degrees/etc) across the diagonal of a platina.
This is an informative value that actuators use to prevent the user from
zooming out too far.
viewableBounds
Array of Number
[-Infinity, -Infinity, Infinity, Infinity]
The practical viewable bounds of the CRS, as an array of the form
[x1, y1, x2, y2].
This is an informative value that actuators use to prevent the user
from moving away from areas where the CRS makes sense.
Values are absolute, not relative to the CRS's offset (important
for instances of offsetCRS).
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
Represents a Coordinate Reference System, with the same properties than a
BaseCRS, but with the [0,0] center of coordinates being offset.
The rationale is the difference of precision between numbers.
A Gleo coordinate is a floating point number, which typically
will be represented by:
8 bytes / 64 bits (Number) when defined by the programmer or red by an API
4 bytes / 32 bits (Float32Array) when stored in a WebGL-friendly typed array
3 bytes / 24 bits (highp float) when running inside a GLSL 1.00 shader
In order to keep the numerical precision, it's important to keep the numbers low
(so the mantissa has a precision of less than one screen pixel).
The way to do so is to offset the coordinates. A system based on vector tiles
does this implicitly (coordinates inside a typical vector tile range from 0 to 4096,
and the CRS coordinate of each tile's corner is the implicit CRS offset).
Gleo does this explicitly, translating coordinates to a offsetCRS which has a center
relatively near the screen center. In other words, when the user pans or zooms the map
far enough from the CRS' origin, then Gleo shall establish a new origin near
the updated user's viewport, and translate (AKA "offset") all Geometrys.
This doesn't lose (significant) precision since numbers are originally stored
in 64-bit floats (Numbers).
Build a new offset CRS, given a point Geometry. The CRS name, wrap
periods and other BaseCRS Options are taken from the Geometry's CRS,
and the offset is the absolute value of the Geometry's coordinates.
Given a set of coordinates [x1, y1, x2, y2, ... xn, yn], returns
those coordinates as if they were using the BaseCRS's (0,0) origin
of coordinates.
offsetFromBase(<Array of Number> xy)
Array of Number
Given a set of coordinates [x1, y1, x2, y2, ... xn, yn] in the
BaseCRS of this CRS, returns those coordinates as if they were using
the origin of coordinates of this offset CRS.
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
The projector is the piece of code in charge of transforming ("reprojecting")
coordinates (from either Coord or CoordNest) into a different BaseCRS.
By default, Gleo only supports projecting from/to EPSG:4326 and EPSG:3857.
The intended way to support any other projections is to inject the
proj4/proj4js dependency via enableProj().
projector works as a Singleton pattern, and cannot be instanced.
Registers the given projection function, so it will be used whenever Gleo
needs to project coordinates from sCRS into dCRS.
enableProj(<Module> proj)
undefined
Expects a reference to the proj4 (AKA proj4js) module. All further reprojections
(including those from Coord.toCRS()) shall be done via the specified module.
enableProj(<undefined> undefined)
undefined
Disables usage of proj4/proj4js, and re-enables Gleo's built-in reprojection code.
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
An adaptation of the EPSG:3857 CRS (aka "spherical web mercator") to the
way that Maplibre-gl-js handles coordinates.
The upper-left (north-west) corner in EPSG:3857 is at [-20037508.34, +20037508.34],
but for maplibre it has to be at [0,0]. The lower-right (south-east) corner is
at [+20037508.34, -20037508.34] in EPSG:3857 but maplibre expects it to be at
[1,1]. Likewise, Null Island (latitude zero, longitude zero) is at [0.5, 0.5].
This is intended to be use in conjunction with maplibre-gleo.
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
offsetFromBase(<Array of Number> xy)
Array of Number
Identity function (all coordinates represented in a Base CRS are already
relative to the 0,0 origin of coordinates).
wrap(<Array of Number> xy, <Array of Number> ref)
Array of Number
Wraps the given coordinate if it's further away from the reference ref
than half the wrap period. This guarantees that the return value is less than
half a period away from the reference.
wrapString(<Array of Number> xys)
Array of Number
Given a linestring array of the form [x1,y2, x2,y2, ... xn,yn], runs wrap()on everyx,y` pair. This ensures that the first point of
the linestring is less than half a period away from the CRS' origin, and
idem with each pair of consecutive points.
Factory method. Expects a string like "EPSG:12345".
Fetches information from https://crs-explorer.proj.org/ and
tries to build a Gleo CRS on a best-effort basis. Registers it via proj4js
as well, assuming enableProj() has been called.
The resulting CRS might lack information such as wrap periods or min/max spans.
Enables this actuator. This will overload the map's setView in order to
intercept all of its calls.
disable()
this
Disables this actuator. All calls to setView will not trigger an easing animation.
inertialSetView(<Setview Options> opts?)
this
Starts an easing animation to (re-)set the map's center and scale to the given one.
This implementation overrides the GleoMap's default setView implementation.
Zoom snap works whenever there's raster stuff in the map
(TileLoaders, ConformalRasters, etc) in the map: it will snap the scale
so that it matches that of the raster (when the scales are close enough)
Yaw snap acts whenever the yaw rotation angle is too close to the target
angle. Its main purpose is to lock the
Bounds clamping actuator. Forces the values of the center so that the it's
always within a bounding box - either ehe CRS's viewableBounds or a set
of user-defined maxBounds.
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.
Attaches an event handler to a DOM event of the HTMLButtonElement for
the control.
Detaches an event handler to a DOM event from the HTMLButtonElement for
the control.
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.
Attaches an event handler to a DOM event of the HTMLButtonElement for
the control.
Detaches an event handler to a DOM event from the HTMLButtonElement for
the control.
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.
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.
Attaches an event handler to a DOM event of the HTMLButtonElement for
the control.
Detaches an event handler to a DOM event from the HTMLButtonElement for
the control.
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.
Attaches an event handler to a DOM event of the HTMLButtonElement for
the control.
Detaches an event handler to a DOM event from the HTMLButtonElement for
the control.
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.
Attaches an event handler to a DOM event of the HTMLButtonElement for
the control.
Detaches an event handler to a DOM event from the HTMLButtonElement for
the control.
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.
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.
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.
/ Defines how newly created points are symbolized. This must be a
/ function that takes in a Geometry and must return an Array of
/ GleoSymbols.
/ Idem, but for newly created lines.
/ Idem, but for newly created polygons.
nodeSymbolizer
Function
*
/ Idem, but for drag nodes, i.e. vertices of lines/polygons being edited.
/ This must be a fucntion that takes two parameters. The second one
/ is a boolean interactive flag (it must return interactive symbols
/ only when this flag is true)
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.
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.
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.
A point Geometry, containing the coordinates in map's CRS where the
event took place.
This is akin to Leaflet's latlng event property.
canvasX
Number
Akin to clientX, but relative to the map's <canvas> element.
canvasY
Number
Akin to clientY, but relative to the map's <canvas> element.
colour
Array of Number
For Acetates set as "queryable" (and GleoSymbols being
drawn in such acetates), this contains the colour of the pixel
the event took place over, as a 4-element array of the form
[r, g, b, a], with values between 0 and 255.
colour
undefined
For Acetates not set as "queryable" (and GleoSymbols
being drawn in such acetates), and for event that happened outside
of the map (e.g. pointerout events), this value will always
be undefined)
value
Number
For scalar field acetates (e.g. AcetateHeatMap) marked as
"queryable", this contains the value for the scalar field for the
pixel where the event took place.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
A point Geometry, containing the coordinates in map's CRS where the
event took place.
This is akin to Leaflet's latlng event property.
canvasX
Number
Akin to clientX, but relative to the map's <canvas> element.
canvasY
Number
Akin to clientY, but relative to the map's <canvas> element.
colour
Array of Number
For Acetates set as "queryable" (and GleoSymbols being
drawn in such acetates), this contains the colour of the pixel
the event took place over, as a 4-element array of the form
[r, g, b, a], with values between 0 and 255.
colour
undefined
For Acetates not set as "queryable" (and GleoSymbols
being drawn in such acetates), and for event that happened outside
of the map (e.g. pointerout events), this value will always
be undefined)
value
Number
For scalar field acetates (e.g. AcetateHeatMap) marked as
"queryable", this contains the value for the scalar field for the
pixel where the event took place.
Gleo maps handle pointer events - such as pointerdown. All pointer
events fired by a map instance are not instances of PointerEvent, but of
GleoPointerEvent.
This means that a map's pointer events have extra properties - most notably
a geometry with the CRS coordinates where the pointer event happened.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A unique identifier for the pointer causing the event.
width
Number
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
height
Number
The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
pressure
Number
The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
tangentialPressure
Number
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
tiltX
Number
The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.
tiltY
Number
The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.
twist
Number
The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
pointerType
String
Indicates the device type that caused the event (mouse, pen, touch, etc.).
isPrimary
Boolean
Indicates if the pointer represents the primary pointer of this pointer type.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
A point Geometry, containing the coordinates in map's CRS where the
event took place.
This is akin to Leaflet's latlng event property.
canvasX
Number
Akin to clientX, but relative to the map's <canvas> element.
canvasY
Number
Akin to clientY, but relative to the map's <canvas> element.
colour
Array of Number
For Acetates set as "queryable" (and GleoSymbols being
drawn in such acetates), this contains the colour of the pixel
the event took place over, as a 4-element array of the form
[r, g, b, a], with values between 0 and 255.
colour
undefined
For Acetates not set as "queryable" (and GleoSymbols
being drawn in such acetates), and for event that happened outside
of the map (e.g. pointerout events), this value will always
be undefined)
value
Number
For scalar field acetates (e.g. AcetateHeatMap) marked as
"queryable", this contains the value for the scalar field for the
pixel where the event took place.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
preventDefault()
Cancels the event (if it is cancelable).
stopImmediatePropagation()
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
stopPropagation()
Stops the propagation of events further along in the DOM.
A unique identifier for the pointer causing the event.
width
Number
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
height
Number
The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
pressure
Number
The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
tangentialPressure
Number
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
tiltX
Number
The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.
tiltY
Number
The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.
twist
Number
The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
pointerType
String
Indicates the device type that caused the event (mouse, pen, touch, etc.).
isPrimary
Boolean
Indicates if the pointer represents the primary pointer of this pointer type.
A boolean value indicating whether or not the event bubbles up through the DOM.
cancelable
Boolean
A boolean value indicating whether the event is cancelable.
composed
Boolean
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget
Boolean
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
defaultPrevented
Boolean
Indicates whether or not the call to event.preventDefault() canceled the event.
eventPhase
Number
Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
isTrusted
Boolean
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
target
Object
A reference to the object to which the event was originally dispatched.
timeStamp
Number
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.
type
String
The case-insensitive name identifying the type of the event.
Gets normalized mouse position from a DOM mouse/pointer event relative to the
element (border excluded) or to the whole page if not specified.
The return value is an array of the form [x, y], in CSS pixels
getScale(<HTMLElement> el)
Object
Computes the CSS scale currently applied on the element.
Returns an object with x and y members as horizontal and vertical scales respectively,
and boundingClientRect as the result of getBoundingClientRect().
Alternative way of fetching geometries from protobuffer vectot tile
features (from https://github.com/mapbox/vector-tile-js ). The only
foreseen usage of this function is as part of ProtobufVectorTileLoader.
The aim is similar to the loadGeometry() method of a vector-tile-js's
VectorTileFeature, with a few following differences:
Skips array nesting
Returns a Gleo RawGeometry instead of an array of arrays of coordinates
Normalizes in-tile coordinates to absolute CRS coordinates, given the
bbox and extent of the tile.
template(<String> str, <Object> data)
String
Simple templating facility, accepts a template string of the form 'Hello {a}, {b}'
and a data object like {a: 'foo', b: 'bar'}, returns evaluated string
('Hello foo, bar'). You can also specify functions instead of strings for
data values — they will be evaluated passing data as an argument.
As HeatMap, but the ramp stops change with the map's scale. While a standard
HeatMap has less apparent heat when zooming in, a ScaledHeatMap aims to
maintain apparent heat on the screen when zooming into hot spots.
The colour ramp should be specified as if the map scale was 1 (i.e. one CSS
pixel per one CRS unit).
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
As HexBin, but the ramp stops change with the map's scale. While a standard
HexBin has less apparent heat when zooming in, a ScaledHexBin aims to
maintain apparent heat on the screen when zooming into hot spots.
The duration of the blur fade-in animation, in milliseconds.
Setting this to zero will make the QuadBin (or HexBin)
render immediately when the map is moved or zoomed. This causes
bins to flicker rapidly, which is generally unpleasant to the
eye.
A value larger than zero will keep rendering semi-transparent
bins each frame, until they "settle down" when the time is over.
A map of intensities to Colours that defines how to
colourize the heatmap. A pixel with an intensity of a stop
will exactly get that colour; any other colours will be
linearly interpolated.
The first key must always be zero, and the keys must be
ordered in strictly ascending order.
Default is:
{
0: [255,0,0,0] // Transparent red
10: [255,0,0,255] // Red
100: [255,255,0,255] // Yellow
1000: [0,255,0,255] // Green
10000: [0,255,255,255] // Cyan
}
Gleo API documentation