Увійти

Підключення карти

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

Для підключення карти необхідно виконати кілька кроків:

  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>

Результат