Dev: SM: Vector Layer API

From AAT Wiki
Jump to: navigation, search

Introduction

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.

Usage

Initialization

Include the Raphaël javascript API from

https://www.streetmaps.co.za/raphael.js

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.

Callbacks

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'

vl.SetMouseOver("MyMouseOver");
vl.SetMouseOut("MyMouseOver");
vl.SetMouseClick("MyMouseOver");

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).

Reference

set

set(attribute, parameter)
attribute
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
parameter
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)

clear

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

polygon

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

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

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

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