Тема: SDK using personalization mapping
How I can use with the SDK a personal mapping with special layer intergrated in Webgis, what is the link and the source code to use all king of mapping ?
NTS
Вы не вошли. Пожалуйста, войдите или зарегистрируйтесь.
How I can use with the SDK a personal mapping with special layer intergrated in Webgis, what is the link and the source code to use all king of mapping ?
NTS
NTS, first you need to authorize to your service. And continue to be logged on during usage of maps.
Further steps depend on what kind of map visualization system you will use: e.g. google maps, open layers, etc.
Gurtam Maps can be added as a base layer to all of them.
How I can show the map on a html page i will create with my special data integrated in the webgis (Guartam map) ?
Where I can find the script for the Guartam map with those layers ?
Does the map will showed directly on my html page with the script or I will need to use an other map visualization system to push layer of Gurtam map on html page : e.g. google maps, open layers, etc.
Thanks
NTS
After login you can check SAS and SAG samples - they has Gurtam Maps as layer to Google Maps.
If you will create simiar page(s) locally (source codes avaible there) with DNS of your monitoring service, then under Gurtam Maps you'll be able to see your maps.
in the http://sdk.wialon.com/ i can see only the sample of a login page.
If I choose others choice as Gurtam Maps: SAS in the sample list it still always the sample of login page.
where i can find sript for the Gurtam map ?
If I choose others choice as Gurtam Maps: SAS in the sample list it still always the sample of login page.
Try to authorize and after that other scripts will be available to you.
Hello there!
I also want to create my own personalized page with Google Maps and a SAS layer bound to it, but your examples seem to be incomplete.
I would really appreciate it if you provide us with a simple working example that does the following:
1- Logs into a specific account (please use the test account).
2- Binds a SAS layer associated to the account to Google Maps.
3- Shows the Google map plus the layer on the web page.
Just some HTML with JS using your SDK in a straightforward manner would be of a huge help.
Can you please help us on this?
Thanks in advance!
Added after 5 minuts 17 seconds:
After login you can check SAS and SAG samples - they has Gurtam Maps as layer to Google Maps.
If you will create simiar page(s) locally (source codes avaible there) with DNS of your monitoring service, then under Gurtam Maps you'll be able to see your maps.
BTW, I tried this and I think I misplaced the scripting code or something, because I'm getting "Null object" errors and such.
IMHO, the chunks of code you give there are quite hard to put together to build a working page. There's a lot to figure out by ourselves!
Hi,
After Im loggin in the sdk account with my user ID I see a script but I think its missing a lot of part to use my personalizaing web gis data integrated by our self in my account.
I tried many way without success !!
Would you provide me a real simple example of the HTML script and code and where I need to put them exactly.
In bref: what I want to realize to start is :
1-Log in one of my specific account
2-Show in HTML page a Webgis mapping including the layers of data you have integrated for me
3-see those vehicles of this account with the last data position in that HTML page.
It supposed to be simple but In the doc we dont have the right example, if you can provide us a real sricpt for that exercise we can go forward in the developpement.
Thanks
NTS
See example 'Unit: events' on http://sdk.wialon.com/
1) Login
// Perform login
wialon.core.Session.getInstance().login(login, passw, "", function (code) {
// Always check the return result - if it's not 0 there's an error
if (code) {
alert(wialon.core.Errors.getErrorText(code));
return;
}
});
2) Init GurtamMaps layer (for Google Maps)
// Gurtam Maps object for Google API
function GurtamMapsType() {}
GurtamMapsType.prototype.tileSize = new google.maps.Size(256, 256);
GurtamMapsType.prototype.maxZoom = 17;
GurtamMapsType.prototype.name = "Gurtam";
GurtamMapsType.prototype.alt = "Gurtam Maps";
GurtamMapsType.prototype.getTile = function(coord, zoom, ownerDocument) {
var url = "http://render.mapsviewer.com/hosting.wialon.com/gis_render/" + coord.x + "_" + coord.y + "_" + (this.maxZoom-zoom) + "/tile.png";
var img = ownerDocument.createElement("IMG");
img.src = url;
img.style.width = this.tileSize.width + "px";
img.style.height = this.tileSize.height + "px";
img.style.border = "0px";
return img;
};
// map options
var map_type = new GurtamMapsType();
var center = new google.maps.LatLng(0.0, 0.0);
var options = {
zoom: 3,
center: center,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'gurtammaps'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scaleControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
};
// create map (map_id = HTML DIV ELEMENT)
var map = new google.maps.Map(document.getElementById("map_id"), options);
map.mapTypes.set('gurtammaps', map_type);
3) Get Units
var flags = wialon.item.Item.dataFlag.base | // name, ID,...
wialon.item.Item.dataFlag.image | // unit icon
wialon.item.Unit.dataFlag.restricted | // UID, HW, phone
wialon.item.Unit.dataFlag.lastMessage; // last message
// init event system and get units
var spec = {
type: "type", // get all objects by type defined in "data" key
data: "avl_unit", // object type
flags: flags, // information for retrieving
mode: 0 // get data
};
wialon.core.Session.getInstance().updateDataFlags([spec], qx.lang.Function.bind(function(code) {
if (code) {
alert(wialon.core.Errors.getErrorText(code));
return;
}
// get units
vat units = wialon.core.Session.getInstance().getItems("avl_unit");
...
});
Hi ,
I tried this code to log and to show all vehicles on a map and is not working, could you help me to modify or change wrong things in this script.
What I need to do is to log on my url account into a specific of my account ,only user ID, no PW empty field on that account
Show all vehicles on a maps.
Thanks.
this the code I tried :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=fr&libraries=panoramio,weather">
</script>
<script type="text/javascript"
src="http://hosting.wialon.com/wsdk/script/wialon.js">
</script>
<script type="text/javascript">
/**
* Perform login to Wialon Hosting server
* @param login {String} login name
* @param passw {String} password
* @param callback {Function} result callback(code)
*/
function apiLogin(login, passw, callback) {
if (typeof login == "undefined" || login == "") {
alert("Invalid login name.");
return;
}
if (typeof passw == "undefined")
passw = "";
// Perform login
wialon.core.Session.getInstance().login(login, passw, "", function (code) {
// Always check the return result - if it's not 0 there's an error
if (code != 0) {
alert(wialon.core.Errors.getErrorText(code));
return;
}
if (typeof callback != "undefined")
callback(code);
});
}
</script>
<script type="text/javascript">
function initialize() {
// Set your user name and password:
var login = "[b]my user[/b]";
var pwd = "";
// Create a session and log into it:
var mySession = wialon.core.Session.getInstance();
mySession.initSession("http://as example my url");
apiLogin(login, pwd);
// Retrieve all units:
var items = mySession.getItems("wialon.item.Unit");
// For each unit, just show the last message:
items.forEach(function (item, idx, container) {
alert(item.lastMessage);
});
}
</script>
</head>
<body onload="initialize()">
<!-- Map canvas -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
See example 'Unit: events' on http://sdk.wialon.com/
1) Login
// Perform login wialon.core.Session.getInstance().login(login, passw, "", function (code) { // Always check the return result - if it's not 0 there's an error if (code) { alert(wialon.core.Errors.getErrorText(code)); return; } });
2) Init GurtamMaps layer (for Google Maps)
// Gurtam Maps object for Google API function GurtamMapsType() {} GurtamMapsType.prototype.tileSize = new google.maps.Size(256, 256); GurtamMapsType.prototype.maxZoom = 17; GurtamMapsType.prototype.name = "Gurtam"; GurtamMapsType.prototype.alt = "Gurtam Maps"; GurtamMapsType.prototype.getTile = function(coord, zoom, ownerDocument) { var url = "http://render.mapsviewer.com/hosting.wialon.com/gis_render/" + coord.x + "_" + coord.y + "_" + (this.maxZoom-zoom) + "/tile.png"; var img = ownerDocument.createElement("IMG"); img.src = url; img.style.width = this.tileSize.width + "px"; img.style.height = this.tileSize.height + "px"; img.style.border = "0px"; return img; }; // map options var map_type = new GurtamMapsType(); var center = new google.maps.LatLng(0.0, 0.0); var options = { zoom: 3, center: center, disableDefaultUI: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'gurtammaps'], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, scaleControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT } }; // create map (map_id = HTML DIV ELEMENT) var map = new google.maps.Map(document.getElementById("map_id"), options); map.mapTypes.set('gurtammaps', map_type);
3) Get Units
var flags = wialon.item.Item.dataFlag.base | // name, ID,... wialon.item.Item.dataFlag.image | // unit icon wialon.item.Unit.dataFlag.restricted | // UID, HW, phone wialon.item.Unit.dataFlag.lastMessage; // last message // init event system and get units var spec = { type: "type", // get all objects by type defined in "data" key data: "avl_unit", // object type flags: flags, // information for retrieving mode: 0 // get data }; wialon.core.Session.getInstance().updateDataFlags([spec], qx.lang.Function.bind(function(code) { if (code) { alert(wialon.core.Errors.getErrorText(code)); return; } // get units vat units = wialon.core.Session.getInstance().getItems("avl_unit"); ... });
Thanks a lot! Your code looks now way clearer to me, but when I tried to get the units my side, the updateDataFlags call returned the error "Invalid service". Not very sure what it means. Any idea?
Hi,
I also tried all code you gave me and I have an error message as follow :
update Dataflags error invalid service
This is the script we have put in the HTML page : would you tell me what is wrong it that srcipt, I think we are near the goal !! but somethings like to be not working.
Thanks
NTS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=fr&libraries=panoramio,weather">
</script>
<script type="text/javascript"
src="http://hosting.wialon.com/wsdk/script/wialon.js">
</script>
<script type="text/javascript">
/**
* Perform login to Wialon Hosting server
* @param login {String} login name
* @param passw {String} password
* @param callback {Function} result callback(code)
*/
function apiLogin(login, passw, callback) {
if (typeof login == "undefined" || login == "") {
alert("Invalid login name.");
return;
}
if (typeof passw == "undefined")
passw = "";
// Perform login
wialon.core.Session.getInstance().login(login, passw, "", function (code) {
// Always check the return result - if it's not 0 there's an error
if (code != 0) {
alert("login ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
if (typeof callback != "undefined")
callback(code);
});
}
</script>
<script type="text/javascript">
function initialize() {
// Set your user name and password:
var login = "état des sentiers";
var pwd = "";
// Create a session and log into it:
var mySession = wialon.core.Session.getInstance();
mySession.initSession("http://geolocalisation.ntswireless.ca");
apiLogin(login, pwd);
// Retrieve all units:
var flags = wialon.item.Item.dataFlag.base // name, ID,...
// | wialon.item.Item.dataFlag.image // unit icon
// | wialon.item.Unit.dataFlag.restricted // UID, HW, phone
| wialon.item.Unit.dataFlag.lastMessage; // last message
// init event system and get units
var spec = {
type: "type", // get all objects by type defined in "data" key
data: "avl_unit", // object type
flags: flags, // information for retrieving
mode: 0 // get data
};
mySession.updateDataFlags(spec, qx.lang.Function.bind(function(code) {
if (code != 0) {
alert("updateDataFlags ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
}));
// get units
var items = mySession.getItems("avl_unit");
// For each unit, just show the last message:
items.forEach(function (item, idx, container) {
alert(item.lastMessage);
});
}
</script>
</head>
<body onload="initialize()">
<!-- Map canvas -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Hi Guys !!(Guartam develloper)
I still not received news from my next comment on the forum, would you help me on this issu to resolved that.
I tried all code you gave me and I have an error message as follow :
update Dataflags error invalid service
This is the script we have put in the HTML page : would you tell me what is wrong it that srcipt, I think we are near the goal !! but somethings like to be not working.
Thanks
NTS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=fr&libraries=panoramio,weather">
</script>
<script type="text/javascript"
src="http://hosting.wialon.com/wsdk/script/wialon.js">
</script>
<script type="text/javascript">
/**
* Perform login to Wialon Hosting server
* @param login {String} login name
* @param passw {String} password
* @param callback {Function} result callback(code)
*/
function apiLogin(login, passw, callback) {
if (typeof login == "undefined" || login == "") {
alert("Invalid login name.");
return;
}
if (typeof passw == "undefined")
passw = "";
// Perform login
wialon.core.Session.getInstance().login(login, passw, "", function (code) {
// Always check the return result - if it's not 0 there's an error
if (code != 0) {
alert("login ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
if (typeof callback != "undefined")
callback(code);
});
}
</script>
<script type="text/javascript">
function initialize() {
// Set your user name and password:
var login = "état des sentiers";
var pwd = "";
// Create a session and log into it:
var mySession = wialon.core.Session.getInstance();
mySession.initSession("http://geolocalisation.ntswireless.ca");
apiLogin(login, pwd);
// Retrieve all units:
var flags = wialon.item.Item.dataFlag.base // name, ID,...
// | wialon.item.Item.dataFlag.image // unit icon
// | wialon.item.Unit.dataFlag.restricted // UID, HW, phone
| wialon.item.Unit.dataFlag.lastMessage; // last message
// init event system and get units
var spec = {
type: "type", // get all objects by type defined in "data" key
data: "avl_unit", // object type
flags: flags, // information for retrieving
mode: 0 // get data
};
mySession.updateDataFlags(spec, qx.lang.Function.bind(function(code) {
if (code != 0) {
alert("updateDataFlags ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
}));
// get units
var items = mySession.getItems("avl_unit");
// For each unit, just show the last message:
items.forEach(function (item, idx, container) {
alert(item.lastMessage);
});
}
</script>
</head>
<body onload="initialize()">
<!-- Map canvas -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
See working code: (insert you login and password) and, please, carefully read the documentation (http://docs.gurtam.com/api/hosting/#wialon)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=fr&libraries=panoramio,weather">
</script>
<script type="text/javascript"
src="http://hosting.wialon.com/wsdk/script/wialon.js">
</script>
<script type="text/javascript">
/**
* Perform login to Wialon Hosting server
* @param login {String} login name
* @param passw {String} password
* @param callback {Function} result callback(code)
*/
function apiLogin(login, passw, callback) {
if (typeof login == "undefined" || login == "") {
alert("Invalid login name.");
return;
}
if (typeof passw == "undefined")
passw = "";
// Perform login
wialon.core.Session.getInstance().login(login, passw, "", function (code) {
// Always check the return result - if it's not 0 there's an error
if (code != 0) {
alert("login ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
if (typeof callback != "undefined")
callback(code);
});
}
</script>
<script type="text/javascript">
function initialize() {
// Set your user name and password:
var login = "";
var pwd = "";
// Create a session and log into it:
wialon.core.Session.getInstance().initSession("http://geolocalisation.ntswireless.ca");
apiLogin(login, pwd, function() {
// Retrieve all units:
var flags = wialon.item.Item.dataFlag.base|wialon.item.Unit.dataFlag.lastMessage;
// init event system and get units
var spec = {
type: "type", // get all objects by type defined in "data" key
data: "avl_unit", // object type
flags: flags, // information for retrieving
mode: 0 // get data
};
wialon.core.Session.getInstance().updateDataFlags([spec], function(code) {
if (code != 0) {
alert("updateDataFlags ERROR: " + wialon.core.Errors.getErrorText(code));
return;
}
// get units
var items = wialon.core.Session.getInstance().getItems("avl_unit");
var html = "";
for (var i = 0; items && i < items.length; i++)
html += items[i].getName() + ", ";
alert(html);
});
});
}
</script>
</head>
<body onload="initialize()">
<!-- Map canvas -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
That does work. Thanks a lot!
It wasn't clear to me in the documentation that the connection was kept alive only during a nested callback sequence.
That means that I must identify myself every time I hit the Wialon server using the Java script API, right? I mean, if I understand well, every call that interacts with my units must start by a "login", in whose callback I'd retrieve everything I want to retrieve. Is this correct?
In any case, I think this example above does make me understand your paradigm.
Thanks again!
zorrow, nope. When you has established session, it will be active until you will else make logout nor close the web page.
For server-side processing, e.g. when you do not want to put athorization information in html page you may use special server-based authorization methods and initialize wialon session on web-browser with special session-code. AFAIK it is not yet in documentation.
zorrow, nope. When you has established session, it will be active until you will else make logout nor close the web page.
For server-side processing, e.g. when you do not want to put athorization information in html page you may use special server-based authorization methods and initialize wialon session on web-browser with special session-code. AFAIK it is not yet in documentation.
Ok, I understand what you mean.
However, if I extract from the login callback function the code that gets the units, it doesn't work. That's why I thought the session was kept alive only during the lifespan of the callback thread.
In any case, it doesn't bother me that much if I finally need to send my credentials over and over. I'll manage to cache them and to keep them hidden -that's not a problem.
As of server-side development goes, I would favor an ASP.NET solution using your ActiveX API, which seems to be more mature and better documented than the Java script API.
But for now I'll stick to browser-side development. Your example above unblocks me and so far I don't need much more than that.
Thank you again for your help!
zorrow, yoy don't need to do mult logins, moreover you are limited in number of active sessions per user. In code above you need to login first. Then you may do any other action. Callback just used as a posiibility to continue in minimal time after login action.
Hi Shal,
You told we are limited in number of active sessions per user, how many active sessions we can intitiate on many computer post ? and does it will be affected in our case with the HTML page if many user try to be log and view this HTML page in the same time ?
Thanks
NTS
NTS, limitations are flexible. You won't be affected be them in a proper use. For example you can not login as USER1 from IP1 while you have 100 active sessions from the same IP and user, but you can initiate 100 more sessions from IP2 or for user2.
It is more like a self-protection from improper useage pattern then limitation.
Hi Shal,
let me know if I understand perfectly..in resume if I set up a HTML page to catch data and informations from vehicles in wialon with the script using login of user 1 hosted on our server side, we are limitted to 100 sessions from any users who will want to show this html page on their own computer ? If I want to set up 100 more users I need to set up request from IP2 and user2 ?
If that right do we have a way to by pass that limit, we forecast to have more than 100 active sessions from many computers not based at the same place (as customer) to show our html page ?
Thanks
NTS
NTS, nope. You will get this limit only for those user that will open in web-browser 100 pages and each page wil hold session to server. Other users won't be affected.