HERE Maps API - Coroutines
m (Avnee.nathani - Updated article for Nokia Maps Javascript API v2.0. (Released in Dec 2011)) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot update of Template:ArticleMetaData) |
||
| Line 3: | Line 3: | ||
{{ArticleMetaData | {{ArticleMetaData | ||
| + | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| + | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | ||
| + | |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') --> | ||
| + | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | ||
|platform= Web browser | |platform= Web browser | ||
| + | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | ||
| + | |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | ||
| + | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| + | |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | ||
| + | |id= <!-- Article Id (Knowledge base articles only) --> | ||
| + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| + | |translated-by= <!-- [[User:XXXX]] --> | ||
| + | |translated-from-title= <!-- Title only --> | ||
| + | |translated-from-id= <!-- Id of translated revision --> | ||
| + | |review-by=<!-- After re-review: [[User:username]] --> | ||
| + | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
|update-by=[[User:avnee.nathani]] | |update-by=[[User:avnee.nathani]] | ||
|update-timestamp=20111231 | |update-timestamp=20111231 | ||
| + | |creationdate=20110628 | ||
| + | |author=[[User:Maveric]] | ||
}} | }} | ||
Revision as of 02:46, 2 January 2012
This article will demonstrate the use of Nokia Maps API feature called Coroutine.
Article Metadata
Compatibility
Article
Contents |
Introduction and Prerequisites
Firstly, please read the complete section of Coroutines at the Nokia Maps API reference. It is explained there in detail, and here is the direct link:
http://api.maps.nokia.com/2.1.0/apireference/symbols/nokia.maps.util.Coroutine.html
The example below is using the same concept as in the "Nokia Maps API - Pan the map" example.
As the Coroutine built in serves the similar functionality as the JavaScript "setTimeout" and "setInterval", you can also utilize them in same type of use cases. The main idea behind the Coroutine implementation is to serve as a point of saving some CPU time cycles, while performing multiple tasks during the same mapping program - threading.
Because there is a lot to this subject, it is highly recommended you should read the releated API chapter.
Example code
This example will loop from 1 to 500 with 10ms delay. The run is displayed on screen, and after the set time period of Coroutine operations, the map will pan to a new position and the Coroutines get terminated.
<script type="text/javascript">
//Globals
var myInterval = 0;
var myTimer;
var map_start_x = 100;
var map_start_y = 100;
var map_end_x = 120;
var map_end_y = 100;
var myMap;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", all_is_ready, false);
function all_is_ready(){
alert("Click OK to start the panning using Coroutine");
myMap = new nokia.maps.map.Display(document.getElementById("map"),
{
components: [ new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar() ],
zoomLevel: 3,
center: [52.51, 13.4]
});
var i = 0,
Coroutine = nokia.maps.util.Coroutine;
// Define the 1st coroutine - increase the value of i by one every 10 milliseconds, until we reach a 100.
// Watch the console output for the numbers!
var iteration = Coroutine.create("iterator", function( scope, context ) {
i++;
if ( i <= 500 ) {
document.getElementById("showCoords").innerHTML = "Wait until 500 to see the map move! : "+i+"/500";
return Coroutine.sleep(10);
}
map_start_x = map_start_x + 200;
map_start_y = map_start_y + 200;
map_end_x = map_end_x - 400;
map_end_y = map_end_y + 400;
// pan the map to the new position after the loop is over
myMap.pan(map_start_x, map_start_y, map_end_x, map_end_y);
});
// 2nd coroutine display iteration in console.log every 100 miliseconds
var printing = Coroutine.create("printing", function( scope, context ) {
console.log(i);
return Coroutine.sleep(100);
});
// 1st coroutine, init to the "coroutine" variable
var coroutine = iteration();
// 2nd second coroutine, init to the "coroutine2" variable
var coroutine2 = printing();
// Add an observer to the 1st coroutine for it's status
coroutine.addObserver("status", function( context, key, value, oldValue ) {
if ( value == Coroutine.TERMINATED ) { // When gets terminated
Coroutine.kill( coroutine2 ); // kill the 2nd coroutine
document.getElementById("showCoords").innerHTML = "Coroutine finished, and got terminated.";
}
});
}
</script>
<html>
<head>
<script type="text/javascript"
src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8">
</script>
</head>
<body>
<center>
<div id="map" style="width:80%; height:80%;"></div>
<div id="showCoords" style="height: 2.0em; font-size: 2em; color: blue;"></div>
</center>
</body>
</html>
Tested with
With the following browsers on Windows XP Pro:
- Firefox 5.0
- Safari 5.0.5
For more on Nokia Maps API
Please check out the Nokia Maps API full documentation and API reference here:
You may also access the interactive Nokia Maps API playground,
