isard 0.6.1 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/overlay.js CHANGED
@@ -9,6 +9,18 @@ const ANCHOR_TRANSLATE = {
9
9
  'bottom-left': 'translate(0, -100%)',
10
10
  'bottom-right': 'translate(-100%, -100%)',
11
11
  };
12
+ /** Where the anchor lies within the element, CSS percentages: the stem of a raised marker starts there */
13
+ const ANCHOR_POINT = {
14
+ center: ['50%', '50%'],
15
+ top: ['50%', '0'],
16
+ bottom: ['50%', '100%'],
17
+ left: ['0', '50%'],
18
+ right: ['100%', '50%'],
19
+ 'top-left': ['0', '0'],
20
+ 'top-right': ['100%', '0'],
21
+ 'bottom-left': ['0', '100%'],
22
+ 'bottom-right': ['100%', '100%'],
23
+ };
12
24
  /** Overlays further than this out of the canvas (CSS pixels) are hidden: no part of them can show, and huge
13
25
  * transforms near the horizon would only cost the compositor */
14
26
  const MARGIN = 500;
@@ -28,9 +40,10 @@ class Emitter {
28
40
  listener(event);
29
41
  }
30
42
  }
31
- /** Moves `element` so that its anchor sits on `lonLat`, or hides it when the position is out of sight */
32
- function place(map, element, lonLat, anchor, offset, size) {
33
- const point = map.project(lonLat);
43
+ /** Moves `element` so that its anchor sits on `lonLat`, `height` metres above the ground, or hides it when the
44
+ * position is out of sight; returns the screen point */
45
+ function place(map, element, lonLat, height, anchor, offset, size) {
46
+ const point = map.project(lonLat, height);
34
47
  const visible = point !== undefined &&
35
48
  point[0] > -MARGIN &&
36
49
  point[0] < size[0] + MARGIN &&
@@ -38,13 +51,14 @@ function place(map, element, lonLat, anchor, offset, size) {
38
51
  point[1] < size[1] + MARGIN;
39
52
  if (!visible) {
40
53
  element.style.display = 'none';
41
- return;
54
+ return undefined;
42
55
  }
43
56
  element.style.display = '';
44
57
  // Whole pixels: a fractional translation blurs text and icons
45
58
  const x = Math.round(point[0] + offset[0]);
46
59
  const y = Math.round(point[1] + offset[1]);
47
60
  element.style.transform = `translate(${x}px, ${y}px) ${ANCHOR_TRANSLATE[anchor]}`;
61
+ return point;
48
62
  }
49
63
  /** Round pin, its tip at the bottom: the default marker */
50
64
  function pin() {
@@ -63,6 +77,11 @@ export class Marker {
63
77
  offset;
64
78
  draggable;
65
79
  lonLat = [0, 0];
80
+ height;
81
+ /** Metres above the ground of what the marker stands on, where its stem ends */
82
+ base = 0;
83
+ /** The line from a raised marker down to the ground */
84
+ stem;
66
85
  map;
67
86
  popup;
68
87
  /** While pressed: the press point and the gap between the pointer and the marker's position */
@@ -75,6 +94,11 @@ export class Marker {
75
94
  this.anchor = options.anchor ?? (options.element ? 'center' : 'bottom');
76
95
  this.offset = options.offset ?? [0, 0];
77
96
  this.draggable = options.draggable ?? false;
97
+ this.height = options.height ?? 0;
98
+ this.stem = document.createElement('div');
99
+ this.stem.className = 'isard-marker-stem';
100
+ [this.stem.style.left, this.stem.style.top] = ANCHOR_POINT[this.anchor];
101
+ this.element.append(this.stem);
78
102
  this.element.classList.add('isard-marker');
79
103
  if (options.className)
80
104
  this.element.classList.add(...options.className.split(/\s+/).filter(Boolean));
@@ -99,6 +123,18 @@ export class Marker {
99
123
  this.popup.setLonLat(this.lonLat);
100
124
  return this;
101
125
  }
126
+ getHeight() {
127
+ return this.height;
128
+ }
129
+ /** Metres above the ground: a raised marker has a stem down to `base` metres, what it stands on (a roof, a mesh;
130
+ * the ground by default); its popup is raised too */
131
+ setHeight(height, base = 0) {
132
+ this.height = Number.isFinite(height) ? height : 0;
133
+ this.base = Number.isFinite(base) ? Math.min(base, this.height) : 0;
134
+ this.popup?.setHeight(this.height);
135
+ this.map?.positionOverlay(this);
136
+ return this;
137
+ }
102
138
  setOffset(offset) {
103
139
  this.offset = [offset[0], offset[1]];
104
140
  this.map?.positionOverlay(this);
@@ -117,6 +153,7 @@ export class Marker {
117
153
  setPopup(popup) {
118
154
  this.popup?.remove();
119
155
  this.popup = popup;
156
+ popup?.setHeight(this.height);
120
157
  return this;
121
158
  }
122
159
  getPopup() {
@@ -155,8 +192,19 @@ export class Marker {
155
192
  }
156
193
  /** @internal */
157
194
  position(size) {
158
- if (this.map)
159
- place(this.map, this.element, this.lonLat, this.anchor, this.offset, size);
195
+ if (!this.map)
196
+ return;
197
+ const top = place(this.map, this.element, this.lonLat, this.height, this.anchor, this.offset, size);
198
+ const ground = top && this.height !== this.base ? this.map.project(this.lonLat, this.base) : undefined;
199
+ if (!top || !ground) {
200
+ this.stem.style.display = 'none';
201
+ return;
202
+ }
203
+ // From the anchor down to what it stands on, a line turned toward it
204
+ const [dx, dy] = [ground[0] - top[0], ground[1] - top[1]];
205
+ this.stem.style.display = '';
206
+ this.stem.style.height = `${Math.hypot(dx, dy)}px`;
207
+ this.stem.style.transform = `rotate(${Math.atan2(dy, dx) - Math.PI / 2}rad)`;
160
208
  }
161
209
  local(e) {
162
210
  const rect = this.map?.getCanvas().getBoundingClientRect();
@@ -166,6 +214,7 @@ export class Marker {
166
214
  this.swallowClick = false;
167
215
  if (!this.draggable || !this.map || e.button !== 0)
168
216
  return;
217
+ // The gap to the position on the ground, below a raised marker
169
218
  const point = this.map.project(this.lonLat);
170
219
  const at = this.local(e);
171
220
  if (!point || !at)
@@ -233,6 +282,7 @@ export class Popup {
233
282
  events = new Emitter();
234
283
  offset;
235
284
  lonLat = [0, 0];
285
+ height = 0;
236
286
  map;
237
287
  stopListening;
238
288
  constructor(options = {}) {
@@ -276,6 +326,15 @@ export class Popup {
276
326
  this.map?.positionOverlay(this);
277
327
  return this;
278
328
  }
329
+ getHeight() {
330
+ return this.height;
331
+ }
332
+ /** Metres above the ground (default 0); a marker's popup follows the marker's height */
333
+ setHeight(height) {
334
+ this.height = Number.isFinite(height) ? height : 0;
335
+ this.map?.positionOverlay(this);
336
+ return this;
337
+ }
279
338
  /** Content from an HTML string: only for trusted HTML (use `setText` for user or remote data) */
280
339
  setHTML(html) {
281
340
  const template = document.createElement('template');
@@ -328,7 +387,7 @@ export class Popup {
328
387
  /** @internal */
329
388
  position(size) {
330
389
  if (this.map)
331
- place(this.map, this.container, this.lonLat, this.anchor, this.offset, size);
390
+ place(this.map, this.container, this.lonLat, this.height, this.anchor, this.offset, size);
332
391
  }
333
392
  }
334
393
  //# sourceMappingURL=overlay.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * DOM overlays tied to a position: markers and popups. The map places them all in one pass after each frame it draws\n * (camera moves, finer relief arriving), with a CSS transform from `map.project`: the browser only composites them,\n * nothing is laid out again.\n */\nimport type { GeoMap } from './map.ts';\nimport type { LonLat, Point } from './types.ts';\n\n/** Which part of the element sits on the position */\nexport type Anchor =\n | 'center'\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right';\n\nconst ANCHOR_TRANSLATE: Record<Anchor, string> = {\n center: 'translate(-50%, -50%)',\n top: 'translate(-50%, 0)',\n bottom: 'translate(-50%, -100%)',\n left: 'translate(0, -50%)',\n right: 'translate(-100%, -50%)',\n 'top-left': 'translate(0, 0)',\n 'top-right': 'translate(-100%, 0)',\n 'bottom-left': 'translate(0, -100%)',\n 'bottom-right': 'translate(-100%, -100%)',\n};\n\n/** Overlays further than this out of the canvas (CSS pixels) are hidden: no part of them can show, and huge\n * transforms near the horizon would only cost the compositor */\nconst MARGIN = 500;\n/** A press on a draggable marker that moves less than this (CSS pixels) is a click */\nconst DRAG_TOLERANCE = 3;\n\n/** @internal What the map places after each frame */\nexport interface Positioned {\n /** Places the overlay for the current camera; `size` is the canvas size in CSS pixels */\n position(size: Point): void;\n}\n\n/** Typed listeners of an overlay */\nclass Emitter<E> {\n private readonly listeners: { [K in keyof E]?: Set<(event: E[K]) => void> } = {};\n\n on<K extends keyof E>(type: K, listener: (event: E[K]) => void): () => void {\n const set = this.listeners[type] ?? new Set();\n this.listeners[type] = set;\n set.add(listener);\n return () => set.delete(listener);\n }\n\n emit<K extends keyof E>(type: K, event: E[K]): void {\n for (const listener of this.listeners[type] ?? []) listener(event);\n }\n}\n\n/** Moves `element` so that its anchor sits on `lonLat`, or hides it when the position is out of sight */\nfunction place(map: GeoMap, element: HTMLElement, lonLat: LonLat, anchor: Anchor, offset: Point, size: Point): void {\n const point = map.project(lonLat);\n const visible =\n point !== undefined &&\n point[0] > -MARGIN &&\n point[0] < size[0] + MARGIN &&\n point[1] > -MARGIN &&\n point[1] < size[1] + MARGIN;\n if (!visible) {\n element.style.display = 'none';\n return;\n }\n element.style.display = '';\n // Whole pixels: a fractional translation blurs text and icons\n const x = Math.round(point[0] + offset[0]);\n const y = Math.round(point[1] + offset[1]);\n element.style.transform = `translate(${x}px, ${y}px) ${ANCHOR_TRANSLATE[anchor]}`;\n}\n\n/** Round pin, its tip at the bottom: the default marker */\nfunction pin(): HTMLElement {\n const element = document.createElement('div');\n element.innerHTML =\n '<svg class=\"isard-marker-pin\" width=\"25\" height=\"34\" viewBox=\"0 0 25 34\" aria-hidden=\"true\">' +\n '<path fill=\"currentColor\" stroke=\"rgb(0 0 0 / 0.25)\" d=\"M12.5 33.5C12.5 33.5 .5 20.6 .5 12.5a12 12 0 0 1 24 0' +\n 'c0 8.1-12 21-12 21z\"/><circle cx=\"12.5\" cy=\"12.5\" r=\"4.5\" fill=\"#fff\"/></svg>';\n return element;\n}\n\nexport interface MarkerOptions {\n /** The element to show (default: a round pin) */\n element?: HTMLElement;\n /** Which part of the element sits on the position (default 'center' with an element of your own, 'bottom' for the\n * default pin) */\n anchor?: Anchor;\n /** Shift from the anchor, CSS pixels (default [0, 0]) */\n offset?: Point;\n /** The marker can be dragged over the map, on the relief (default false) */\n draggable?: boolean;\n /** Classes added to the element, space separated */\n className?: string;\n}\n\nexport interface MarkerEvent {\n target: Marker;\n lonLat: LonLat;\n}\n\nexport interface MarkerEvents {\n dragstart: MarkerEvent;\n drag: MarkerEvent;\n dragend: MarkerEvent;\n}\n\n/** An element at a position on the map, optionally draggable */\nexport class Marker {\n private readonly element: HTMLElement;\n private readonly anchor: Anchor;\n private readonly events = new Emitter<MarkerEvents>();\n private offset: Point;\n private draggable: boolean;\n private lonLat: LonLat = [0, 0];\n private map: GeoMap | undefined;\n private popup: Popup | undefined;\n /** While pressed: the press point and the gap between the pointer and the marker's position */\n private grab: { start: Point; gap: Point } | undefined;\n private dragging = false;\n /** The click that ends a drag is not a click on the marker */\n private swallowClick = false;\n\n constructor(options: MarkerOptions = {}) {\n this.element = options.element ?? pin();\n this.anchor = options.anchor ?? (options.element ? 'center' : 'bottom');\n this.offset = options.offset ?? [0, 0];\n this.draggable = options.draggable ?? false;\n this.element.classList.add('isard-marker');\n if (options.className) this.element.classList.add(...options.className.split(/\\s+/).filter(Boolean));\n this.element.classList.toggle('isard-marker-draggable', this.draggable);\n this.element.addEventListener('pointerdown', (e) => this.down(e));\n this.element.addEventListener('pointermove', (e) => this.move(e));\n this.element.addEventListener('pointerup', (e) => this.up(e));\n this.element.addEventListener('pointercancel', (e) => this.up(e));\n this.element.addEventListener('click', (e) => this.click(e), { capture: true });\n }\n\n getElement(): HTMLElement {\n return this.element;\n }\n\n getLonLat(): LonLat {\n return [...this.lonLat];\n }\n\n setLonLat(lonLat: LonLat): this {\n this.lonLat = [lonLat[0], lonLat[1]];\n this.map?.positionOverlay(this);\n // An open popup of the marker goes with it\n if (this.popup?.isOpen()) this.popup.setLonLat(this.lonLat);\n return this;\n }\n\n setOffset(offset: Point): this {\n this.offset = [offset[0], offset[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n setDraggable(draggable: boolean): this {\n this.draggable = draggable;\n this.element.classList.toggle('isard-marker-draggable', draggable);\n return this;\n }\n\n isDraggable(): boolean {\n return this.draggable;\n }\n\n /** A popup that a click on the marker opens and closes, at the marker's position; give it an offset clearing the\n * marker (with the default pin, [0, -34]) */\n setPopup(popup: Popup | undefined): this {\n this.popup?.remove();\n this.popup = popup;\n return this;\n }\n\n getPopup(): Popup | undefined {\n return this.popup;\n }\n\n /** Opens the marker's popup, or closes it if open */\n togglePopup(): this {\n if (!this.popup || !this.map) return this;\n if (this.popup.isOpen()) this.popup.remove();\n else this.popup.setLonLat(this.lonLat).addTo(this.map);\n return this;\n }\n\n /** Listens to the drag of the marker; returns the function that stops listening */\n on<K extends keyof MarkerEvents>(type: K, listener: (event: MarkerEvents[K]) => void): () => void {\n return this.events.on(type, listener);\n }\n\n addTo(map: GeoMap): this {\n if (this.map === map) return this;\n this.remove();\n this.map = map;\n map.attachOverlay(this, this.element);\n return this;\n }\n\n remove(): this {\n this.popup?.remove();\n this.map?.detachOverlay(this, this.element);\n this.map = undefined;\n this.grab = undefined;\n this.dragging = false;\n this.element.classList.remove('isard-marker-dragging');\n return this;\n }\n\n /** @internal */\n position(size: Point): void {\n if (this.map) place(this.map, this.element, this.lonLat, this.anchor, this.offset, size);\n }\n\n private local(e: PointerEvent): Point | undefined {\n const rect = this.map?.getCanvas().getBoundingClientRect();\n return rect && [e.clientX - rect.left, e.clientY - rect.top];\n }\n\n private down(e: PointerEvent): void {\n this.swallowClick = false;\n if (!this.draggable || !this.map || e.button !== 0) return;\n const point = this.map.project(this.lonLat);\n const at = this.local(e);\n if (!point || !at) return;\n // The map must not start panning under the marker\n e.stopPropagation();\n e.preventDefault();\n this.element.setPointerCapture(e.pointerId);\n // The grabbed spot of the marker stays under the pointer, wherever the element was pressed\n this.grab = { start: at, gap: [at[0] - point[0], at[1] - point[1]] };\n this.dragging = false;\n }\n\n private move(e: PointerEvent): void {\n const at = this.local(e);\n if (!this.grab || !this.map || !at) return;\n e.stopPropagation();\n const { start, gap } = this.grab;\n if (!this.dragging && Math.hypot(at[0] - start[0], at[1] - start[1]) < DRAG_TOLERANCE) return;\n // On the relief: the ground under the point, read back from the picking pass\n const lonLat = this.map.unproject([at[0] - gap[0], at[1] - gap[1]]);\n if (!lonLat) return;\n if (!this.dragging) {\n this.dragging = true;\n this.element.classList.add('isard-marker-dragging');\n this.events.emit('dragstart', { target: this, lonLat: this.getLonLat() });\n }\n this.setLonLat(lonLat);\n this.events.emit('drag', { target: this, lonLat: this.getLonLat() });\n }\n\n private up(e: PointerEvent): void {\n if (!this.grab) return;\n e.stopPropagation();\n this.grab = undefined;\n if (this.element.hasPointerCapture(e.pointerId)) this.element.releasePointerCapture(e.pointerId);\n if (!this.dragging) return;\n this.dragging = false;\n this.swallowClick = true;\n this.element.classList.remove('isard-marker-dragging');\n this.events.emit('dragend', { target: this, lonLat: this.getLonLat() });\n }\n\n private click(e: MouseEvent): void {\n if (this.swallowClick) {\n this.swallowClick = false;\n e.stopImmediatePropagation();\n e.preventDefault();\n return;\n }\n if (this.popup) this.togglePopup();\n }\n}\n\nexport interface PopupOptions {\n /** A × button in the corner (default true) */\n closeButton?: boolean;\n /** A click on the map elsewhere closes the popup (default true) */\n closeOnClick?: boolean;\n /** CSS max-width of the popup (default '240px') */\n maxWidth?: string;\n /** Classes added to the popup, space separated */\n className?: string;\n /** Which part of the popup sits on the position, its tip there (default 'bottom': the popup is above the point) */\n anchor?: Anchor;\n /** Shift from the anchor, CSS pixels (default [0, 0]) */\n offset?: Point;\n}\n\nexport interface PopupEvents {\n open: { target: Popup };\n close: { target: Popup };\n}\n\n/** A box of content at a position, its tip pointing at it */\nexport class Popup {\n private readonly container: HTMLElement;\n private readonly content: HTMLElement;\n private readonly closeButton: HTMLButtonElement | undefined;\n private readonly anchor: Anchor;\n private readonly closeOnClick: boolean;\n private readonly events = new Emitter<PopupEvents>();\n private offset: Point;\n private lonLat: LonLat = [0, 0];\n private map: GeoMap | undefined;\n private stopListening: (() => void) | undefined;\n\n constructor(options: PopupOptions = {}) {\n this.anchor = options.anchor ?? 'bottom';\n this.offset = options.offset ?? [0, 0];\n this.closeOnClick = options.closeOnClick ?? true;\n this.container = document.createElement('div');\n this.container.className = `isard-popup isard-popup-anchor-${this.anchor}`;\n if (options.className) this.container.classList.add(...options.className.split(/\\s+/).filter(Boolean));\n this.container.style.maxWidth = options.maxWidth ?? '240px';\n const tip = document.createElement('div');\n tip.className = 'isard-popup-tip';\n this.content = document.createElement('div');\n this.content.className = 'isard-popup-content';\n if (options.closeButton ?? true) {\n this.container.classList.add('isard-popup-has-close');\n this.closeButton = document.createElement('button');\n this.closeButton.type = 'button';\n this.closeButton.className = 'isard-popup-close';\n this.closeButton.setAttribute('aria-label', 'Close popup');\n this.closeButton.textContent = '×';\n this.closeButton.addEventListener('click', () => this.remove());\n this.content.append(this.closeButton);\n }\n this.container.append(tip, this.content);\n }\n\n getElement(): HTMLElement {\n return this.container;\n }\n\n getLonLat(): LonLat {\n return [...this.lonLat];\n }\n\n setLonLat(lonLat: LonLat): this {\n this.lonLat = [lonLat[0], lonLat[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n setOffset(offset: Point): this {\n this.offset = [offset[0], offset[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n /** Content from an HTML string: only for trusted HTML (use `setText` for user or remote data) */\n setHTML(html: string): this {\n const template = document.createElement('template');\n template.innerHTML = html;\n return this.setDOMContent(template.content);\n }\n\n setText(text: string): this {\n return this.setDOMContent(document.createTextNode(text));\n }\n\n setDOMContent(node: Node): this {\n this.content.replaceChildren(node);\n if (this.closeButton) this.content.append(this.closeButton);\n this.map?.positionOverlay(this);\n return this;\n }\n\n isOpen(): boolean {\n return this.map !== undefined;\n }\n\n /** Listens to the popup opening or closing; returns the function that stops listening */\n on<K extends keyof PopupEvents>(type: K, listener: (event: PopupEvents[K]) => void): () => void {\n return this.events.on(type, listener);\n }\n\n addTo(map: GeoMap): this {\n if (this.map === map) return this;\n this.remove();\n this.map = map;\n map.attachOverlay(this, this.container);\n if (this.closeOnClick) {\n // From the next task on: a popup opened by a map click must not be closed by that same click\n queueMicrotask(() => {\n if (this.map === map && !this.stopListening) this.stopListening = map.on('click', () => this.remove());\n });\n }\n this.events.emit('open', { target: this });\n return this;\n }\n\n remove(): this {\n if (!this.map) return this;\n this.stopListening?.();\n this.stopListening = undefined;\n this.map.detachOverlay(this, this.container);\n this.map = undefined;\n this.events.emit('close', { target: this });\n return this;\n }\n\n /** @internal */\n position(size: Point): void {\n if (this.map) place(this.map, this.container, this.lonLat, this.anchor, this.offset, size);\n }\n}\n"]}
1
+ {"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * DOM overlays tied to a position: markers and popups. The map places them all in one pass after each frame it draws\n * (camera moves, finer relief arriving), with a CSS transform from `map.project`: the browser only composites them,\n * nothing is laid out again.\n */\nimport type { GeoMap } from './map.ts';\nimport type { LonLat, Point } from './types.ts';\n\n/** Which part of the element sits on the position */\nexport type Anchor =\n | 'center'\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right';\n\nconst ANCHOR_TRANSLATE: Record<Anchor, string> = {\n center: 'translate(-50%, -50%)',\n top: 'translate(-50%, 0)',\n bottom: 'translate(-50%, -100%)',\n left: 'translate(0, -50%)',\n right: 'translate(-100%, -50%)',\n 'top-left': 'translate(0, 0)',\n 'top-right': 'translate(-100%, 0)',\n 'bottom-left': 'translate(0, -100%)',\n 'bottom-right': 'translate(-100%, -100%)',\n};\n\n/** Where the anchor lies within the element, CSS percentages: the stem of a raised marker starts there */\nconst ANCHOR_POINT: Record<Anchor, [string, string]> = {\n center: ['50%', '50%'],\n top: ['50%', '0'],\n bottom: ['50%', '100%'],\n left: ['0', '50%'],\n right: ['100%', '50%'],\n 'top-left': ['0', '0'],\n 'top-right': ['100%', '0'],\n 'bottom-left': ['0', '100%'],\n 'bottom-right': ['100%', '100%'],\n};\n\n/** Overlays further than this out of the canvas (CSS pixels) are hidden: no part of them can show, and huge\n * transforms near the horizon would only cost the compositor */\nconst MARGIN = 500;\n/** A press on a draggable marker that moves less than this (CSS pixels) is a click */\nconst DRAG_TOLERANCE = 3;\n\n/** @internal What the map places after each frame */\nexport interface Positioned {\n /** Places the overlay for the current camera; `size` is the canvas size in CSS pixels */\n position(size: Point): void;\n}\n\n/** Typed listeners of an overlay */\nclass Emitter<E> {\n private readonly listeners: { [K in keyof E]?: Set<(event: E[K]) => void> } = {};\n\n on<K extends keyof E>(type: K, listener: (event: E[K]) => void): () => void {\n const set = this.listeners[type] ?? new Set();\n this.listeners[type] = set;\n set.add(listener);\n return () => set.delete(listener);\n }\n\n emit<K extends keyof E>(type: K, event: E[K]): void {\n for (const listener of this.listeners[type] ?? []) listener(event);\n }\n}\n\n/** Moves `element` so that its anchor sits on `lonLat`, `height` metres above the ground, or hides it when the\n * position is out of sight; returns the screen point */\nfunction place(\n map: GeoMap,\n element: HTMLElement,\n lonLat: LonLat,\n height: number,\n anchor: Anchor,\n offset: Point,\n size: Point,\n): Point | undefined {\n const point = map.project(lonLat, height);\n const visible =\n point !== undefined &&\n point[0] > -MARGIN &&\n point[0] < size[0] + MARGIN &&\n point[1] > -MARGIN &&\n point[1] < size[1] + MARGIN;\n if (!visible) {\n element.style.display = 'none';\n return undefined;\n }\n element.style.display = '';\n // Whole pixels: a fractional translation blurs text and icons\n const x = Math.round(point[0] + offset[0]);\n const y = Math.round(point[1] + offset[1]);\n element.style.transform = `translate(${x}px, ${y}px) ${ANCHOR_TRANSLATE[anchor]}`;\n return point;\n}\n\n/** Round pin, its tip at the bottom: the default marker */\nfunction pin(): HTMLElement {\n const element = document.createElement('div');\n element.innerHTML =\n '<svg class=\"isard-marker-pin\" width=\"25\" height=\"34\" viewBox=\"0 0 25 34\" aria-hidden=\"true\">' +\n '<path fill=\"currentColor\" stroke=\"rgb(0 0 0 / 0.25)\" d=\"M12.5 33.5C12.5 33.5 .5 20.6 .5 12.5a12 12 0 0 1 24 0' +\n 'c0 8.1-12 21-12 21z\"/><circle cx=\"12.5\" cy=\"12.5\" r=\"4.5\" fill=\"#fff\"/></svg>';\n return element;\n}\n\nexport interface MarkerOptions {\n /** The element to show (default: a round pin) */\n element?: HTMLElement;\n /** Which part of the element sits on the position (default 'center' with an element of your own, 'bottom' for the\n * default pin) */\n anchor?: Anchor;\n /** Shift from the anchor, CSS pixels (default [0, 0]) */\n offset?: Point;\n /** The marker can be dragged over the map, on the relief (default false) */\n draggable?: boolean;\n /** Metres above the ground (default 0): a raised marker has a stem down to its position on the ground */\n height?: number;\n /** Classes added to the element, space separated */\n className?: string;\n}\n\nexport interface MarkerEvent {\n target: Marker;\n lonLat: LonLat;\n}\n\nexport interface MarkerEvents {\n dragstart: MarkerEvent;\n drag: MarkerEvent;\n dragend: MarkerEvent;\n}\n\n/** An element at a position on the map, optionally draggable */\nexport class Marker {\n private readonly element: HTMLElement;\n private readonly anchor: Anchor;\n private readonly events = new Emitter<MarkerEvents>();\n private offset: Point;\n private draggable: boolean;\n private lonLat: LonLat = [0, 0];\n private height: number;\n /** Metres above the ground of what the marker stands on, where its stem ends */\n private base = 0;\n /** The line from a raised marker down to the ground */\n private readonly stem: HTMLElement;\n private map: GeoMap | undefined;\n private popup: Popup | undefined;\n /** While pressed: the press point and the gap between the pointer and the marker's position */\n private grab: { start: Point; gap: Point } | undefined;\n private dragging = false;\n /** The click that ends a drag is not a click on the marker */\n private swallowClick = false;\n\n constructor(options: MarkerOptions = {}) {\n this.element = options.element ?? pin();\n this.anchor = options.anchor ?? (options.element ? 'center' : 'bottom');\n this.offset = options.offset ?? [0, 0];\n this.draggable = options.draggable ?? false;\n this.height = options.height ?? 0;\n this.stem = document.createElement('div');\n this.stem.className = 'isard-marker-stem';\n [this.stem.style.left, this.stem.style.top] = ANCHOR_POINT[this.anchor];\n this.element.append(this.stem);\n this.element.classList.add('isard-marker');\n if (options.className) this.element.classList.add(...options.className.split(/\\s+/).filter(Boolean));\n this.element.classList.toggle('isard-marker-draggable', this.draggable);\n this.element.addEventListener('pointerdown', (e) => this.down(e));\n this.element.addEventListener('pointermove', (e) => this.move(e));\n this.element.addEventListener('pointerup', (e) => this.up(e));\n this.element.addEventListener('pointercancel', (e) => this.up(e));\n this.element.addEventListener('click', (e) => this.click(e), { capture: true });\n }\n\n getElement(): HTMLElement {\n return this.element;\n }\n\n getLonLat(): LonLat {\n return [...this.lonLat];\n }\n\n setLonLat(lonLat: LonLat): this {\n this.lonLat = [lonLat[0], lonLat[1]];\n this.map?.positionOverlay(this);\n // An open popup of the marker goes with it\n if (this.popup?.isOpen()) this.popup.setLonLat(this.lonLat);\n return this;\n }\n\n getHeight(): number {\n return this.height;\n }\n\n /** Metres above the ground: a raised marker has a stem down to `base` metres, what it stands on (a roof, a mesh;\n * the ground by default); its popup is raised too */\n setHeight(height: number, base = 0): this {\n this.height = Number.isFinite(height) ? height : 0;\n this.base = Number.isFinite(base) ? Math.min(base, this.height) : 0;\n this.popup?.setHeight(this.height);\n this.map?.positionOverlay(this);\n return this;\n }\n\n setOffset(offset: Point): this {\n this.offset = [offset[0], offset[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n setDraggable(draggable: boolean): this {\n this.draggable = draggable;\n this.element.classList.toggle('isard-marker-draggable', draggable);\n return this;\n }\n\n isDraggable(): boolean {\n return this.draggable;\n }\n\n /** A popup that a click on the marker opens and closes, at the marker's position; give it an offset clearing the\n * marker (with the default pin, [0, -34]) */\n setPopup(popup: Popup | undefined): this {\n this.popup?.remove();\n this.popup = popup;\n popup?.setHeight(this.height);\n return this;\n }\n\n getPopup(): Popup | undefined {\n return this.popup;\n }\n\n /** Opens the marker's popup, or closes it if open */\n togglePopup(): this {\n if (!this.popup || !this.map) return this;\n if (this.popup.isOpen()) this.popup.remove();\n else this.popup.setLonLat(this.lonLat).addTo(this.map);\n return this;\n }\n\n /** Listens to the drag of the marker; returns the function that stops listening */\n on<K extends keyof MarkerEvents>(type: K, listener: (event: MarkerEvents[K]) => void): () => void {\n return this.events.on(type, listener);\n }\n\n addTo(map: GeoMap): this {\n if (this.map === map) return this;\n this.remove();\n this.map = map;\n map.attachOverlay(this, this.element);\n return this;\n }\n\n remove(): this {\n this.popup?.remove();\n this.map?.detachOverlay(this, this.element);\n this.map = undefined;\n this.grab = undefined;\n this.dragging = false;\n this.element.classList.remove('isard-marker-dragging');\n return this;\n }\n\n /** @internal */\n position(size: Point): void {\n if (!this.map) return;\n const top = place(this.map, this.element, this.lonLat, this.height, this.anchor, this.offset, size);\n const ground = top && this.height !== this.base ? this.map.project(this.lonLat, this.base) : undefined;\n if (!top || !ground) {\n this.stem.style.display = 'none';\n return;\n }\n // From the anchor down to what it stands on, a line turned toward it\n const [dx, dy] = [ground[0] - top[0], ground[1] - top[1]];\n this.stem.style.display = '';\n this.stem.style.height = `${Math.hypot(dx, dy)}px`;\n this.stem.style.transform = `rotate(${Math.atan2(dy, dx) - Math.PI / 2}rad)`;\n }\n\n private local(e: PointerEvent): Point | undefined {\n const rect = this.map?.getCanvas().getBoundingClientRect();\n return rect && [e.clientX - rect.left, e.clientY - rect.top];\n }\n\n private down(e: PointerEvent): void {\n this.swallowClick = false;\n if (!this.draggable || !this.map || e.button !== 0) return;\n // The gap to the position on the ground, below a raised marker\n const point = this.map.project(this.lonLat);\n const at = this.local(e);\n if (!point || !at) return;\n // The map must not start panning under the marker\n e.stopPropagation();\n e.preventDefault();\n this.element.setPointerCapture(e.pointerId);\n // The grabbed spot of the marker stays under the pointer, wherever the element was pressed\n this.grab = { start: at, gap: [at[0] - point[0], at[1] - point[1]] };\n this.dragging = false;\n }\n\n private move(e: PointerEvent): void {\n const at = this.local(e);\n if (!this.grab || !this.map || !at) return;\n e.stopPropagation();\n const { start, gap } = this.grab;\n if (!this.dragging && Math.hypot(at[0] - start[0], at[1] - start[1]) < DRAG_TOLERANCE) return;\n // On the relief: the ground under the point, read back from the picking pass\n const lonLat = this.map.unproject([at[0] - gap[0], at[1] - gap[1]]);\n if (!lonLat) return;\n if (!this.dragging) {\n this.dragging = true;\n this.element.classList.add('isard-marker-dragging');\n this.events.emit('dragstart', { target: this, lonLat: this.getLonLat() });\n }\n this.setLonLat(lonLat);\n this.events.emit('drag', { target: this, lonLat: this.getLonLat() });\n }\n\n private up(e: PointerEvent): void {\n if (!this.grab) return;\n e.stopPropagation();\n this.grab = undefined;\n if (this.element.hasPointerCapture(e.pointerId)) this.element.releasePointerCapture(e.pointerId);\n if (!this.dragging) return;\n this.dragging = false;\n this.swallowClick = true;\n this.element.classList.remove('isard-marker-dragging');\n this.events.emit('dragend', { target: this, lonLat: this.getLonLat() });\n }\n\n private click(e: MouseEvent): void {\n if (this.swallowClick) {\n this.swallowClick = false;\n e.stopImmediatePropagation();\n e.preventDefault();\n return;\n }\n if (this.popup) this.togglePopup();\n }\n}\n\nexport interface PopupOptions {\n /** A × button in the corner (default true) */\n closeButton?: boolean;\n /** A click on the map elsewhere closes the popup (default true) */\n closeOnClick?: boolean;\n /** CSS max-width of the popup (default '240px') */\n maxWidth?: string;\n /** Classes added to the popup, space separated */\n className?: string;\n /** Which part of the popup sits on the position, its tip there (default 'bottom': the popup is above the point) */\n anchor?: Anchor;\n /** Shift from the anchor, CSS pixels (default [0, 0]) */\n offset?: Point;\n}\n\nexport interface PopupEvents {\n open: { target: Popup };\n close: { target: Popup };\n}\n\n/** A box of content at a position, its tip pointing at it */\nexport class Popup {\n private readonly container: HTMLElement;\n private readonly content: HTMLElement;\n private readonly closeButton: HTMLButtonElement | undefined;\n private readonly anchor: Anchor;\n private readonly closeOnClick: boolean;\n private readonly events = new Emitter<PopupEvents>();\n private offset: Point;\n private lonLat: LonLat = [0, 0];\n private height = 0;\n private map: GeoMap | undefined;\n private stopListening: (() => void) | undefined;\n\n constructor(options: PopupOptions = {}) {\n this.anchor = options.anchor ?? 'bottom';\n this.offset = options.offset ?? [0, 0];\n this.closeOnClick = options.closeOnClick ?? true;\n this.container = document.createElement('div');\n this.container.className = `isard-popup isard-popup-anchor-${this.anchor}`;\n if (options.className) this.container.classList.add(...options.className.split(/\\s+/).filter(Boolean));\n this.container.style.maxWidth = options.maxWidth ?? '240px';\n const tip = document.createElement('div');\n tip.className = 'isard-popup-tip';\n this.content = document.createElement('div');\n this.content.className = 'isard-popup-content';\n if (options.closeButton ?? true) {\n this.container.classList.add('isard-popup-has-close');\n this.closeButton = document.createElement('button');\n this.closeButton.type = 'button';\n this.closeButton.className = 'isard-popup-close';\n this.closeButton.setAttribute('aria-label', 'Close popup');\n this.closeButton.textContent = '×';\n this.closeButton.addEventListener('click', () => this.remove());\n this.content.append(this.closeButton);\n }\n this.container.append(tip, this.content);\n }\n\n getElement(): HTMLElement {\n return this.container;\n }\n\n getLonLat(): LonLat {\n return [...this.lonLat];\n }\n\n setLonLat(lonLat: LonLat): this {\n this.lonLat = [lonLat[0], lonLat[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n setOffset(offset: Point): this {\n this.offset = [offset[0], offset[1]];\n this.map?.positionOverlay(this);\n return this;\n }\n\n getHeight(): number {\n return this.height;\n }\n\n /** Metres above the ground (default 0); a marker's popup follows the marker's height */\n setHeight(height: number): this {\n this.height = Number.isFinite(height) ? height : 0;\n this.map?.positionOverlay(this);\n return this;\n }\n\n /** Content from an HTML string: only for trusted HTML (use `setText` for user or remote data) */\n setHTML(html: string): this {\n const template = document.createElement('template');\n template.innerHTML = html;\n return this.setDOMContent(template.content);\n }\n\n setText(text: string): this {\n return this.setDOMContent(document.createTextNode(text));\n }\n\n setDOMContent(node: Node): this {\n this.content.replaceChildren(node);\n if (this.closeButton) this.content.append(this.closeButton);\n this.map?.positionOverlay(this);\n return this;\n }\n\n isOpen(): boolean {\n return this.map !== undefined;\n }\n\n /** Listens to the popup opening or closing; returns the function that stops listening */\n on<K extends keyof PopupEvents>(type: K, listener: (event: PopupEvents[K]) => void): () => void {\n return this.events.on(type, listener);\n }\n\n addTo(map: GeoMap): this {\n if (this.map === map) return this;\n this.remove();\n this.map = map;\n map.attachOverlay(this, this.container);\n if (this.closeOnClick) {\n // From the next task on: a popup opened by a map click must not be closed by that same click\n queueMicrotask(() => {\n if (this.map === map && !this.stopListening) this.stopListening = map.on('click', () => this.remove());\n });\n }\n this.events.emit('open', { target: this });\n return this;\n }\n\n remove(): this {\n if (!this.map) return this;\n this.stopListening?.();\n this.stopListening = undefined;\n this.map.detachOverlay(this, this.container);\n this.map = undefined;\n this.events.emit('close', { target: this });\n return this;\n }\n\n /** @internal */\n position(size: Point): void {\n if (this.map) place(this.map, this.container, this.lonLat, this.height, this.anchor, this.offset, size);\n }\n}\n"]}
package/dist/style.js CHANGED
@@ -51,6 +51,8 @@ const CSS = `
51
51
  .isard-marker { position: absolute; top: 0; left: 0; pointer-events: auto; will-change: transform; }
52
52
  .isard-marker-draggable { cursor: grab; touch-action: none; }
53
53
  .isard-marker-dragging { cursor: grabbing; }
54
+ .isard-marker-stem { position: absolute; z-index: -1; width: 2px; margin-left: -1px; transform-origin: top center; background: var(--isard-marker-color); opacity: 0.8; pointer-events: none; }
55
+ .isard-marker-stem::after { content: ""; position: absolute; bottom: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: inherit; }
54
56
  .isard-marker-pin { display: block; color: var(--isard-marker-color); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
55
57
  .isard-popup {
56
58
  position: absolute; top: 0; left: 0; display: flex; pointer-events: none; will-change: transform; z-index: 1;
package/dist/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHX,CAAC;AAEF,MAAM,MAAM,GAAG,IAAI,OAAO,EAAY,CAAC;AAEvC,mHAAmH;AACnH,MAAM,UAAU,WAAW,CAAC,GAAa;IACvC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACzB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC","sourcesContent":["/**\n * Styles of the DOM overlays (markers, popups, controls), injected once per document so the package needs no CSS\n * file. Colors are custom properties, defaults on the root with no specificity: an application restyles them on any\n * element around the map (its container's class may be replaced by a framework: nothing depends on it).\n */\n\nconst CSS = `\n:where(:root) {\n --isard-ctrl-bg: #fff;\n --isard-ctrl-fg: #333;\n --isard-ctrl-hover: rgb(0 0 0 / 0.05);\n --isard-ctrl-active: #1d2433;\n --isard-ctrl-active-fg: #fff;\n --isard-ctrl-border: #ddd;\n --isard-ctrl-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);\n --isard-popup-bg: #fff;\n --isard-popup-fg: #1d2433;\n --isard-marker-color: #3a6fd8;\n --isard-attrib-bg: rgb(255 255 255 / 0.5);\n --isard-attrib-fg: rgb(0 0 0 / 0.75);\n --isard-focus: #3a6fd8;\n}\n.isard-canvas:focus { outline: none; }\n.isard-canvas:focus-visible { outline: 2px solid var(--isard-focus); outline-offset: -2px; }\n.isard-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }\n.isard-ctrl-top-left, .isard-ctrl-top-right, .isard-ctrl-bottom-left, .isard-ctrl-bottom-right {\n position: absolute; pointer-events: none; z-index: 2;\n}\n.isard-ctrl-top-left { top: 0; left: 0; }\n.isard-ctrl-top-right { top: 0; right: 0; }\n.isard-ctrl-bottom-left { bottom: 0; left: 0; }\n.isard-ctrl-bottom-right { bottom: 0; right: 0; }\n.isard-ctrl { clear: both; pointer-events: auto; transform: translate(0, 0); }\n.isard-ctrl-top-left .isard-ctrl { float: left; margin: 10px 0 0 10px; }\n.isard-ctrl-top-right .isard-ctrl { float: right; margin: 10px 10px 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl { float: left; margin: 0 0 10px 10px; }\n.isard-ctrl-bottom-right .isard-ctrl { float: right; margin: 0 10px 10px 0; }\n.isard-ctrl-group { background: var(--isard-ctrl-bg); border-radius: 4px; box-shadow: var(--isard-ctrl-shadow); }\n.isard-ctrl-group button {\n display: block; width: 29px; height: 29px; padding: 0; margin: 0; border: 0; box-sizing: border-box;\n background: transparent; color: var(--isard-ctrl-fg); cursor: pointer; font: inherit;\n}\n.isard-ctrl-group button + button { border-top: 1px solid var(--isard-ctrl-border); }\n.isard-ctrl-group button:first-child { border-radius: 4px 4px 0 0; }\n.isard-ctrl-group button:last-child { border-radius: 0 0 4px 4px; }\n.isard-ctrl-group button:only-child { border-radius: inherit; }\n.isard-ctrl-group button:hover { background-color: var(--isard-ctrl-hover); }\n.isard-ctrl-group button:focus-visible { outline: 2px solid var(--isard-ctrl-active); outline-offset: -2px; }\n.isard-ctrl-group button.active { background: var(--isard-ctrl-active); color: var(--isard-ctrl-active-fg); }\n.isard-ctrl-group button svg { display: block; margin: auto; pointer-events: none; }\n.isard-ctrl-compass svg { transition: transform 0.05s; }\n.isard-marker { position: absolute; top: 0; left: 0; pointer-events: auto; will-change: transform; }\n.isard-marker-draggable { cursor: grab; touch-action: none; }\n.isard-marker-dragging { cursor: grabbing; }\n.isard-marker-pin { display: block; color: var(--isard-marker-color); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }\n.isard-popup {\n position: absolute; top: 0; left: 0; display: flex; pointer-events: none; will-change: transform; z-index: 1;\n color: var(--isard-popup-fg);\n}\n.isard-popup-anchor-top, .isard-popup-anchor-top-left, .isard-popup-anchor-top-right { flex-direction: column; }\n.isard-popup-anchor-bottom, .isard-popup-anchor-bottom-left, .isard-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n.isard-popup-anchor-left { flex-direction: row; }\n.isard-popup-anchor-right { flex-direction: row-reverse; }\n.isard-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; }\n.isard-popup-anchor-top .isard-popup-tip { align-self: center; border-top: none; border-bottom-color: var(--isard-popup-bg); }\n.isard-popup-anchor-top-left .isard-popup-tip {\n align-self: flex-start; border-top: none; border-left: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-top-right .isard-popup-tip {\n align-self: flex-end; border-top: none; border-right: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom .isard-popup-tip { align-self: center; border-bottom: none; border-top-color: var(--isard-popup-bg); }\n.isard-popup-anchor-bottom-left .isard-popup-tip {\n align-self: flex-start; border-bottom: none; border-left: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom-right .isard-popup-tip {\n align-self: flex-end; border-bottom: none; border-right: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-left .isard-popup-tip { align-self: center; border-left: none; border-right-color: var(--isard-popup-bg); }\n.isard-popup-anchor-right .isard-popup-tip { align-self: center; border-right: none; border-left-color: var(--isard-popup-bg); }\n.isard-popup-content {\n position: relative; padding: 12px 14px; border-radius: 4px; background: var(--isard-popup-bg);\n box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); pointer-events: auto; overflow-wrap: break-word;\n}\n.isard-popup-has-close .isard-popup-content { padding-right: 26px; }\n.isard-popup-anchor-top-left .isard-popup-content { border-top-left-radius: 0; }\n.isard-popup-anchor-top-right .isard-popup-content { border-top-right-radius: 0; }\n.isard-popup-anchor-bottom-left .isard-popup-content { border-bottom-left-radius: 0; }\n.isard-popup-anchor-bottom-right .isard-popup-content { border-bottom-right-radius: 0; }\n.isard-popup-close {\n position: absolute; top: 0; right: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0 4px 0 4px;\n background: transparent; color: inherit; font: 18px/22px system-ui, sans-serif; cursor: pointer;\n}\n.isard-popup-close:hover { background: rgb(0 0 0 / 0.05); }\n.isard-popup-close:focus-visible, .isard-attrib-button:focus-visible, .isard-attrib a:focus-visible {\n outline: 2px solid var(--isard-focus); outline-offset: -2px;\n}\n.isard-attrib {\n display: flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: var(--isard-attrib-bg);\n color: var(--isard-attrib-fg); font: 12px/20px system-ui, sans-serif;\n}\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib, .isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-bottom: 0; }\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib { margin-right: 0; border-radius: 4px 0 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-left: 0; border-radius: 0 4px 0 0; }\n.isard-attrib a { color: inherit; text-decoration: none; }\n.isard-attrib a:hover { text-decoration: underline; }\n.isard-attrib-button {\n display: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; flex: none;\n background: var(--isard-ctrl-bg); color: var(--isard-ctrl-fg); cursor: pointer;\n}\n.isard-attrib-button svg { display: block; margin: auto; }\n.isard-ctrl.isard-attrib.isard-attrib-compact { min-height: 24px; padding: 2px; border-radius: 12px; margin: 0 10px 10px; }\n.isard-attrib-compact .isard-attrib-button { display: block; }\n.isard-attrib-compact .isard-attrib-inner { display: none; padding: 0 6px 0 2px; }\n.isard-attrib-compact.isard-attrib-open { background: var(--isard-ctrl-bg); }\n.isard-attrib-compact.isard-attrib-open .isard-attrib-inner { display: block; }\n`;\n\nconst styled = new WeakSet<Document>();\n\n/** Adds the overlay styles to a document, once; first in the head so application rules win at equal specificity */\nexport function injectStyle(doc: Document): void {\n if (styled.has(doc)) return;\n styled.add(doc);\n const style = doc.createElement('style');\n style.dataset.isard = '';\n style.textContent = CSS;\n doc.head.prepend(style);\n}\n"]}
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHX,CAAC;AAEF,MAAM,MAAM,GAAG,IAAI,OAAO,EAAY,CAAC;AAEvC,mHAAmH;AACnH,MAAM,UAAU,WAAW,CAAC,GAAa;IACvC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACzB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC","sourcesContent":["/**\n * Styles of the DOM overlays (markers, popups, controls), injected once per document so the package needs no CSS\n * file. Colors are custom properties, defaults on the root with no specificity: an application restyles them on any\n * element around the map (its container's class may be replaced by a framework: nothing depends on it).\n */\n\nconst CSS = `\n:where(:root) {\n --isard-ctrl-bg: #fff;\n --isard-ctrl-fg: #333;\n --isard-ctrl-hover: rgb(0 0 0 / 0.05);\n --isard-ctrl-active: #1d2433;\n --isard-ctrl-active-fg: #fff;\n --isard-ctrl-border: #ddd;\n --isard-ctrl-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);\n --isard-popup-bg: #fff;\n --isard-popup-fg: #1d2433;\n --isard-marker-color: #3a6fd8;\n --isard-attrib-bg: rgb(255 255 255 / 0.5);\n --isard-attrib-fg: rgb(0 0 0 / 0.75);\n --isard-focus: #3a6fd8;\n}\n.isard-canvas:focus { outline: none; }\n.isard-canvas:focus-visible { outline: 2px solid var(--isard-focus); outline-offset: -2px; }\n.isard-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }\n.isard-ctrl-top-left, .isard-ctrl-top-right, .isard-ctrl-bottom-left, .isard-ctrl-bottom-right {\n position: absolute; pointer-events: none; z-index: 2;\n}\n.isard-ctrl-top-left { top: 0; left: 0; }\n.isard-ctrl-top-right { top: 0; right: 0; }\n.isard-ctrl-bottom-left { bottom: 0; left: 0; }\n.isard-ctrl-bottom-right { bottom: 0; right: 0; }\n.isard-ctrl { clear: both; pointer-events: auto; transform: translate(0, 0); }\n.isard-ctrl-top-left .isard-ctrl { float: left; margin: 10px 0 0 10px; }\n.isard-ctrl-top-right .isard-ctrl { float: right; margin: 10px 10px 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl { float: left; margin: 0 0 10px 10px; }\n.isard-ctrl-bottom-right .isard-ctrl { float: right; margin: 0 10px 10px 0; }\n.isard-ctrl-group { background: var(--isard-ctrl-bg); border-radius: 4px; box-shadow: var(--isard-ctrl-shadow); }\n.isard-ctrl-group button {\n display: block; width: 29px; height: 29px; padding: 0; margin: 0; border: 0; box-sizing: border-box;\n background: transparent; color: var(--isard-ctrl-fg); cursor: pointer; font: inherit;\n}\n.isard-ctrl-group button + button { border-top: 1px solid var(--isard-ctrl-border); }\n.isard-ctrl-group button:first-child { border-radius: 4px 4px 0 0; }\n.isard-ctrl-group button:last-child { border-radius: 0 0 4px 4px; }\n.isard-ctrl-group button:only-child { border-radius: inherit; }\n.isard-ctrl-group button:hover { background-color: var(--isard-ctrl-hover); }\n.isard-ctrl-group button:focus-visible { outline: 2px solid var(--isard-ctrl-active); outline-offset: -2px; }\n.isard-ctrl-group button.active { background: var(--isard-ctrl-active); color: var(--isard-ctrl-active-fg); }\n.isard-ctrl-group button svg { display: block; margin: auto; pointer-events: none; }\n.isard-ctrl-compass svg { transition: transform 0.05s; }\n.isard-marker { position: absolute; top: 0; left: 0; pointer-events: auto; will-change: transform; }\n.isard-marker-draggable { cursor: grab; touch-action: none; }\n.isard-marker-dragging { cursor: grabbing; }\n.isard-marker-stem { position: absolute; z-index: -1; width: 2px; margin-left: -1px; transform-origin: top center; background: var(--isard-marker-color); opacity: 0.8; pointer-events: none; }\n.isard-marker-stem::after { content: \"\"; position: absolute; bottom: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: inherit; }\n.isard-marker-pin { display: block; color: var(--isard-marker-color); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }\n.isard-popup {\n position: absolute; top: 0; left: 0; display: flex; pointer-events: none; will-change: transform; z-index: 1;\n color: var(--isard-popup-fg);\n}\n.isard-popup-anchor-top, .isard-popup-anchor-top-left, .isard-popup-anchor-top-right { flex-direction: column; }\n.isard-popup-anchor-bottom, .isard-popup-anchor-bottom-left, .isard-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n.isard-popup-anchor-left { flex-direction: row; }\n.isard-popup-anchor-right { flex-direction: row-reverse; }\n.isard-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; }\n.isard-popup-anchor-top .isard-popup-tip { align-self: center; border-top: none; border-bottom-color: var(--isard-popup-bg); }\n.isard-popup-anchor-top-left .isard-popup-tip {\n align-self: flex-start; border-top: none; border-left: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-top-right .isard-popup-tip {\n align-self: flex-end; border-top: none; border-right: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom .isard-popup-tip { align-self: center; border-bottom: none; border-top-color: var(--isard-popup-bg); }\n.isard-popup-anchor-bottom-left .isard-popup-tip {\n align-self: flex-start; border-bottom: none; border-left: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom-right .isard-popup-tip {\n align-self: flex-end; border-bottom: none; border-right: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-left .isard-popup-tip { align-self: center; border-left: none; border-right-color: var(--isard-popup-bg); }\n.isard-popup-anchor-right .isard-popup-tip { align-self: center; border-right: none; border-left-color: var(--isard-popup-bg); }\n.isard-popup-content {\n position: relative; padding: 12px 14px; border-radius: 4px; background: var(--isard-popup-bg);\n box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); pointer-events: auto; overflow-wrap: break-word;\n}\n.isard-popup-has-close .isard-popup-content { padding-right: 26px; }\n.isard-popup-anchor-top-left .isard-popup-content { border-top-left-radius: 0; }\n.isard-popup-anchor-top-right .isard-popup-content { border-top-right-radius: 0; }\n.isard-popup-anchor-bottom-left .isard-popup-content { border-bottom-left-radius: 0; }\n.isard-popup-anchor-bottom-right .isard-popup-content { border-bottom-right-radius: 0; }\n.isard-popup-close {\n position: absolute; top: 0; right: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0 4px 0 4px;\n background: transparent; color: inherit; font: 18px/22px system-ui, sans-serif; cursor: pointer;\n}\n.isard-popup-close:hover { background: rgb(0 0 0 / 0.05); }\n.isard-popup-close:focus-visible, .isard-attrib-button:focus-visible, .isard-attrib a:focus-visible {\n outline: 2px solid var(--isard-focus); outline-offset: -2px;\n}\n.isard-attrib {\n display: flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: var(--isard-attrib-bg);\n color: var(--isard-attrib-fg); font: 12px/20px system-ui, sans-serif;\n}\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib, .isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-bottom: 0; }\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib { margin-right: 0; border-radius: 4px 0 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-left: 0; border-radius: 0 4px 0 0; }\n.isard-attrib a { color: inherit; text-decoration: none; }\n.isard-attrib a:hover { text-decoration: underline; }\n.isard-attrib-button {\n display: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; flex: none;\n background: var(--isard-ctrl-bg); color: var(--isard-ctrl-fg); cursor: pointer;\n}\n.isard-attrib-button svg { display: block; margin: auto; }\n.isard-ctrl.isard-attrib.isard-attrib-compact { min-height: 24px; padding: 2px; border-radius: 12px; margin: 0 10px 10px; }\n.isard-attrib-compact .isard-attrib-button { display: block; }\n.isard-attrib-compact .isard-attrib-inner { display: none; padding: 0 6px 0 2px; }\n.isard-attrib-compact.isard-attrib-open { background: var(--isard-ctrl-bg); }\n.isard-attrib-compact.isard-attrib-open .isard-attrib-inner { display: block; }\n`;\n\nconst styled = new WeakSet<Document>();\n\n/** Adds the overlay styles to a document, once; first in the head so application rules win at equal specificity */\nexport function injectStyle(doc: Document): void {\n if (styled.has(doc)) return;\n styled.add(doc);\n const style = doc.createElement('style');\n style.dataset.isard = '';\n style.textContent = CSS;\n doc.head.prepend(style);\n}\n"]}
package/dist/types.d.ts CHANGED
@@ -173,8 +173,8 @@ export interface AtmosphereOptions {
173
173
  /** Share of the distance to the far plane over which the ground fades into the fog, 0-1 (default 0.4) */
174
174
  fogGroundBlend?: number;
175
175
  }
176
- /** What can be seen from a point (`GeoMap.setViewshed`); with several observers, the colors and opacity are the
177
- * first one's */
176
+ /** What can be seen from a point (`GeoMap.setViewshed`); with several observers, the colors, the opacity and the
177
+ * cone's color are the first one's */
178
178
  export interface ViewshedOptions {
179
179
  /** The observer */
180
180
  position: LonLat;
@@ -186,8 +186,12 @@ export interface ViewshedOptions {
186
186
  visibleColor?: string;
187
187
  /** A CSS color for what is hidden (default `#e03131`) */
188
188
  hiddenColor?: string;
189
- /** 0-1 (default 0.55) */
189
+ /** How strongly the colors tint the scene, multiplied into it so that its textures and shading stay, 0-1 (default
190
+ * 0.7) */
190
191
  opacity?: number;
192
+ /** A CSS color for the cone drawn in 3D (one way only): its fan through the axis, at the eye's height and tilted
193
+ * with it, from the eye to the range; solid where nothing hides it, faint behind the scene; none by default */
194
+ coneColor?: string;
191
195
  /** To look one way only (a camera, a lookout), degrees clockwise from north; all around without it */
192
196
  direction?: number;
193
197
  /** Degrees above the horizon the cone looks, negative below (default 0) */
package/dist/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["/** Public types of the `isard` package */\nimport type { AttributionOptions } from './controls.ts';\nimport type { DecoderUrls } from './decoders.ts';\nimport type { Feature, Ramp, Size } from './features.ts';\nimport type { TileGrid } from './grid.ts';\nimport type { Layer } from './layers.ts';\nimport type { Camera, Engine } from './wasm/isard.js';\n\nexport type LonLat = [lon: number, lat: number];\nexport type Point = [x: number, y: number];\n\n/**\n * The named basemaps. OpenFreeMap's vector styles, OpenStreetMap data worldwide, their labels above the other layers:\n * `osm-positron` (light grey, quiet: data over it reads first), `osm-liberty` and `osm-bright` (in colour). The\n * Géoplateforme's (IGN, France): rasters (`ign-plan`, `ign-plan-grey`, `ign-ortho`, the aerial photographs) or vector\n * tiles with their labels (`ign-plan-vector`, `ign-plan-grey-vector`, the PLAN.IGN styles).\n */\nexport type BasemapName =\n | 'osm-positron'\n | 'osm-liberty'\n | 'osm-bright'\n | 'ign-plan'\n | 'ign-plan-grey'\n | 'ign-ortho'\n | 'ign-plan-vector'\n | 'ign-plan-grey-vector'\n | 'none';\n\n/**\n * @deprecated The former names of the Géoplateforme basemaps, still accepted (with a warning): the same names with the\n * `ign-` prefix (`'plan-grey'` is `'ign-plan-grey'`)\n */\nexport type LegacyBasemap = 'plan' | 'plan-grey' | 'plan-vector' | 'plan-grey-vector' | 'ortho';\n\n/** A basemap by name (see `BasemapName`; the former names of `LegacyBasemap` are deprecated) */\nexport type Basemap = BasemapName | LegacyBasemap;\n\n/**\n * The Earth's named terrain models. `'terrain-tiles'`: worldwide, the Terrain Tiles of AWS's open data registry\n * (SRTM, EU-DEM, GMTED… merged by Mapzen, 30 m in most places), the sea floor flattened at sea level. `'ign'`: France,\n * the IGN's RGE ALTI from the Géoplateforme (1 to 5 m), raised by the RAF20 geoid to heights above the ellipsoid.\n */\nexport type TerrainModel = 'terrain-tiles' | 'ign';\n\n/** How tiles encode their altitudes: `'float32'`, raw little-endian floats (`image/x-bil;bits=32`, an ArcGIS raw\n * grid); `'terrarium'`, the colors of a PNG, `R × 256 + G + B / 256 - 32768`; `'mapbox'`, those of Terrain-RGB,\n * `(R × 65536 + G × 256 + B) / 10 - 10000` */\nexport type TerrainEncoding = 'float32' | 'terrarium' | 'mapbox';\n\n/**\n * How tiles load and show. 'immediate' (default): everything visible loads, tiles show as soon as they arrive.\n * 'smooth': during flights the levels flown through are skipped, off-center tiles wait while the camera moves, tiles\n * fade in; fewer downloads, for slow networks or GPUs.\n */\nexport type LoadingMode = 'immediate' | 'smooth';\n\n/** 'globe': a sphere at low zoom, blending into Web Mercator between zooms 5 and 7, up to three levels later under a\n * tilted camera (it sees much farther than its center: the horizon stays curved) */\nexport type Projection = 'globe' | 'mercator';\n\n/** A body to draw the map on, other than the named ones (`CelestialBody`) */\nexport interface BodyOptions {\n /** Equatorial radius, metres */\n radius: number;\n /** Flattening of its ellipsoid, 0 for a sphere (default 0) */\n flattening?: number;\n /** An atmosphere: its halo around the globe, true for the Earth's light blue, or a CSS color (its alpha the\n * halo's strength) (default false) */\n atmosphere?: boolean | string;\n /** Color of the globe where no tile covers it (past the Web Mercator latitudes, 85°), a CSS color (default\n * `#808080`) */\n color?: string;\n /** Lowest and highest altitudes of its ground, metres around the ellipsoid: what its relief may raise into view\n * (default ±1 % of the radius) */\n relief?: [lowest: number, highest: number];\n}\n\n/**\n * The body the map is drawn on: 'earth' (WGS 84, the default), 'moon' (a sphere of 1 737 400 m, no atmosphere),\n * 'mars' (a sphere of 3 396 190 m, its equatorial radius, a thin dusty halo; planetocentric latitudes) or another\n * one. Zoom levels keep their meaning on screen (the Web Mercator tile pyramid), their metres follow the body:\n * altitudes, relief, buildings, 3D Tiles. Off the Earth, the map has none of the Earth's defaults: no basemap, no\n * credits, and space for its background; the Moon and Mars have NASA's relief for `terrain: true`.\n */\nexport type CelestialBody = 'earth' | 'moon' | 'mars' | BodyOptions;\n\nexport interface GeoMapOptions extends Partial<Camera> {\n /** The body the map is drawn on (default 'earth'); set at creation */\n body?: CelestialBody;\n /** Default 'globe' */\n projection?: Projection;\n /** Default 'immediate' */\n loading?: LoadingMode;\n /** The basemap (default 'osm-positron'; 'none' off the Earth) */\n basemap?: Basemap;\n /** Opacity of the IGN hillshade over the basemap (France, Géoplateforme), 0 for none (default 0) */\n hillshade?: number;\n /** Color behind the map (sky of tilted flat views), a CSS color (default `#f2f2f0`; black off the Earth) */\n background?: string;\n /** Space behind the globe: stars and atmosphere halo, fading out as the globe turns flat (default true) */\n sky?: boolean;\n /** Relief under the basemap: true for the body's terrain model (on the Earth the worldwide Terrain Tiles; NASA's on\n * the Moon and Mars: LOLA, MOLA), one of the Earth's models by name (`'ign'`: France, RGE ALTI), or its options\n * (default false; on another body, its `url` is required). Network layers are draped on it */\n terrain?: boolean | TerrainModel | TerrainOptions;\n minZoom?: number;\n maxZoom?: number;\n /** Highest pitch, degrees, up to 85 (default 70) */\n maxPitch?: number;\n /** Sky over the plane, seen when the camera is tilted towards the horizon, and the fog the ground fades into\n * (MapLibre's `setSky`); default none: the background color */\n atmosphere?: AtmosphereOptions;\n /** Mouse, touch and keyboard controls (default true) */\n interactive?: boolean;\n /** Keyboard controls once the map has the focus (it is reached with Tab): arrows pan, Shift + arrows rotate and\n * tilt, + and - zoom (Shift: two levels), 0 faces north and levels the view (default true; none when not\n * `interactive`) */\n keyboard?: boolean;\n /** Accessible name of the map, read by screen readers (default 'Map') */\n ariaLabel?: string;\n /** Where to load the engine with 3D Tiles from (`isard_bg.wasm`), when a bundler does not resolve the default URL.\n * Given without `coreWasmUrl`, maps load this engine from the start */\n wasmUrl?: string | URL;\n /** Where to load the engine without 3D Tiles from (`isard_core_bg.wasm`, a third smaller), when a bundler does not\n * resolve the default URL. Maps load it first, and the engine with 3D Tiles (`wasmUrl`) for their first 3D Tiles\n * layer only */\n coreWasmUrl?: string | URL;\n /** Where the decoding workers load the point cloud module from (`isard_points_bg.wasm`, the LAZ decoder of COPC),\n * when a bundler does not resolve the default URL. Loaded with the first point cloud only */\n pointsWasmUrl?: string | URL;\n /** Load the engine with 3D Tiles from the start (default false: it is loaded when the first 3D Tiles layer or glTF\n * model is added, the map then moving its camera and layers onto it, a stall of about a frame or two). For a map that shows 3D Tiles\n * at once: one engine downloaded instead of two. `'preload'`: the map starts on the engine without 3D Tiles and\n * downloads and compiles the other once idle, without running it: its first 3D Tiles layer does not wait for the\n * download (for a map that will show 3D Tiles later, on demand) */\n tiles3d?: boolean | 'preload';\n /** Where to load the vector basemap worker from, when a bundler does not resolve the default URL */\n basemapWorkerUrl?: string | URL;\n /** Texture size of the vector basemap's tiles, pixels (default 512: lines and edges sharp at every zoom on a screen\n * of pixel ratio 1). 256: a quarter of the drawing in the workers, of the uploads and of the GPU memory, for lines\n * and edges a little softer between two zoom levels (the tiles are shown 181 to 362 CSS pixels wide) */\n basemapTileSize?: number;\n /** Glyphs of the symbol layers: a URL with `{fontstack}` and `{range}` (MapLibre's glyph format; default\n * OpenFreeMap's fonts, Noto Sans). A vector basemap's labels take the glyphs of its style */\n glyphs?: string;\n /** Workers decoding 3D Tiles off the main thread: a count, or false to decode on the main thread (default: cores - 1,\n * 1 to 4). False (or 0) also decodes the PNG relief and reprojects the equirectangular rasters on the main thread,\n * else done by the vector basemap's workers */\n workers?: number | false;\n /** Where to load the decoding worker from, when a bundler does not resolve the default URL */\n workerUrl?: string | URL;\n /** Folders of the Draco and Basis Universal decoders, loaded by the workers on first use (default: the official\n * builds on gstatic.com and jsDelivr; self-host them for offline or locked-down networks). They run through\n * `new Function`: a Content Security Policy needs `'unsafe-eval'` (see `DecoderUrls`) */\n decoders?: Partial<DecoderUrls>;\n /** Credits at the bottom right: false for none, or its options (default true: the credits of the basemap,\n * hillshade and relief in use, compact on maps narrower than 640 px) */\n attributionControl?: boolean | AttributionOptions;\n}\n\nexport interface TerrainOptions {\n /** One of the Earth's named models (default `'terrain-tiles'` on the Earth); unused with a `url` */\n model?: TerrainModel;\n /** Altitudes of 256 × 256 tiles in `encoding`: a WMS GetMap URL with {bbox} (EPSG:3857 on the Earth, the body's\n * Mercator metres elsewhere: the sphere of its radius), a tile URL with {z}, {x} and {y}, or an ArcGIS image service\n * (a URL ending in `/ImageServer`), asked for raw altitudes in the body's Mercator (default: the `model`'s; on the\n * Moon and Mars, NASA's Trek LOLA and MOLA models) */\n url?: string;\n /** How the tiles of `url` encode their altitudes (default `'float32'`); `'terrarium'` and `'mapbox'` take a URL with\n * {z}, {x} and {y} */\n encoding?: TerrainEncoding;\n /** Vertical exaggeration, 1 for the true relief (default 1) */\n exaggeration?: number;\n /** Finest level of the relief, up to 15 (default 15; 14 for the Terrain Tiles, 8 for the Moon's and Mars's models). It\n * starts at level 6 on the Earth, coarser on bodies of a larger relief for their size (3 on the Moon and Mars) */\n maxZoom?: number;\n /** Altitudes over mainland France raised by the height of the RAF20 geoid (the French one, 0 away from France), to\n * heights above the ellipsoid (those of 3D Tiles); false keeps the altitudes as served (NGF-IGN69 for the IGN's)\n * (default true for the `'ign'` model, false otherwise) */\n geoid?: boolean;\n}\n\n/** Sky, horizon and fog over the plane, with the names and meanings of MapLibre's `setSky` */\nexport interface AtmosphereOptions {\n /** A CSS color (default `#9cc7ec`) */\n skyColor?: string;\n /** (default `#e8f1f8`) */\n horizonColor?: string;\n /** (default `#f2f5f8`) */\n fogColor?: string;\n /** Blend from the horizon to the sky color, share of the field of view above the horizon, 0-1 (default 0.6) */\n skyHorizonBlend?: number;\n /** Blend from the horizon to the fog color below the horizon, 0-1 (default 0.7) */\n horizonFogBlend?: number;\n /** Share of the distance to the far plane over which the ground fades into the fog, 0-1 (default 0.4) */\n fogGroundBlend?: number;\n}\n\n/** What can be seen from a point (`GeoMap.setViewshed`); with several observers, the colors and opacity are the\n * first one's */\nexport interface ViewshedOptions {\n /** The observer */\n position: LonLat;\n /** Metres above the ground (default 1.7, eye level) */\n height?: number;\n /** Metres around the observer that are tinted (default 1000) */\n range?: number;\n /** A CSS color for what is seen (default `#2f9e44`) */\n visibleColor?: string;\n /** A CSS color for what is hidden (default `#e03131`) */\n hiddenColor?: string;\n /** 0-1 (default 0.55) */\n opacity?: number;\n /** To look one way only (a camera, a lookout), degrees clockwise from north; all around without it */\n direction?: number;\n /** Degrees above the horizon the cone looks, negative below (default 0) */\n tilt?: number;\n /** Angle of view across, degrees (default 60) */\n fov?: number;\n /** Angle of view up and down, degrees (default 40) */\n verticalFov?: number;\n}\n\n/** Animation of a camera move */\nexport interface AnimationOptions {\n /** Milliseconds */\n duration?: number;\n /** Progress over time, both 0 to 1 */\n easing?: (t: number) => number;\n}\n\nexport interface FlyToOptions extends AnimationOptions {\n /** How far the flight zooms out on its way, as MapLibre's `curve` (default 1.42) */\n curve?: number;\n /** Average speed in screens per second when `duration` is not given (default 1.2) */\n speed?: number;\n}\n\n/**\n * Tile grid of a raster's URL. 'mercator': Web Mercator (XYZ, WMTS PM), the engine's own. 'equirectangular':\n * longitudes and latitudes (Plate Carrée, EPSG:4326-like), two 256 px tiles side by side at level 0, rows from the\n * north (NASA's Trek WMTS, WorldCRS84Quad). A `TileGrid`: the tile matrices of a WMTS in any CRS (Lambert-93…), or a\n * WMS asked for each tile's box in its CRS. The last two are reprojected into Web Mercator tiles by the map's workers\n * (in the page with `workers: false`).\n */\nexport type RasterGrid = 'mercator' | 'equirectangular' | TileGrid;\n\n/** What `RasterLayer.setStyle` changes */\nexport interface RasterStyle {\n opacity: number;\n /** 0 = greyscale, 1 = original colors */\n saturation: number;\n}\n\nexport interface RasterOptions {\n /** Tile URL with {z}, {x} and {y} (256 px tiles); unused with a `loader` */\n url: string;\n /** Tile grid of `url` (default 'mercator'); with 'equirectangular', `minZoom` and `maxZoom` are levels of that\n * grid; with a `TileGrid`, they are map zooms, by default those its matrices span */\n grid?: RasterGrid;\n minZoom?: number;\n maxZoom?: number;\n opacity?: number;\n /** 0 = greyscale, 1 = original colors */\n saturation?: number;\n /** Side of the tiles' textures, pixels (default 256): more for sharper tiles drawn by a `loader` */\n size?: number;\n /** Draws each tile instead of fetching `url`: an image of `size` × `size`, null for nothing there; a rejection is\n * retried like a network error */\n loader?: (z: number, x: number, y: number, signal: AbortSignal) => Promise<ImageBitmap | null>;\n /** Credits of the tiles, HTML: shown by the attribution control while the layer is on the map */\n attribution?: string;\n}\n\nexport interface NetworkStyle {\n /** Line width, CSS pixels, or zoom stops `[[zoom, width], …]` (default 2) */\n width: Size;\n /** Values above are drawn as unreached (default 1800) */\n max: number;\n /** Darker line every `contour` value units, 0 for none (default 0) */\n contour: number;\n opacity: number;\n /** Width of the halo drawn under the lines, CSS pixels or zoom stops, 0 for none (default 0): wide and faint, the\n * reached streets add up into a heat map that fills the blocks */\n halo: Size;\n /** Opacity of the halo at the middle of a line, fading quadratically to its sides (default 0.11) */\n haloOpacity: number;\n /** Colors from 0 to `max`: `[[fraction of max, color], …]` (default green to red) */\n ramp: Ramp | undefined;\n /** Color of the parts beyond `max` or unreached (default `rgba(140, 140, 140, 0.25)`) */\n unreachedColor: string;\n /** Share of `max` over which the colors fade out before it, 0 to 1 (default 0) */\n fade: number;\n}\n\nexport interface NetworkOptions extends Partial<NetworkStyle> {\n /** Node coordinates in degrees: lon0, lat0, lon1, lat1… */\n nodes: Float64Array;\n /** Edges as node index pairs: a0, b0, a1, b1… */\n edges: Uint32Array;\n /** Line of each edge, from A to B: the points of edge e are `points[start[e] .. start[e + 1]]` (lon, lat pairs,\n * counted in points); with fewer than two points an edge is straight. Default: all straight. */\n lines?: { start: Uint32Array; points: Float64Array };\n /** Per edge, the cost of travelling it from A to B then from B to A, in value units (Infinity: closed that way;\n * closed both ways: not drawn). A point along an edge then takes the quickest way there, min(value(A) + cost from\n * A, value(B) + cost from B), as a travel time does. Without costs, values are interpolated along the edges. */\n costs?: Float32Array;\n /** Width factor of each edge (default 1): rail lines wider than streets */\n edgeWidths?: Float32Array;\n}\n\nexport interface Tiles3dStyle {\n /** Screen-space error (CSS pixels) above which a tile is refined: 16 by default, lower is finer and heavier */\n maxScreenSpaceError: number;\n opacity: number;\n /** Size of the points of point cloud tiles (`.pnts`, glTF points), CSS pixels: 2 by default */\n pointSize?: number;\n}\n\nexport interface Tiles3dOptions extends Partial<Tiles3dStyle> {\n /** URL of a `tileset.json` (3D Tiles 1.0 b3dm and pnts, 1.1 glb meshes and points, external tilesets) */\n url: string;\n}\n\nexport interface MapPointerEvent {\n point: Point;\n /** Undefined above the horizon */\n lonLat: LonLat | undefined;\n}\n\n/** What 'hoverfeature' found under the pointer */\nexport interface MapHoverFeatureEvent extends MapPointerEvent {\n /** The feature under the pointer (see `GeoMap.pickFeature`), undefined if none */\n hit: FeatureHit | undefined;\n}\n\n/** A picked feature: its layer handle, its index there and, for line, circle and fill layers, the feature itself */\nexport interface FeatureHit {\n layer: Layer;\n index: number;\n feature: Feature | undefined;\n}\n\nexport interface MapEvents {\n /** The camera started moving (a gesture, an animation or `setCamera`) */\n movestart: Camera;\n /** The camera moved */\n move: Camera;\n /** The camera stopped: no gesture held, no animation running */\n moveend: Camera;\n /** The map changed size (CSS pixels) */\n resize: { width: number; height: number };\n /** The pointer moved over the map (at most once per frame, not while dragging) */\n hover: MapPointerEvent;\n /** What is under the pointer, picked without stalling the GPU: a frame or two after 'hover', only while listened to\n * (radius and layers in `GeoMap.hoverPicking`) */\n hoverfeature: MapHoverFeatureEvent;\n /** Click without drag */\n click: MapPointerEvent;\n /** A frame was drawn; duration of the engine call in milliseconds */\n render: { ms: number };\n /** Everything in view is loaded and drawn, nothing moves: the end of a load, once after each change (as MapLibre's\n * `idle`). Tiles requested by the first frame count, so it never fires before they arrive. */\n idle: Record<string, never>;\n /** The pointer left the canvas (a mouse going out of the map, or onto a control or marker) */\n leave: Record<string, never>;\n}\n\n/** What a layer handle needs from its map */\nexport interface LayerHost {\n readonly engine: Engine;\n requestRender(): void;\n /** Forgets a removed layer */\n detach(layer: object): void;\n /** Moves a layer under `before`, or on top */\n moveLayer(layer: object, before: object | undefined): void;\n /** A layer created again in the engine (new id): put at the place of its old id, which is removed */\n replaceLayer(layer: object, old: number): void;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["/** Public types of the `isard` package */\nimport type { AttributionOptions } from './controls.ts';\nimport type { DecoderUrls } from './decoders.ts';\nimport type { Feature, Ramp, Size } from './features.ts';\nimport type { TileGrid } from './grid.ts';\nimport type { Layer } from './layers.ts';\nimport type { Camera, Engine } from './wasm/isard.js';\n\nexport type LonLat = [lon: number, lat: number];\nexport type Point = [x: number, y: number];\n\n/**\n * The named basemaps. OpenFreeMap's vector styles, OpenStreetMap data worldwide, their labels above the other layers:\n * `osm-positron` (light grey, quiet: data over it reads first), `osm-liberty` and `osm-bright` (in colour). The\n * Géoplateforme's (IGN, France): rasters (`ign-plan`, `ign-plan-grey`, `ign-ortho`, the aerial photographs) or vector\n * tiles with their labels (`ign-plan-vector`, `ign-plan-grey-vector`, the PLAN.IGN styles).\n */\nexport type BasemapName =\n | 'osm-positron'\n | 'osm-liberty'\n | 'osm-bright'\n | 'ign-plan'\n | 'ign-plan-grey'\n | 'ign-ortho'\n | 'ign-plan-vector'\n | 'ign-plan-grey-vector'\n | 'none';\n\n/**\n * @deprecated The former names of the Géoplateforme basemaps, still accepted (with a warning): the same names with the\n * `ign-` prefix (`'plan-grey'` is `'ign-plan-grey'`)\n */\nexport type LegacyBasemap = 'plan' | 'plan-grey' | 'plan-vector' | 'plan-grey-vector' | 'ortho';\n\n/** A basemap by name (see `BasemapName`; the former names of `LegacyBasemap` are deprecated) */\nexport type Basemap = BasemapName | LegacyBasemap;\n\n/**\n * The Earth's named terrain models. `'terrain-tiles'`: worldwide, the Terrain Tiles of AWS's open data registry\n * (SRTM, EU-DEM, GMTED… merged by Mapzen, 30 m in most places), the sea floor flattened at sea level. `'ign'`: France,\n * the IGN's RGE ALTI from the Géoplateforme (1 to 5 m), raised by the RAF20 geoid to heights above the ellipsoid.\n */\nexport type TerrainModel = 'terrain-tiles' | 'ign';\n\n/** How tiles encode their altitudes: `'float32'`, raw little-endian floats (`image/x-bil;bits=32`, an ArcGIS raw\n * grid); `'terrarium'`, the colors of a PNG, `R × 256 + G + B / 256 - 32768`; `'mapbox'`, those of Terrain-RGB,\n * `(R × 65536 + G × 256 + B) / 10 - 10000` */\nexport type TerrainEncoding = 'float32' | 'terrarium' | 'mapbox';\n\n/**\n * How tiles load and show. 'immediate' (default): everything visible loads, tiles show as soon as they arrive.\n * 'smooth': during flights the levels flown through are skipped, off-center tiles wait while the camera moves, tiles\n * fade in; fewer downloads, for slow networks or GPUs.\n */\nexport type LoadingMode = 'immediate' | 'smooth';\n\n/** 'globe': a sphere at low zoom, blending into Web Mercator between zooms 5 and 7, up to three levels later under a\n * tilted camera (it sees much farther than its center: the horizon stays curved) */\nexport type Projection = 'globe' | 'mercator';\n\n/** A body to draw the map on, other than the named ones (`CelestialBody`) */\nexport interface BodyOptions {\n /** Equatorial radius, metres */\n radius: number;\n /** Flattening of its ellipsoid, 0 for a sphere (default 0) */\n flattening?: number;\n /** An atmosphere: its halo around the globe, true for the Earth's light blue, or a CSS color (its alpha the\n * halo's strength) (default false) */\n atmosphere?: boolean | string;\n /** Color of the globe where no tile covers it (past the Web Mercator latitudes, 85°), a CSS color (default\n * `#808080`) */\n color?: string;\n /** Lowest and highest altitudes of its ground, metres around the ellipsoid: what its relief may raise into view\n * (default ±1 % of the radius) */\n relief?: [lowest: number, highest: number];\n}\n\n/**\n * The body the map is drawn on: 'earth' (WGS 84, the default), 'moon' (a sphere of 1 737 400 m, no atmosphere),\n * 'mars' (a sphere of 3 396 190 m, its equatorial radius, a thin dusty halo; planetocentric latitudes) or another\n * one. Zoom levels keep their meaning on screen (the Web Mercator tile pyramid), their metres follow the body:\n * altitudes, relief, buildings, 3D Tiles. Off the Earth, the map has none of the Earth's defaults: no basemap, no\n * credits, and space for its background; the Moon and Mars have NASA's relief for `terrain: true`.\n */\nexport type CelestialBody = 'earth' | 'moon' | 'mars' | BodyOptions;\n\nexport interface GeoMapOptions extends Partial<Camera> {\n /** The body the map is drawn on (default 'earth'); set at creation */\n body?: CelestialBody;\n /** Default 'globe' */\n projection?: Projection;\n /** Default 'immediate' */\n loading?: LoadingMode;\n /** The basemap (default 'osm-positron'; 'none' off the Earth) */\n basemap?: Basemap;\n /** Opacity of the IGN hillshade over the basemap (France, Géoplateforme), 0 for none (default 0) */\n hillshade?: number;\n /** Color behind the map (sky of tilted flat views), a CSS color (default `#f2f2f0`; black off the Earth) */\n background?: string;\n /** Space behind the globe: stars and atmosphere halo, fading out as the globe turns flat (default true) */\n sky?: boolean;\n /** Relief under the basemap: true for the body's terrain model (on the Earth the worldwide Terrain Tiles; NASA's on\n * the Moon and Mars: LOLA, MOLA), one of the Earth's models by name (`'ign'`: France, RGE ALTI), or its options\n * (default false; on another body, its `url` is required). Network layers are draped on it */\n terrain?: boolean | TerrainModel | TerrainOptions;\n minZoom?: number;\n maxZoom?: number;\n /** Highest pitch, degrees, up to 85 (default 70) */\n maxPitch?: number;\n /** Sky over the plane, seen when the camera is tilted towards the horizon, and the fog the ground fades into\n * (MapLibre's `setSky`); default none: the background color */\n atmosphere?: AtmosphereOptions;\n /** Mouse, touch and keyboard controls (default true) */\n interactive?: boolean;\n /** Keyboard controls once the map has the focus (it is reached with Tab): arrows pan, Shift + arrows rotate and\n * tilt, + and - zoom (Shift: two levels), 0 faces north and levels the view (default true; none when not\n * `interactive`) */\n keyboard?: boolean;\n /** Accessible name of the map, read by screen readers (default 'Map') */\n ariaLabel?: string;\n /** Where to load the engine with 3D Tiles from (`isard_bg.wasm`), when a bundler does not resolve the default URL.\n * Given without `coreWasmUrl`, maps load this engine from the start */\n wasmUrl?: string | URL;\n /** Where to load the engine without 3D Tiles from (`isard_core_bg.wasm`, a third smaller), when a bundler does not\n * resolve the default URL. Maps load it first, and the engine with 3D Tiles (`wasmUrl`) for their first 3D Tiles\n * layer only */\n coreWasmUrl?: string | URL;\n /** Where the decoding workers load the point cloud module from (`isard_points_bg.wasm`, the LAZ decoder of COPC),\n * when a bundler does not resolve the default URL. Loaded with the first point cloud only */\n pointsWasmUrl?: string | URL;\n /** Load the engine with 3D Tiles from the start (default false: it is loaded when the first 3D Tiles layer or glTF\n * model is added, the map then moving its camera and layers onto it, a stall of about a frame or two). For a map that shows 3D Tiles\n * at once: one engine downloaded instead of two. `'preload'`: the map starts on the engine without 3D Tiles and\n * downloads and compiles the other once idle, without running it: its first 3D Tiles layer does not wait for the\n * download (for a map that will show 3D Tiles later, on demand) */\n tiles3d?: boolean | 'preload';\n /** Where to load the vector basemap worker from, when a bundler does not resolve the default URL */\n basemapWorkerUrl?: string | URL;\n /** Texture size of the vector basemap's tiles, pixels (default 512: lines and edges sharp at every zoom on a screen\n * of pixel ratio 1). 256: a quarter of the drawing in the workers, of the uploads and of the GPU memory, for lines\n * and edges a little softer between two zoom levels (the tiles are shown 181 to 362 CSS pixels wide) */\n basemapTileSize?: number;\n /** Glyphs of the symbol layers: a URL with `{fontstack}` and `{range}` (MapLibre's glyph format; default\n * OpenFreeMap's fonts, Noto Sans). A vector basemap's labels take the glyphs of its style */\n glyphs?: string;\n /** Workers decoding 3D Tiles off the main thread: a count, or false to decode on the main thread (default: cores - 1,\n * 1 to 4). False (or 0) also decodes the PNG relief and reprojects the equirectangular rasters on the main thread,\n * else done by the vector basemap's workers */\n workers?: number | false;\n /** Where to load the decoding worker from, when a bundler does not resolve the default URL */\n workerUrl?: string | URL;\n /** Folders of the Draco and Basis Universal decoders, loaded by the workers on first use (default: the official\n * builds on gstatic.com and jsDelivr; self-host them for offline or locked-down networks). They run through\n * `new Function`: a Content Security Policy needs `'unsafe-eval'` (see `DecoderUrls`) */\n decoders?: Partial<DecoderUrls>;\n /** Credits at the bottom right: false for none, or its options (default true: the credits of the basemap,\n * hillshade and relief in use, compact on maps narrower than 640 px) */\n attributionControl?: boolean | AttributionOptions;\n}\n\nexport interface TerrainOptions {\n /** One of the Earth's named models (default `'terrain-tiles'` on the Earth); unused with a `url` */\n model?: TerrainModel;\n /** Altitudes of 256 × 256 tiles in `encoding`: a WMS GetMap URL with {bbox} (EPSG:3857 on the Earth, the body's\n * Mercator metres elsewhere: the sphere of its radius), a tile URL with {z}, {x} and {y}, or an ArcGIS image service\n * (a URL ending in `/ImageServer`), asked for raw altitudes in the body's Mercator (default: the `model`'s; on the\n * Moon and Mars, NASA's Trek LOLA and MOLA models) */\n url?: string;\n /** How the tiles of `url` encode their altitudes (default `'float32'`); `'terrarium'` and `'mapbox'` take a URL with\n * {z}, {x} and {y} */\n encoding?: TerrainEncoding;\n /** Vertical exaggeration, 1 for the true relief (default 1) */\n exaggeration?: number;\n /** Finest level of the relief, up to 15 (default 15; 14 for the Terrain Tiles, 8 for the Moon's and Mars's models). It\n * starts at level 6 on the Earth, coarser on bodies of a larger relief for their size (3 on the Moon and Mars) */\n maxZoom?: number;\n /** Altitudes over mainland France raised by the height of the RAF20 geoid (the French one, 0 away from France), to\n * heights above the ellipsoid (those of 3D Tiles); false keeps the altitudes as served (NGF-IGN69 for the IGN's)\n * (default true for the `'ign'` model, false otherwise) */\n geoid?: boolean;\n}\n\n/** Sky, horizon and fog over the plane, with the names and meanings of MapLibre's `setSky` */\nexport interface AtmosphereOptions {\n /** A CSS color (default `#9cc7ec`) */\n skyColor?: string;\n /** (default `#e8f1f8`) */\n horizonColor?: string;\n /** (default `#f2f5f8`) */\n fogColor?: string;\n /** Blend from the horizon to the sky color, share of the field of view above the horizon, 0-1 (default 0.6) */\n skyHorizonBlend?: number;\n /** Blend from the horizon to the fog color below the horizon, 0-1 (default 0.7) */\n horizonFogBlend?: number;\n /** Share of the distance to the far plane over which the ground fades into the fog, 0-1 (default 0.4) */\n fogGroundBlend?: number;\n}\n\n/** What can be seen from a point (`GeoMap.setViewshed`); with several observers, the colors, the opacity and the\n * cone's color are the first one's */\nexport interface ViewshedOptions {\n /** The observer */\n position: LonLat;\n /** Metres above the ground (default 1.7, eye level) */\n height?: number;\n /** Metres around the observer that are tinted (default 1000) */\n range?: number;\n /** A CSS color for what is seen (default `#2f9e44`) */\n visibleColor?: string;\n /** A CSS color for what is hidden (default `#e03131`) */\n hiddenColor?: string;\n /** How strongly the colors tint the scene, multiplied into it so that its textures and shading stay, 0-1 (default\n * 0.7) */\n opacity?: number;\n /** A CSS color for the cone drawn in 3D (one way only): its fan through the axis, at the eye's height and tilted\n * with it, from the eye to the range; solid where nothing hides it, faint behind the scene; none by default */\n coneColor?: string;\n /** To look one way only (a camera, a lookout), degrees clockwise from north; all around without it */\n direction?: number;\n /** Degrees above the horizon the cone looks, negative below (default 0) */\n tilt?: number;\n /** Angle of view across, degrees (default 60) */\n fov?: number;\n /** Angle of view up and down, degrees (default 40) */\n verticalFov?: number;\n}\n\n/** Animation of a camera move */\nexport interface AnimationOptions {\n /** Milliseconds */\n duration?: number;\n /** Progress over time, both 0 to 1 */\n easing?: (t: number) => number;\n}\n\nexport interface FlyToOptions extends AnimationOptions {\n /** How far the flight zooms out on its way, as MapLibre's `curve` (default 1.42) */\n curve?: number;\n /** Average speed in screens per second when `duration` is not given (default 1.2) */\n speed?: number;\n}\n\n/**\n * Tile grid of a raster's URL. 'mercator': Web Mercator (XYZ, WMTS PM), the engine's own. 'equirectangular':\n * longitudes and latitudes (Plate Carrée, EPSG:4326-like), two 256 px tiles side by side at level 0, rows from the\n * north (NASA's Trek WMTS, WorldCRS84Quad). A `TileGrid`: the tile matrices of a WMTS in any CRS (Lambert-93…), or a\n * WMS asked for each tile's box in its CRS. The last two are reprojected into Web Mercator tiles by the map's workers\n * (in the page with `workers: false`).\n */\nexport type RasterGrid = 'mercator' | 'equirectangular' | TileGrid;\n\n/** What `RasterLayer.setStyle` changes */\nexport interface RasterStyle {\n opacity: number;\n /** 0 = greyscale, 1 = original colors */\n saturation: number;\n}\n\nexport interface RasterOptions {\n /** Tile URL with {z}, {x} and {y} (256 px tiles); unused with a `loader` */\n url: string;\n /** Tile grid of `url` (default 'mercator'); with 'equirectangular', `minZoom` and `maxZoom` are levels of that\n * grid; with a `TileGrid`, they are map zooms, by default those its matrices span */\n grid?: RasterGrid;\n minZoom?: number;\n maxZoom?: number;\n opacity?: number;\n /** 0 = greyscale, 1 = original colors */\n saturation?: number;\n /** Side of the tiles' textures, pixels (default 256): more for sharper tiles drawn by a `loader` */\n size?: number;\n /** Draws each tile instead of fetching `url`: an image of `size` × `size`, null for nothing there; a rejection is\n * retried like a network error */\n loader?: (z: number, x: number, y: number, signal: AbortSignal) => Promise<ImageBitmap | null>;\n /** Credits of the tiles, HTML: shown by the attribution control while the layer is on the map */\n attribution?: string;\n}\n\nexport interface NetworkStyle {\n /** Line width, CSS pixels, or zoom stops `[[zoom, width], …]` (default 2) */\n width: Size;\n /** Values above are drawn as unreached (default 1800) */\n max: number;\n /** Darker line every `contour` value units, 0 for none (default 0) */\n contour: number;\n opacity: number;\n /** Width of the halo drawn under the lines, CSS pixels or zoom stops, 0 for none (default 0): wide and faint, the\n * reached streets add up into a heat map that fills the blocks */\n halo: Size;\n /** Opacity of the halo at the middle of a line, fading quadratically to its sides (default 0.11) */\n haloOpacity: number;\n /** Colors from 0 to `max`: `[[fraction of max, color], …]` (default green to red) */\n ramp: Ramp | undefined;\n /** Color of the parts beyond `max` or unreached (default `rgba(140, 140, 140, 0.25)`) */\n unreachedColor: string;\n /** Share of `max` over which the colors fade out before it, 0 to 1 (default 0) */\n fade: number;\n}\n\nexport interface NetworkOptions extends Partial<NetworkStyle> {\n /** Node coordinates in degrees: lon0, lat0, lon1, lat1… */\n nodes: Float64Array;\n /** Edges as node index pairs: a0, b0, a1, b1… */\n edges: Uint32Array;\n /** Line of each edge, from A to B: the points of edge e are `points[start[e] .. start[e + 1]]` (lon, lat pairs,\n * counted in points); with fewer than two points an edge is straight. Default: all straight. */\n lines?: { start: Uint32Array; points: Float64Array };\n /** Per edge, the cost of travelling it from A to B then from B to A, in value units (Infinity: closed that way;\n * closed both ways: not drawn). A point along an edge then takes the quickest way there, min(value(A) + cost from\n * A, value(B) + cost from B), as a travel time does. Without costs, values are interpolated along the edges. */\n costs?: Float32Array;\n /** Width factor of each edge (default 1): rail lines wider than streets */\n edgeWidths?: Float32Array;\n}\n\nexport interface Tiles3dStyle {\n /** Screen-space error (CSS pixels) above which a tile is refined: 16 by default, lower is finer and heavier */\n maxScreenSpaceError: number;\n opacity: number;\n /** Size of the points of point cloud tiles (`.pnts`, glTF points), CSS pixels: 2 by default */\n pointSize?: number;\n}\n\nexport interface Tiles3dOptions extends Partial<Tiles3dStyle> {\n /** URL of a `tileset.json` (3D Tiles 1.0 b3dm and pnts, 1.1 glb meshes and points, external tilesets) */\n url: string;\n}\n\nexport interface MapPointerEvent {\n point: Point;\n /** Undefined above the horizon */\n lonLat: LonLat | undefined;\n}\n\n/** What 'hoverfeature' found under the pointer */\nexport interface MapHoverFeatureEvent extends MapPointerEvent {\n /** The feature under the pointer (see `GeoMap.pickFeature`), undefined if none */\n hit: FeatureHit | undefined;\n}\n\n/** A picked feature: its layer handle, its index there and, for line, circle and fill layers, the feature itself */\nexport interface FeatureHit {\n layer: Layer;\n index: number;\n feature: Feature | undefined;\n}\n\nexport interface MapEvents {\n /** The camera started moving (a gesture, an animation or `setCamera`) */\n movestart: Camera;\n /** The camera moved */\n move: Camera;\n /** The camera stopped: no gesture held, no animation running */\n moveend: Camera;\n /** The map changed size (CSS pixels) */\n resize: { width: number; height: number };\n /** The pointer moved over the map (at most once per frame, not while dragging) */\n hover: MapPointerEvent;\n /** What is under the pointer, picked without stalling the GPU: a frame or two after 'hover', only while listened to\n * (radius and layers in `GeoMap.hoverPicking`) */\n hoverfeature: MapHoverFeatureEvent;\n /** Click without drag */\n click: MapPointerEvent;\n /** A frame was drawn; duration of the engine call in milliseconds */\n render: { ms: number };\n /** Everything in view is loaded and drawn, nothing moves: the end of a load, once after each change (as MapLibre's\n * `idle`). Tiles requested by the first frame count, so it never fires before they arrive. */\n idle: Record<string, never>;\n /** The pointer left the canvas (a mouse going out of the map, or onto a control or marker) */\n leave: Record<string, never>;\n}\n\n/** What a layer handle needs from its map */\nexport interface LayerHost {\n readonly engine: Engine;\n requestRender(): void;\n /** Forgets a removed layer */\n detach(layer: object): void;\n /** Moves a layer under `before`, or on top */\n moveLayer(layer: object, before: object | undefined): void;\n /** A layer created again in the engine (new id): put at the place of its old id, which is removed */\n replaceLayer(layer: object, old: number): void;\n}\n"]}
@@ -86,6 +86,8 @@ export declare class VectorTiles {
86
86
  private readonly attribution;
87
87
  /** Its raster and label layers, removed with it */
88
88
  private readonly layers;
89
+ /** Its first raster layer: the ground its labels follow */
90
+ private ground;
89
91
  /** The style once loaded, with its source resolved */
90
92
  readonly ready: Promise<{
91
93
  style: Style;
@@ -124,8 +126,10 @@ export declare class VectorTiles {
124
126
  }): RasterLayer;
125
127
  /**
126
128
  * A symbol layer with the labels of the style's symbol layers (or those `layers` keeps), updated as the view
127
- * moves: the labels of the vector tiles in view, the higher style layers placed first. It stays above the layers
128
- * added after it unless one is moved over it.
129
+ * moves: the labels of the vector tiles in view, the higher style layers placed first. With a raster layer of
130
+ * the style (`raster`), the tiles follow the levels the ground is drawn at: a tilted view takes coarser tiles far
131
+ * away, with the few labels of a lower zoom, as near the camera it takes the fine ones. Without, the tiles around
132
+ * the center at the zoom of the view. It stays above the layers added after it unless one is moved over it.
129
133
  */
130
134
  labels(options?: {
131
135
  layers?: (layer: StyleLayer) => boolean;