Визиком карты

API reference

Core

VMapObject VMap VLayer
VMarker VInfoWindow VMarkerIcon
VLabel VLine VMultiLine
VArea VRect  

Class VMapObject

This class is the base class for all objects placed on the map.

JSON

{
    coords: [],
    type : "marker | line | area | label | layer",
    options: { },
    style: { }
}
  • coords - coordinates of the object, set in an array [{lng: ..., lat: ...}, {...}].
  • type - indicates the type of object. Types for each of the elements listed in their description.
  • style - display style element.

Object representation:

Constructors

Constructor
VMapObject()

Methods

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.

to contents

Class VRect

The rectangular area on the map. Sets by 2 extreme points, the bottom left and the right top.

Constructors

Constructor
VRect([{lng, lat}, ...])

Methods

Method Return Description
leftBottom() <{lng, lat}>  Returns the left bottom point of rect.
rightTop() <{lng, lat}>  Returns the right bottom point of rect.

to contents

Class VInfoWindow

Info window is used to create commentary, descriptions of a given point. Allows you to specify HTML text for the title and description. Can be set as a marker and put on the map as a separate object.

Constructors

Constructor
VInfoWindow(<String> header, <String> text, <object> options)
VInfoWindow(<String> html, <object> options)

Methods

Method Description
scrollOnOpen(<Boolean> scrool_on_open) Sets the flag at the opening of the scroll card information window.
size(<int> width, <int> height) Sets the size of information window in pixels. Maximum window size 800x600 pixels.

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.

Options of Information window

Id Description
alwaysOpen the information window will always open on the screen.
canClose specifi closing the information window by the user.

to contents

Class VLayer

Layers are used for grouping objects on the map.

Constructors

Constructor
VLayer()

Methods

Method Return Description
add(<VMapObject> object) Adds a child object.
remove(<VMapObject> object) Removes a child object.
visible(<Boolean> bool) Sets the visibility flag of the object.
visible() <Boolean> Returns the visibility flag of the object.
childs() <VMapObject[]> Returns a list of child elements.

to contents

Class VMap

VMap is the main class of map's engine.

Constructors

Constructor
VMap(<HTMLElement> viewport)

Methods

Method Return Description
сenter() <{lng, lat}> Returns the coordinates of the center of the map.
сenter(<{lng, lat}>coords) Set the coordinates of the center.
сenter(<{lng, lat}>coords, <int> zoom) Set the coordinates of the center and zoom level.
сenter(<VRect> rect) Sets the coordinates of the current map center and zoom level most appropriate for a given area.
zoom() <int> Returns zoom level of the map.
zoom(<int> index) Sets the current zoom level (0..18).
repaint() Repaint of the map.
add(<VMapObject> object) Adds a child object.
remove(<VMapObject> object) Removes a child object.
language() <String> Returns current language (supported languages: "ru", "ua", "en").
language(<String>lang) Set current map language (supported languages: "ru", "ua", "en").
clientRect() <VRect Returns the coordinates of the current user-visible region.

Events

Event Return Description
mouseclick(<function> callback) {lng, lat} coords Event fired when the user clicks the mouse.
mousedown(<function> callback) {lng, lat} coords Event fired when the user push the mouse button.
mouseup(<function> callback) {lng, lat} coords Event fired when the user user releases the mouse button.
mousedblclick(<function> callback) {lng, lat} coords Event fired when the user double clicks the mouse.

Event Description
startdrag(<function> callback) Start dragging.
dragging(<function> callback) Dragging.
enddrag(<function> callback) The end of the drag

Событие Описание
beforezoomchange(<function> callback) Event fires before switching zoom level. If the callback function returns false switching scale blocked.
onzoomchange(<function> callback) Events fired afters switching zoom level.

к оглавлению

Класс VLabel

Text label.

JSON:

{
    coords: [],
    type : "label",
    html: "",
    childs: []
}
  • html - HTML text.

Object representation:

Constructors

Constructor
VLabel(<String> html)

Methods

Method Description
html(<String> html) Sets the HTML-text.

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.

to contents

Class VMarker

The marker used to mark a certain point on the map.
For the marker can set your own image and a message box that describes the given point.

JSON

{
    coords: [{lng: 30.5214, lat: 50.4650}],
    type : "marker",
    options:
    {
        draggable: true
    }
}

  • coords - coordinates of the object, set in an array [{lng: ..., lat: ...}, {...}].
  • type - indicates the type of object.Types for each of the elements listed in their description.
  • childs - child elements.
  • style - display style element.

Object representation:

Constructors

Constructor
VMarker(<{lng, lat}> object, <VMarkerIcon> [icon])

Methods

Method Return Description
info() Returns a reference to the current message box marker.
info(<VInfoWindow> info_window) VInfoWindow Sets the info window for marker.
info(<String> html, [options]) Sets the message box with the specified HTML text.
info(<String> header, <String> text, [options]) Sets the message box with the specified header and HTML text.
draggable(<Boolean> draggable) <Boolean> Sets the flag of the possibility of dragging the marker by the user.
hint(<String> html) Sets the tooltip. Set HTML-text.
icon(<VMarkerIcon> icon) Sets the icon for the marker.

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.

Events

Event Description
startdrag(<function> callback) Start dragging.
dragging(<function> callback) Dragging.
enddrag(<function> callback) The end of the drag

to contents

Class VMarkerIcon

Icon for the marker.

Constructors

Constructor
VMarkerIcon(<int> width, <int> height, <String> image_src)

Methods

Method Return Description
height() <int>  Returns the size of the image vertically.
source() <String>  Returns the path to the image.
width() <int>  Returns the size of the image in the horizontal.

to contents

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.

to contents

Класс VMultiLine

Polyline. 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
VMultiLine[ [{lng, lat}, ...], [...] ]

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.

to contents

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.

to contents