Created by Unknown User (w19570), last modified by Alpha Lau on Jul 10, 2013

[ Whereis® API Home ] [ Developers' Guide ] [ Layers ]

The EMS JavaScript API supplies a set of standard and semi-customisable icons ready for you to use. Alternatively, you can create your own design as a gif, jpg, or png and make it available to the API via its URL.

Icons are defined as functions (factory methods), which return the icon that the function represents.

Icon

Name

Sample JavaScript CodeExample

Blue crosshairs / hover

EMS.Icon.crosshair()
Map with crosshair markers
Red crosshairs / hover
EMS.Icon.crosshair(EMS.Color.RED)
Map with crosshair markers
Green crosshairs / hover
EMS.Icon.crosshair(EMS.Color.GREEN)
Map with crosshair markers

Start icon

EMS.Icon.start()
 

End icon

EMS.Icon.end()
 

First via point

EMS.Icon.via(1)
 

Second via point

EMS.Icon.via(2)
 

Third via point

EMS.Icon.via(3)
 

Fourth via point

EMS.Icon.via(4)
 

Fifth via point

EMS.Icon.via(5)
 

"Point of Interest" Marker

var icon = EMS.Icon.poi(
 "10",                    // Number text
 new EMS.Color("DEDEDE"), // Text color
 EMS.Gradient.GREEN,      // Background gradient color
 new EMS.Gradient("1D4242", "71C9C1")); // Hover gradient
Map with POI Markers example

"MultiPOI" grouping of 10 POI markers,

usually of the same type

 Cluster Marker

"Babushka" grouping of 10 POI markers

of different types

 Map with styled cluster markers
Custom icons

You can create your own icon design by referencing an online gif, jpg, or png, by passing in its URL to the following constructor.

new OpenLayers.Icon(<url>)

NEXT PAGE

NOTES

Displaying icons on a map

Icon

For an EMS.Icon to be displayed on a EMS.Map, it should be wrapped in an EMS Marker with a EMS.LonLat to give it a latitude and longitude.

eg.

var blue = new EMS.Marker(
 new EMS.LonLat(
   144.965, -37.811),
 EMS.Icon.crosshair());

Please refer to the Markers page for more information.

 

 

Images for customised icons

Icon

When used with a marker, the icon will be centred on the marker point.

If you are using a customised icon shaped like an arrow or a pin, you need to construct it in such a way – e.g. by use of transparency – that its point is at the centre of the image or it will seem to point to the wrong location.

Icon

For more information, refer to the JavaScript Command Reference.

Attachments:

babpoi.bmp (image/bmp)
via1.bmp (image/bmp)
poi.bmp (image/bmp)
via5.bmp (image/bmp)
via4.bmp (image/bmp)
multipoi.bmp (image/bmp)
end.bmp (image/bmp)
cross.bmp (image/bmp)
start.bmp (image/bmp)
multimarker.png (image/png)
marker.png (image/png)
cross_hair.png (image/png)
babushkamarker.png (image/png)
via3.bmp (image/bmp)
via2.bmp (image/bmp)
purplepoi.bmp (image/bmp)
brownpoi.bmp (image/bmp)
greenmulti.bmp (image/bmp)
brownmulti.bmp (image/bmp)
cross-hair-red.png (image/png)
cross-hair-blue.png (image/png)
cross-hair-green.png (image/png)