Подключение карты

Подготовка страницы

Для подключения карты необходимо выполнить несколько шагов:

  1. Получить ключ доступа к сервисам «Visicom Tiles» и «Visicom Data API».
  2. В раздел head страницы подключить СSS файлы Leaflet.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
  1. Включить загрузку самого «движка», желательно перед закрывающимся тегом body.
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
  1. Определить div, в котором будет отображаться карта. Этот элемент обязательно должен иметь ширину и высоту.
<div id="map" style="width: 100%; height: 400px;">

Инициализация карты

Для отображения наших тайлов необходимо вставить следующий код между тегами script:

document.addEventListener('DOMContentLoaded', function () {
    var map = new L.Map('map', {
        center: new L.LatLng(50.455002, 30.511284),
        zoom: 9,
        layers: [
            new L.TileLayer('https://tms{s}.visicom.ua/2.0.0/planet3/base/{z}/{x}/{y}.png?key=YOUR_API_KEY', {
                attribution: 'Данные карт © АО «<a href="https://api.visicom.ua/">Визиком</a>»',
                maxZoom: 19,
                subdomains: '123',
                tms: true
            })
        ]
    });
});

Не забудьте заменить YOUR_API_KEY на ключ, полученный при регистрации. Подробнее о библиотеке Leaflet, смотрите на сайте http://leafletjs.com.

Для удобного поиска на карте мы советуем подключить наш поисковый виджет.

Весь пример

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Visicom Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var map = new L.Map('map', {
                center: new L.LatLng(50.455002, 30.511284),
                zoom: 9,
                layers: [
                    new L.TileLayer('https://tms{s}.visicom.ua/2.0.0/planet3/base/{z}/{x}/{y}.png?key=YOUR_API_KEY', {
                        attribution: 'Данные карт © АО «<a href="https://api.visicom.ua/">Визиком</a>»',
                        maxZoom: 19,
                        subdomains: '123',
                        tms: true
                    })
                ]
            });
        });
    </script>
</body>
</html>

Результат