<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wialon Playground - Create geofence</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://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>
<table>
	<tr><td>Resource</td><td><select id="res"><option></option></select></td></tr>
	<tr><td>Name</td><td><input type="text" id="n" placeholder="Name"/></td></tr>
	<tr><td>Radius</td><td><input type="number" id="r" min="1" value="500" placeholder="Radius"/></td></tr>
	<tr><td colspan="2" style="text-align:center;">
		<input type="button" value="New circle" id="new_btn"/>
		<input type="button" value="Save" id="save_btn"/>
	</td></tr>
</table>
<div id="log"></div>


</body>
</html>HTML

#log{ border: 1px solid #c6c6c6; }
#map{ width:100%; height:300px; float:left;}CSS

var map = null, circle_zone = null, enableNewCircle  = false; // global variables

// 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
	// specify what kind of data should be returned
	var flags = wialon.item.Item.dataFlag.base | wialon.item.Resource.dataFlag.zones;
	
	sess.loadLibrary("resourceZones");  // load Geofences 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  
			// get loaded 'avl_resource's items with edit geofences access 
			var res = wialon.util.Helper.filterItems(sess.getItems("avl_resource"),
				wialon.item.Resource.accessFlag.editZones);
			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 newCircle(lat, lng){
    var r = parseInt( $('#r').val() ) || 500;
    circle_zone = L.circle([lat, lng], r, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map);
    $('#r').removeAttr('disabled');
}
function setRadius(radius){
    if (parseInt(radius) && circle_zone && typeof circle_zone.setRadius == 'function' ) {
        circle_zone.setRadius( radius );
    }
}

function saveCircle(){ // create circle geofence using entered data
	var res = $("#res").val(), name = $("#n").val(); // get parameters from corresponding fields
    // simple validation, exit if invalid
	if(!res){ msg("Select resource"); return;} // resource validation 
	if(!name){ msg("Enter name"); return;} // name validation
	if(!circle_zone){ msg("Create circle"); return;} // circle on map validation

    var Q = circle_zone.getLatLng(); // get circle center
    var R = parseInt(circle_zone.getRadius(), 10);  // get circle radius (must be int)

    // construct object using entered data
    var obj = { n: name, //geofence name
        t: 3, // type (3 - circle)
        f: 0, // flags
        w: R, // radius
        c: 2566914048, // color
        p: [{x: Q.lng, y: Q.lat, r: R}] // points (for circle, center coords and radius)
    };

    var resource = wialon.core.Session.getInstance().getItem(res); // get resource by id
    resource.createZone(obj, // create geofence
        function(code, data){ // create geofence callback
            if(code){ msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code
            msg("<b>'"+data.n+"'</b> geofence created successfully"); // print create succeed message
        });

    $('#r').attr('disabled', 'disabled');
    // delete geofence
    map.removeLayer(circle_zone);
    circle_zone = null;
}

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

    // 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);

    map.on('click',function(e){
        if (enableNewCircle && !circle_zone) {
            enableNewCircle = false;
            newCircle(e.latlng.lat, e.latlng.lng);
        } else if (!!circle_zone) {
            circle_zone.setLatLng({
                lat: e.latlng.lat,
                lng: e.latlng.lng
            });
        }
    });
}

// execute when DOM ready
$(document).ready(function () {
    // bind actions to buttons click
	$("#new_btn").click( function(){
        if (!circle_zone) {
            enableNewCircle = true;
            msg("Set center of circle to map.");
        }
    });
	$("#save_btn").click( saveCircle );
    $('#r').on('change', function(){
        setRadius( $(this).val() );
    });
    $('#r').attr('disabled', 'disabled');

	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();
	});
});
JS

Result

Source code of example Close ✕