Marker API

A marker is 3D object at a given lat/lng location. You can choose from built-in meshes such as pins and flags or use your own 3D geometry.

Example (Marker Properties)

Add a Marker

Use EarthInstance.addMarker( properties )

var mymarker = myearth.addMarker( {
	location: { lat : 22.5, lng : 20 },
	mesh: ["Pin2", "Needle"],
	color: "#00FF00"
} );

Marker Properties

location (lat/lng object)

{ lat: 0, lng: 0 }

The geo location where the marker is placed.

offset (float)

0

Distance to the earth surface.

mesh (string) or (array of strings)

["Pin", "Needle"]

A marker consists of one or more meshes. The builtin mesh names are:
Pin, Pin2, Pin3, Flag, Flag2, Flag3, Needle, X, Diamond, Marker and Cone.
Example: Builtin Marker Meshes
Example: Custom Marker Meshes

color, color2, ..., color8 (color)

#FF0000

Colors of the meshes (in the order in which they are defined).

scale or scaleX, scaleY, scaleZ (float)

1

rotationX, rotationY, rotationZ (float)

0

Rotation in degrees.

lookAt (lat/lng object) or false

false

The marker is rotated around the Y axis to point at the defined lat/lng position.
Example: Look at Location

hotspot (boolean) *

false

Set to true if you add mouse/touch events to this marker. * After initation you can set hotspot to false to disable mouse/touch events temporarily.
Example: Click Events

hotspotRadius (float)

0.5

hotspotHeight (float)

1.5

Use EarthInstance.showHotspots to see the hotspot area.

opacity (float)

1

0.0 - 1.0

transparent (boolean)

false (if opacity not set)

Set to true if you want to use opacity.

visible (boolean)

true

Advanced:

align (boolean)

true

If set to false the marker points up and is not aligned with the earth surface.

occluded (boolean) or undefined

occluded is true if the marker is on the backside of the earth.

shininess (float)

0.1

0.0 - 1.0

Only if light: "sun". Shininess of the surface.

flatShading (boolean)

false

Only if light: "sun" or light: "simple". Unsmoothed shading of the surface.

castShadow (boolean)

true

Cast a shadow on the earth or other markers. See shadows.

receiveShadow (boolean)

false

Receive shadows of the earth or other markers. See shadows.

earth (EarthInstance)

Reference to the EarthInstance.

object3d (THREE.Object3D)

About THREE.js

 
You can add custom properties that are copied over to the MarkerInstance.

Marker Methods

animate( property, value, animationProperties ) returns AnimationInstance

property
Name of the animatable property (String)
value
Target value
animationProperties
Object of animation properties

Example: Animatable Properties

stopAllAnimations( triggerComplete, jumpToEnd )

triggerComplete
(boolean) default: false | Calls the complete functions
jumpToEnd
(boolean) default: false | Sets the properties immediately to their end values

Stops all animations of this object. To stop a specific animation use AnimationInstance.stop()

remove( )

Removes the marker permanently.

Marker Events

click, mousedown, mouseup

The events is triggered when you click or touch the hotspot area.

mymarker.addEventListener( 'click', function( ) {
	this.earth.location = this.location;
	console.log( this );
} );

mymarker.addEventListener( 'click', function( ) {
	alert( this.myCustomProperty );
} );

mouseover, mouseout

The events are triggered when you move the mouse over the hotspot area.

mymarker.addEventListener( 'mouseover', function( ) {
	myoverlay.location = this.location;
	myoverlay.content = this.myMarkerTitle;
	myoverlay.visible = true;
} );

mymarker.addEventListener( 'mouseout', function( ) {
	myoverlay.visible = false;
} );
 
The preceding events are only triggered if hotspot is true. You may need to adjust the hotspotRadius and hotspotHeight.

occlusion

The event is triggered when the marker is added and when the occluded property changes.
Example: Occlusion

 
this refers to the MarkerInstance.