Reference · Markers on the globe
attachMarkersfunction
Put markers on a globe, for either look: dots drawn in one pass on a canvas, a few labels as real buttons, crowded places gathered into clusters. It draws only when the view or the markers change, reads no layout to place a label, and shows no more labels than maxLabels. Hovering, clicking or focusing a marker fires chikyu-marker-hover, chikyu-marker-click and chikyu-marker-focus on the element, with your own data in the detail.
Import it
import { attachMarkers } from "@johnmorrisdotca/chikyu-earth/markers";Definition
function attachMarkers(element: OverlayElement, options?: MarkerOptions): MarkersParameters
| Name | Type | Description |
|---|---|---|
element | OverlayElement |
|
options (optional) | MarkerOptions | The most labels, the cluster radius and the default colour; each has a default. |
Returns
Markers
The markers: add, addAll, update, remove, clear, groups, toggleGroup, stats and detach.
Examples
import "@johnmorrisdotca/chikyu-earth/element";
import { attachMarkers, type MarkerEventDetail } from "@johnmorrisdotca/chikyu-earth/markers";
const earth = document.querySelector("chikyu-earth")!;
const markers = attachMarkers(earth);
markers.add({ id: "tokyo", lon: 139.69, lat: 35.69, label: "Tokyo", group: "Cities" });
earth.addEventListener("chikyu-marker-click", (event) => {
const { marker } = (event as CustomEvent<MarkerEventDetail>).detail;
console.log("chose", marker?.label);
});