Appearance
@bendyline/molen-client/markers
Molen rendering client: three.js wrapper, snapshot sync, interpolation.
ts
import { /* … */ } from '@bendyline/molen-client/markers';Classes
MarkerLayer
A group of screen-sized world markers; add markers with set, advance with update.
Constructors
Constructor
ts
new MarkerLayer(host, options?): MarkerLayer;Parameters
host
options?
Returns
Properties
object
ts
readonly object: Group;Methods
dispose()
ts
dispose(): void;Returns
void
ids()
ts
ids(): string[];Marker ids currently in the layer.
Returns
string[]
pick()
ts
pick(x, y): string | undefined;The front-most drawn marker under a CSS-pixel point, if any.
Parameters
x
number
y
number
Returns
string | undefined
screenPosition()
ts
screenPosition(id): MarkerScreenPosition | undefined;Where a marker's anchor point appears on screen (for DOM callouts), if it exists.
Parameters
id
string
Returns
MarkerScreenPosition | undefined
set()
ts
set(markers): void;Replace the marker set. Markers are matched by id, so unchanged images are not reloaded.
Parameters
markers
readonly MarkerSpec[]
Returns
void
setVisible()
ts
setVisible(visible): void;Parameters
visible
boolean
Returns
void
update()
ts
update(cameraPosition): void;Per frame: snap to ground, fade, budget, and size markers for the current camera. Pass the camera's absolute world position (the one given to setCamera).
Parameters
cameraPosition
readonly [number, number, number]
Returns
void
Interfaces
MarkerHost
What a marker layer needs from a renderer; Renderer satisfies it, tests can fake it.
Properties
camera
ts
readonly camera: Camera;worldRoot
ts
readonly worldRoot: Object3D;Parent for world-space objects (rebased near the camera by the renderer).
Methods
getViewportSize()
ts
getViewportSize(): [number, number];Drawing size in CSS pixels.
Returns
[number, number]
MarkerImageStyle
Properties
borderColor?
ts
optional borderColor?: string;borderWidth?
ts
optional borderWidth?: number;Border width in CSS pixels (default 3).
createCanvas?
ts
optional createCanvas?: (width, height) => CanvasLike;Canvas factory; defaults to OffscreenCanvas, then document.createElement('canvas').
Parameters
width
number
height
number
Returns
CanvasLike
pixelRatio?
ts
optional pixelRatio?: number;Resolution multiplier (default 2 for sharp sprites on high-DPI screens).
radius?
ts
optional radius?: number;Corner radius in CSS pixels (default 8).
shadow?
ts
optional shadow?: number;Shadow blur in CSS pixels; 0 for none (default 6).
shadowColor?
ts
optional shadowColor?: string;size?
ts
optional size?: number;Image edge length in CSS pixels, before border and tail (default 52).
tail?
ts
optional tail?: number;Pointer tail height in CSS pixels; 0 for none (default 9).
MarkerLayerOptions
Properties
declutter?
ts
optional declutter?:
| boolean
| {
padding?: number;
};Hide markers whose on-screen footprints overlap a more important one: higher priority first, then markers already shown, then the nearest. A shown marker keeps its place until the inner part of its footprint is covered, so pins do not flicker as the camera moves; a newcomer needs its whole footprint clear. padding adds CSS pixels around each footprint (default 4). Off by default.
fade?
ts
optional fade?: object;Distances (meters) over which markers fade out: full at near, gone at far.
far
ts
far: number;near
ts
near: number;fadeMs?
ts
optional fadeMs?: number;Milliseconds a marker takes to fade in or out as it is shown or hidden (default 180; 0 pops).
groundHeight?
ts
optional groundHeight?: (x, z) => number | undefined;Ground height at world X/Z, or undefined while unknown. Required for ground-snapped markers.
Parameters
x
number
z
number
Returns
number | undefined
hideUntilGrounded?
ts
optional hideUntilGrounded?: boolean;Hide ground-snapped markers until their ground height is known (default true).
maxVisible?
ts
optional maxVisible?: number;Most markers drawn at once; extras nearest last are hidden (default 256).
occlude?
ts
optional occlude?: boolean;Hide markers behind terrain and buildings (default true).
renderOrder?
ts
optional renderOrder?: number;MarkerScreenPosition
Properties
distance
ts
distance: number;Distance from the camera in meters.
visible
ts
visible: boolean;In front of the camera and inside the viewport.
x
ts
x: number;CSS pixels from the viewport's left edge.
y
ts
y: number;CSS pixels from the viewport's top edge.
MarkerSpec
Properties
anchor?
ts
optional anchor?: "bottom" | "center";Which image point sits on the position: 'bottom' for pins (default), or 'center'.
elevation?
ts
optional elevation?: number;Meters above the ground when ground-snapped (default 0).
id
ts
id: string;image
ts
image: MarkerImage;priority?
ts
optional priority?: number;Higher priority markers are kept first when over budget (default 0).
size?
ts
optional size?: number;On-screen height in CSS pixels (default 56).
x
ts
x: number;World X in meters.
y?
ts
optional y?: number;Absolute world height; omit to sit on the ground (groundHeight + elevation).
z
ts
z: number;World Z in meters.
Type Aliases
MarkerImage
ts
type MarkerImage = TexImageSource | OffscreenCanvas | string;An image a marker shows: a canvas, bitmap or image element, or a URL to load.
Functions
composeMarkerImage()
ts
function composeMarkerImage(image, style?): CanvasLike;Draw image (cover-cropped to a square) inside a bordered, rounded frame with an optional tail, returning a canvas ready for MarkerSpec.image. Its bottom-center is the pin point.
Parameters
image
CanvasImageSource & object
style?
Returns
CanvasLike
createMarkerLayer()
ts
function createMarkerLayer(host, options?): MarkerLayer;Create a marker layer and attach it under the host's world root.
Parameters
host
options?
Returns
projectWorldToScreen()
ts
function projectWorldToScreen(host, position): MarkerScreenPosition;Project an absolute world position (the coordinates you give markers and cameras) to CSS pixels, accounting for the renderer's floating-origin rebase.
Parameters
host
position
readonly [number, number, number]