Dev: SM: Vector Layer API

From AAT Wiki
Jump to navigation Jump to search


The Vector Layer API uses the Raphaël Javascript library to bring next-generation browser vector graphics layers to the Streetmaps API. It achieves this by using SVL and VML.



Include the Raphaël javascript API from

Create a new vector layer, and assign it a name (in this case "test1")

var vl = myMap.AddLayer("vector",50,"test1");

Drawing Figures

To create a vector item on the vector layer, call the appropriate function, with the correct arguments, for example:

newid = vl.ellipse(31.059006, -29.875916, 31.069006, -29.895916);

and should the command create a new vector figure, a new ID that pertains to this item will be returned. This can be saved for later to be used in callbacks.

Consult the reference for a full list of supported commands.


Three callbacks are supported: Mouse over, Mouse out and Mouse click. The callback is triggered when the action occurs anywhere on a solid area of a vector item (if it's filled, it acts on the entire surface, if it's just an outline, it will only work on the outline).

To set the callbacks for a vector layer in the variable 'vl'


When the action triggers, the appropriate callback will be called, with the ID number of the vector item in it (the ID number is returned from a vector figure creation command).



set(attribute, parameter)
The name of the style attribute to set - this can be used to control the look of the vector figures that you draw. A quick overview is available at The Rafael reference, or a more complete explanation is available at the SVG specification
The value to set for attribute.
common attributes
stroke - The colour of lines. An HTML-style colour, eg: set("stroke", "#ff0000")
stroke-width - The width of lines. A positive integer number
fill - The fill colour of a closed polygon. An HTML-style colour, eg: set("fill", "#0000ff")
fill-opacity - The transparent-ness of the fill colour, A value between 0 (transparent) and 1.0 (opaque). eg: set("fill-opacity", 0.5)


The name of the style attribute to clear - see set for more details.


polygon( [x1, y1, x2, y2, ... xn, yn] )
xn, yn
Alternating x (longitude) and y (latitude) coordinates describing a polygon. The first point will be joined to the last point, to close the figure.


ellipse( x1, y1, x2, y2 )
x1, y1, x2, y2
The ellipse will be drawn to touch the sides of the rectangle described by the corners at (x1, y1) and (x2, y2)


line( x1, y1, x2, y2 )
x1, y1, x2, y2
The line will be drawn from (x1, y1) to (x2, y2)

Hide / Show

vl.Hide() Hides the Vector layer
vl.Show() Shows the Vector layer

Remove Elements

vl.Remove(id) Remove vector element of specified ID
vl.RemoveAll() Remove all vector elements


arrow( x, y, arrowhead_size, bearing )
x, y
The X and Y coordinates of the center of the base of the arrow.
The size of the arrowhead base, in pixels - the length is 1.3 times this
The bearing of the arrow, in radians. Here is a Radian Explanation