Sprite API

A sprite is a graphic that always points to the screen and is displayed on top of other objects.

Example: Sprite Properties

Add a Sprite

Use EarthInstance.addSprite( properties )

var mysprite = myearth.addSprite( {
	location: { lat : 12.5, lng : 18.7 },
	image: 'my-needle.svg',
	anchorY : 1
} );

Sprite Properties

location (lat/lng object)

{ lat: 0, lng: 0 }

The geo location where the sprite is placed.

offset (float)

0

Distance to the earth surface.

anchorX, anchorY (float)

0.5

These properties control how the sprite is aligned at the specified location.
A value of 0.5 means that the sprite is centered on this axis.
anchorY: 1 places the bottom of the sprite on the earth surface.

image (url string)

dataURI of a white circle

Provide a URL to an image from the same domain or use a dataURI.
SVG files are recommended but it is also possible to use PNG, GIF or JPG files.
Tool: Get Image as dataURI

imageAlphaOnly (float)

false

Set to true, to load your image without colors (completely white), so can you can tint it with the color property.

imageResolution (float)

128

You may need to increase this value if you are displaying the image at a large scale.
The value must be a power of two (..., 64, 128, 256, 512, 1024, ...)!

color

#FFFFFF

The color is multiplied to the image. If you want to tint the image exactly to the specified color, provide a white image or use imageAlphaOnly: true.

opacity (float)

1

0.0 - 1.0

scale or scaleX, scaleY (float)

1

rotation (float)

0

Rotation in degrees around anchorX/anchorY.

hotspot (boolean) *

false

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

hotspotRadius (float)

0.5

Use EarthInstance.showHotspots to see the hotspot area.

visible (boolean)

true

occlude (boolean)

true

Set to false if you want the sprite to always stay in front of the earth.
Example: Occlusion

Advanced:

occluded (boolean)

occluded is true if the sprite position is on the backside of the earth.

earth (EarthInstance)

Reference to the EarthInstance.

object3d (THREE.Object3D)

About THREE.js

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

Sprite 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 sprite permanently.

Sprite Events

The same events as for markers. See Marker Events.