attachMarkers関数
リファレンスの説明と例は英語です。見出しと目次は日本語です。
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 { attachMarkers } from "@johnmorrisdotca/chikyu-earth/markers";定義
function attachMarkers(element: OverlayElement, options?: MarkerOptions): Markers引数
| 名前 | 型 | 説明 |
|---|---|---|
element | OverlayElement |
|
options (省略可) | MarkerOptions | The most labels, the cluster radius and the default colour; each has a default. |
戻り値
Markers
The markers: add, addAll, update, remove, clear, groups, toggleGroup, stats and detach.
例
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);
});この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。