Image API

An image is a flat graphic that is aligned with the earth's surface.
It works much like a marker.

Example: Image Properties

Add an Image

Use EarthInstance.addImage( properties )

var myimage = myearth.addImage( {
	location: { lat : 12.5, lng : 18.7 },
	image: 'my-symbol.svg'
} );

Image Properties

location (lat/lng object)

{ lat: 0, lng: 0 }

The geo location where the image is placed.

offset (float)

0

Distance to 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 on 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

rotationX, rotationY, rotationZ (float)

0

Rotation in degrees.

lookAt (lat/lng object) or false

false

The image 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 events to this image. * 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

Advanced:

align (boolean)

true

If set to false the image is not aligned with the earth surface.

occluded (boolean)

occluded is true if the image 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 ImageInstance.

Image 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 image permanently.

Image Events

The same events as for markers. See Marker Events.