1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>Wialon Playground - Gurtam map</title>
6
    <script type="text/javascript" src="https://hst-api.wialon.com/wsdk/script/wialon.js"></script>
7
</head>
8
<body>
9
​
10
<!-- load map -->
11
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
12
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
13
​
14
<div id="map"></div>
15
​
16
</body>
17
</html>
HTML
4
 
1
#map{
2
    width:500px;
3
    height:400px;
4
}
CSS
25
 
1
// execute when DOM ready
2
$(document).ready(function () {
3
    wialon.core.Session.getInstance().initSession("https://hst-api.wialon.com"); // init session
4
5
    wialon.core.Session.getInstance().loginToken("5dce19710a5e26ab8b7b8986cb3c49e58C291791B7F0A7AEB8AFBFCEED7DC03BC48FF5F8", "", // try to login
6
        function (code) { // login callback
7
            // if error code - print error message
8
            if (code) { return; }
9
10
            // create a map in the "map" div, set the view to a given place and zoom
11
            var map = L.map('map').setView([53.9, 27.55], 10);
12
13
14
            L.tileLayer('https://{host}/gis_render/{x}_{y}_{z}/{userId}/tile.png', {
15
                // options to reverse Z
16
                maxZoom: 17,
17
                zoomReverse: true,
18
19
                // custom params
20
                userId: wialon.core.Session.getInstance().getCurrUser().getId(),
21
                host: 'render-maps.wialon.com/hst-api.wialon.com'
22
            }).addTo(map);
23
        });
24
});
25
​
JS
Result
Source code of example Close ✕
1
 
1
/*source*/