1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>Wialon Playground - Track layer</title>
6
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
7
    <script type="text/javascript" src="https://hst-api.wialon.com/wsdk/script/wialon.js"></script>
8
</head>
9
<body>
10
11
<!-- load map -->
12
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css" />
13
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
HTML
19
 
1
#map{ 
2
    width:500px; 
3
    height:400px; 
4
}
5
#log, #tracks tr td { 
6
    border: 1px solid #c6c6c6; 
7
}
8
#tracks { 
9
    width: 500px; 
10
}
11
.close_btn { 
12
    text-align: center; 
13
    vertical-align: middle; 
14
    cursor: pointer; 
15
}
16
17
.unit {
18
    cursor: pointer;
19
}
CSS
187
 
1
var map, markers = {}, tile_layer, layers = {}; // global variables
2
3
// Print message to log
4
function msg(text) { $("#log").prepend(text + "<br/>"); }
5
6
function init() { // Execute after login succeed
7
    var sess = wialon.core.Session.getInstance(), // get instance of current Session
8
        flags = wialon.item.Item.dataFlag.base | wialon.item.Unit.dataFlag.lastMessage, // specify what kind of data should be returned
9
        renderer = wialon.core.Session.getInstance().getRenderer();
10
    
11
    renderer.addListener("changeVersion", update_renderer);
12
    sess.loadLibrary("itemIcon"); // load Icon Library 
13
    
14
    sess.updateDataFlags( // load items to current session
15
        [{type: "type", data: "avl_unit", flags: flags, mode: 0}], // Items specification
16
        function (code) { // updateDataFlags callback
17
            if (code) { msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code
JS
Result
Source code of example Close ✕
1
 
1
/*source*/