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

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

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

1. Получить ключ доступа к сервисам Visicom Tiles и Visicom Data API.

2. В раздел head страницы подключить СSS файлы Leaflet

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">

3. Включить загрузку самого «движка», желательно перед закрывающимся тегом body.

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

4. Определить div в котором будет отображаться карта. Этот элемент обязательно должен иметь ширину и высоту.

<div id="map" style="width: 800px; height: 400px;">

Все готово для инициализации карты.

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

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


var map = new L.Map('map', {
    center: new L.LatLng(50.455002, 30.511284), // центр карты при загрузке страницы
    zoom: 9,                                    // масштаб карты при загрузке страницы
    layers : [
        new L.TileLayer(
            'http://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png?key=YOUR_AUTHORITY_KEY',
            {
            maxZoom : 19,
            tms : true,
            attribution : 'Данные карт © 2018 ЧАО «<a href="https://visicom.ua/">Визиком</a>»',
            subdomains : '123'
            }        
        )
    ]
    });      

Не забудьте заменить YOUR_AUTHORITY_KEY на ключ, полученный при регистрации.
Подробнее о библиотеке Leaflet, смотрите сайт 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: 750px; height: 400px;"></div>
    <script>
    var map = new L.Map('map', {
        center: new L.LatLng(50.455002, 30.511284),
        zoom: 9,
        layers : [
            new L.TileLayer(
                'http://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png?key=YOUR_AUTHORITY_KEY',
                {
                maxZoom: 19,
                tms : true,
                attribution : 'Данные карт © 2018 ЧАО «<a href="https://visicom.ua/">Визиком</a>»',
                subdomains : '123'
                }        
            )
        ]
    });
    </script>
</body>
</html>

Результат