Sign In

Map Connection

Page Preparation

To connect the map, you need to complete several steps:

  1. Get an access key to the "Visicom Tiles" and "Visicom Data API" services.
  2. In the head section of the page, connect the Leaflet CSS files.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
  1. Include the loading of the "engine" itself, preferably before the closing body tag.
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
  1. Define a div in which the map will be displayed. This element must have width and height.
<div id="map" style="width: 100%; height: 400px;">

Map Initialization

To display our tiles, you need to insert the following code between script tags:

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: 'Map data © "<a href="https://api.visicom.ua/">Visicom</a>" JSC',
                maxZoom: 19,
                subdomains: '123',
                tms: true
            })
        ]
    });
});

Don't forget to replace YOUR_API_KEY with the key obtained during registration. For more details about the Leaflet library, see the website http://leafletjs.com.

For convenient search on the map, we recommend connecting our search widget.

Complete Example

<!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: 'Map data © "<a href="https://api.visicom.ua/">Visicom</a>" JSC',
                        maxZoom: 19,
                        subdomains: '123',
                        tms: true
                    })
                ]
            });
        });
    </script>
</body>
</html>

Result