Skip to the content

Chikyu Earth地球

A line-drawn globe of the world's countries that turns at the Earth's own rate, with an optional realistic Earth from space and markers for any place.

Chikyu is the Japanese word 地球 for the Earth. About the name

Contents

Reference · Markers on the globe

MarkerEventDetailtype

What the chikyu-marker-hover, chikyu-marker-click and chikyu-marker-focus events carry in event.detail. A cluster click has marker: null and cluster listing the ids in it.

Import it

import type { MarkerEventDetail } from "@johnmorrisdotca/chikyu-earth/markers";

Definition

interface MarkerEventDetail {
    marker: MarkerInput | null;
    cluster?: string[];
    x: number;
    y: number;
}

Members

NameTypeDescription
markerMarkerInput | null
cluster (optional)string[] | undefined
xnumber

Where the pointer or the marker is, in CSS pixels inside the globe's box.

ynumber

Examples

import type { MarkerEventDetail } from "@johnmorrisdotca/chikyu-earth/markers";

const on = (event: Event): void => {
  const detail = (event as CustomEvent<MarkerEventDetail>).detail;
  console.log(detail.marker?.label ?? `${detail.cluster?.length} places`, detail.x, detail.y);
};
console.log(typeof on);
function

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/chikyu-earth 0.11.0.