Graphics

Visicom Maps API allows you to draw graphics primitives.

Examples:

Adding to the map polyline and polygon.

Display in browser:

Drawing an arbitrary line on the map:

// Create layer
var layer = new VLayer();
map.add(layer);
var line =
{
    coords: [{
        lng: 30.5214,
        lat: 50.4650
    }, {
        lng: 30.5114,
        lat: 50.4550
    }],
    type: "line",
    style:
    {
        color: "#ff0000",
        lineWidth: 7,
        opacity: 0.4
    }
}
layer.add(line);
    
map.repaint();

Creating object with VArea JSON-code:

// Create the layer
var layer = new VLayer();
map.add(layer);
// Specify a polygon of 5 points
var area =
{
coords: [{lng: 30.5214, lat: 50.4650},
{lng: 30.5114, lat: 50.4550},
{lng: 30.5614, lat: 50.4550}],
type: "area",
style:
{
color: "#ff0000",
lineWidth: 7,
opacity: 0.4
},
childs: []
}
layer.add(area);
map.repaint();

Class VLine

Line. It is used to draw routes, tracks, etc.

JSON:

{
    coords: [{lng: 30.5214, lat: 50.4650}, {lng: 30.5114, lat: 50.4550}],
    type : "line",
    style:
    {
        color: "#ff0000",
        lineWidth: 7,
        opacity: 0.4
    }
}

• coords - points of the line.
• style:
  • color - color of the line.
  • lineWidth - width of the line.
  • opacity - opacity.

Object representation:

Constructors

Constructor
VLine(<VPoint[]> array_of_points)

Methods

Method	Return	Description
color(<String> color)		Sets the color line (examples: "#ff00ff", "red", "white").
lineWidth(<int> lineWidth)		Sets the line width in pixels.
opacity(<float> opacity)		Sets the transparency for lines in the range 0..1 (examples: 0.7, 1.0, 0.0).
distance()	<int>	Returns the distance of the line in meters.

Methods inherited from VMapObject

Method	Return	Description
visible(<Boolean> bool)		Sets the visibility flag of the object.
visible()	<Boolean>	Returns the visibility flag of the object.
coords([{lng, lat}] coords)		Sets the coordinates of the object.
coords()	[{lng, lat}]	Returns the coordinates of the object.
move(<int> x, <int> y)		The shift of the object on a certain number of pixels in screen coordinates.
bounds()	<VRect>	Returns the object border.

Class VArea

Polygon. Used for display of polygonal objects.

JSON:

{
    coords: [{lng: 30.5214, lat: 50.4650},
        {lng: 30.5114, lat: 50.4550},
        {lng: 30.5614, lat: 50.4550}],
    type: "area",
    style:
    {
        color: "#ff0000",
        opacity: 0.4
    }
}

• coords - array of points in the polygon.
• style:
  • color - fill color.
  • opacity - transparency. Set the fractional values in the range 0 .. 1.

Object representation:

Constructors

Constructor
VArea([{lng, lat}] coords)

Methods

Method	Description
color(<String> color)	Sets the color of the polygon (examples: "#ff00ff", "red", "white").
opacity(<float> opacity)	Sets the degree of transparency. For the polygon is default equals 0,35.

Methods inherited from VMapObject

Method	Return	Description
visible(<Boolean> bool)		Sets the visibility flag of the object.
visible()	<Boolean>	Returns the visibility flag of the object.
coords([{lng, lat}] coords)		Sets the coordinates of the object.
coords()	[{lng, lat}]	Returns the coordinates of the object.
move(<int> x, <int> y)		The shift of the object on a certain number of pixels in screen coordinates.
bounds()	<VRect>	Returns the object border.