Покрокова установка

1. Підключення скрипта карти

Додайте на сторінку наступний код:

<script
   type="text/javascript"
   src="http://maps.visicom.ua/api/2.0.0/map/world_ua.js"></script>
 
<div id="viewport" style="width: 740px; height: 580px;">
  <a id="visicom_copyright_link"
     href="http://maps.visicom.ua/">карта криму</a>
</div>

Даний код підключає скрипт з нашого серверу і розміщує елемент (viewport), в якому буде відображатись карта.

2. Завантаження карти

Наступний скрипт на вашій сторінці задасть початковий масштаб і центр карти

<script type="text/javascript">
 var map;
 function createVisicomMap() {
  map = new VMap(document.getElementById('viewport'));
  var point = {lng: 30.5112, lat: 50.4550};
  map.center(point, 5);
 }
</script>

Функція createVisicomMap() викликається ядром на етапі завантаження і ініціалізації об'єкту карти.

В конструктор карти передається елемент, в якому карту планується відобразити.

Масштабная лінійка Visicom Maps має шкалу з 19-ти масштабів, з індексами від 0 (видно весь світ) до 18-ого (дім крупним планом).

Стрічка map.center(point, 5) задає центрування в точці з координатами (30.5112, 50.4550) і індексом масштабу 5.

2. Встановлення точок

Для встановлення однієї або декількох точок на карті використовуються маркери.

// Створення маркера
var marker = new VMarker({lng: 30.5114, lat: 50.4552});
// Задаємо можливість перетягування
marker.draggable(true);
// Спливаюча підказка
marker.hint('Спливаюча підказка');
// Задаємо заголовок і текст інформаційного вікна
marker.info('<b>Привіт, Світ!</b>');
// Додаємо маркер на карту
map.add(marker);
// Перерисовка карти
map.repaint();

2.1 Встановлення іконки для маркера

В наступному прикладі в конструктор маркера передається іконка:

var icon = new VMarkerIcon(24, 24, 
    "http://maps.visicom.ua/common/icons/poi/tennis.png");
var marker = new VMarker( { lng: 30.5114, lat: 50.4552 }, icon);
map.add(marker);
map.repaint();

3. Работа з сервісами

Сервіси дозволяють росширити базовий функціонал. Додати скрипти разрахунку маршруту, пошук по адресній базі.

Увага ! Для роботи з сервісами необхідна авторизація

3.1 Маршрут

Наступний приклад разраховує і відображає на карті автомобільний маршрут між двома точками.

VMap.AUTH_KEY = "AUTHORITYKEY";
VRemoteCall.request("route",
  {lng: 30.5112, lat: 50.4550},
  {lng: 30.5212, lat: 50.4650},
  function callback(route) {
   map.add(route);
   map.repaint();
 }
);

3.1 Пошукова форма

Даний плагін дозволяє встановити на сторінку пошукову форму по адресам. Даний метод не вимагає істотного програмування, достатньо лише скопіювати приведений нижче приклад на вашу сторінку.

Для встановлення пошукової форми необхідне підключення наступного скрипта:

<script type="text/javascript" src="http://maps.visicom.ua/api/2.0.0//services/address.js"></script>

<div id="searchWidget" style="width: 600px; height: 140px;">
</div>
<div id="viewport5" style="float: left; width: 600px; height: 200px;">
 <a id="visicom_copyright_link" href="http://maps.visicom.ua/">карта крыма</a>
</div>
<script type="text/javascript">
 
var map;
function createVisicomMap() {
   VMap.AUTH_KEY = "AUTHORITYKEY";
 
   map = new VMap(document.getElementById('viewport'));
   var point = {lng: 30.5112, lat: 50.4550};
   map.center(point, 15);
 
   var searchWidget = new VSearchWidget(map, document.getElementById('searchWidget'));
   searchWidget.show();
 }
</script>

У випадку, якщо необхідно разширити функціонал пошуку, можна скористатись сервісом Адреса чи більш низькорівневим XMLAPI.