<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wialon Playground - Create POI</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="//hst-api.wialon.com/wsdk/script/wialon.js"></script>
</head>
<body>

<!-- load map -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>

<div id="map"></div>
	<input type="text" id="lat" placeholder="lat" />
	<input type="text" id="lng" placeholder="lng" /><br/>
	<input type="text" id="name" placeholder="POI name" value="POI Name" /><br/>
	<input type="text" id="description" placeholder="description" value="Description"><br/>
	icon:<input type="file" name="file" id="icn" /><br/>
	radius: <input type="text" id="radius" placeholder="radius of POI" value="100" /><br/>
	Resources: 
	<select id="res"></select><br/>
<button id="run">create poi</button>
<div id="log"></div>

</body>
</html>HTML

#map{
	width:100%;
	height:400px;
}CSS

// Print message to log
function msg(text) { $("#log").prepend(text + "<br/>"); }

function init() {// Execute after login succeed
    var sess = wialon.core.Session.getInstance(); // get instance of current Session
    // flags to specify what kind of data should be returned
	var flags = wialon.item.Item.dataFlag.base | wialon.item.Resource.dataFlag.poi;

	sess.loadLibrary("resourcePois"); // load POIs Library 
	sess.updateDataFlags( // load items to current session
		[{type: "type", data: "avl_resource", flags: flags, mode: 0}], // Items specification
		function (code) { // updateDataFlags callback
			if (code) { msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code 
           	var res = sess.getItems("avl_resource"); // get loaded 'avl_resource' items
        	if (!res || !res.length){ msg("No resources found"); return; } // check if resources found
	
        	for (var i = 0; i< res.length; i++) // construct Select list using found resources
        		$("#res").append("<option value='"+ res[i].getId() +"'>"+ res[i].getName() +"</option>");
	});
}

function initMap() {
    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map').setView([53.9, 27.55], 11);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://gurtam.com">Gurtam</a>'
    }).addTo(map);
    var marker = null;
    map.on('click', function(e){
        // set POI cordinates
        document.getElementById("lat").value = e.latlng.lat;
        document.getElementById("lng").value = e.latlng.lng;
        // add a marker in the given location, attach some popup content to it and open the popup
        if (!marker) {
            marker = L.marker([e.latlng.lat,e.latlng.lng], {draggable: true});
            marker.addTo(map);
        } else {
            marker.setLatLng([e.latlng.lat,e.latlng.lng]);
        }
    });
}


function createPOI (resid) {
	var res = wialon.core.Session.getInstance().getItem(resid); //get resource by id
	if(!res){ return; }; // check if resource found
	var name = $("#name").val(); // poi name
	var lat = $("#lat").val(); //lat
	var description = $("#description").val(); //lat
	var lng = $("#lng").val(); //lng
	var radius = $("#radius").val(); //radius

	// setting object which will be used when executing method createPoi
	var obj = {"n":name,"d":description,"y": lat,"x": lng,"r":radius,"f":1,"c":2573598873,"tc":16733440,"ts":"12","min":"0","max":"18","id":0,"itemId":resid,"callMode":"create"}

	res.createPoi(obj, function (code, result){ //create poi
		if (code){ msg("Error code: "+code);  return;}// exit if error code
		else {
            msg("POI created");
            resetForm();
            res.setPoiImage(res.getPoi(result.id),$("#icn").get(0));//update poi image
		}
    })
}
function resetForm() {
    $("#name").val(''); // poi name
    $("#lat").val(''); //lat
    $("#description").val(''); //lat
    $("#lng").val(''); //lng
//    $("#radius").val(''); //radius
}

// execute when DOM ready
$(document).ready(function () {
	wialon.core.Session.getInstance().initSession("https://hst-api.wialon.com"); // init session
    // For more info about how to generate token check
    // http://sdk.wialon.com/playground/demo/app_auth_token
	wialon.core.Session.getInstance().loginToken("5dce19710a5e26ab8b7b8986cb3c49e58C291791B7F0A7AEB8AFBFCEED7DC03BC48FF5F8", "", // try to login
	    function (code) { // login callback
	    	if (code){ msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code
	    	msg("Logged successfully");
            init(); // when login suceed then run init() function
            initMap();
	});

  	$("#run").on('click', function (e){
  		e.preventDefault();
  		createPOI($("#res").val())
  	});
});
JS

Result

Source code of example Close ✕