🚧 A few events without obvious meaning have ? appended to them

ctx?.reearth.on("mousedown", handleMouseDown);
    ctx?.reearth.on("mousemove", handleMouseMove);
    ctx?.reearth.on("mouseup", handleMouseUp);
    return () => {
      ctx?.reearth.off("mousedown", handleMouseDown);
      ctx?.reearth.off("mousemove", handleMouseMove);
      ctx?.reearth.off("mouseup", handleMouseUp);

Namespace: reearth.on , reearth.off and reearth.once

Description:

These are events triggered by specific actions, mostly mouse and key events. The following methods are related to these events.

reearth.on , reearth.off and reearth.once

reearth.on will basically begin listening to events while reearth.off will stop listening to events. reearth.once will listen to an event once and then stop listening.

Events:

cameramove

This event is fired when the camera moves and returns the camera position values.

Syntax example

reearth.on("cameramove", event: CameraPosition => {})

The CameraPosition which represents the position and orientation of a camera in a 3D space has the following type definition:

type CameraPosition = {
  lat: number; // Latitude, expressed in degrees.
  lng: number; // Longitude, expressed in degrees.
  height: number; // Height above the ground, expressed in meters.
  heading: number; // Horizontal angle of the camera's orientation, expressed in radians.
  pitch: number; // Vertical angle of the camera's orientation, expressed in radians.
  roll: number; // Rotation of the camera around its axis, expressed in radians.
  fov: number; // Field of view, expressed in radians. This represents the extent of the observable world that is seen at any given moment through the camera lens.
};

click

This event is fired when a the mouse is clicked and returns the mouse cursor’s position.

Syntax example

reearth.on("click", event: MouseEvent => {})

The MouseEvent which represents the mouse cursor’s position has the following type definition

type MouseEvent = {
  x?: number; // The horizontal coordinate of the mouse pointer's position relative to the viewport, typically measured in pixels.
  y?: number; // The vertical coordinate of the mouse pointer's position relative to the viewport, typically measured in pixels.
  lat?: number; // The latitude coordinate corresponding to the mouse pointer's position on a geographical map.
  lng?: number; // The longitude coordinate corresponding to the mouse pointer's position on a geographical map.
  height?: number; // The height or altitude of the mouse pointer's position, if applicable (e.g., in a 3D environment).
  layerId?: string; // The identifier of the layer associated with the mouse event, if applicable.
  delta?: number; // The change in value associated with the mouse event, typically used for mouse wheel scrolling or other incremental actions.
};

close

This event is fired on close and returns an empty array.

Syntax example

reearth.on("close", [])

doubleClick

This event is fired when a double click is made and the mouse cursor’s position similar to click event.

layeredit

This event is fired when the layer is edited and returns value of type LayerEditEvent

Syntax example

reearth.on("layeredit", event: LayerEditEvent => {console.log(event})

The LayerEditEvent type definition

type LayerEditEvent = {
  layerId: string | undefined; // A string representing the identifier of the layer being edited. It could be undefined if no layer is specified.
  scale?: { 
	  width: number; // The width of the layer, expressed in units (e.g., meters, pixels).
	  length: number; // The length of the layer, expressed in units.
	  height: number; // The height of the layer, expressed in units.
	  location: LatLngHeight // An object representing the location of the layer, 
	};
  rotate?: { 
	  heading: number; // The horizontal angle of rotation, expressed in radians.
	  pitch: number; // The vertical angle of rotation, expressed in radians.
	  roll: number // The rotation of the layer around its axis, expressed in radians.
	};
};

message

This event is fired when a message is sent and returns any type

Syntax example

reearth.on("message", event: any => {})

middleclick

This event is triggered when a pointing device button with a middle button (such as a mouse button) is pressed clicked over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("middleclick", event: MouseEvent => {})

middledown

This event is triggered when a pointing device button with a middle button (such as a mouse button) is pressed down over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("middledown", event: MouseEvent => {});

middleup

This event is fired when a pointing device button with a middle button (such as a mouse button) is released while the pointer is over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("middleup", event: MouseEvent => {});

mousedown

This event is triggered when a pointing device button (such as a mouse button) is pressed down over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("mousedown", event: MouseEvent => {})

mouseenter

This event is fired when a pointing device (such as a mouse cursor) enters the boundaries of an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("mouseenter", event: MouseEvent => {})

mouseleave

This event is fired when a pointing device (such as a mouse cursor) leaves the boundaries of an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("mouseleave", event: MouseEvent => {})

mousemove

This event is fired when a pointing device (such as a mouse cursor) moves over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("mousemove", event: MouseEvent => {})

mouseup

This event is fired when a pointing device button (such as a mouse button) is released while the pointer is over an element and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("mouseup", event: MouseEvent => {})

resize

This event is triggered when the size of the browser window or an element is changed and return a ViewPortSize

Syntax example

reearth.on("resize", event: ViewPortSize => {})

Type definition for ViewPortSize

type ViewportSize = {
	 width: number; // width of the current window
   height: number; // height of the current window
   isMobile: boolean; // boolean to show whether device used is mobile
};

rightclick

This event is triggered when a pointing device button (such as a mouse button) is right clicked and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("resize", event: ViewPortSize => {})

rightdown

Similar to rightclick event, this event is triggered when a pointing device button ( such as a mouse button ) is pressed down and returns the MouseEvent described in the click event ( number 2 ).

Syntax example

reearth.on("rightdown", event: MouseEvent => {})