×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Coroutines

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Ovi Maps category)
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Web]][[Category:Browser]][[Category:Ovi Maps]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
{{Abstract|This article will demonstrate the use of Ovi Maps API feature called Coroutine }}  
+
{{Abstract|This article demonstrates the use of Nokia Maps API {{Icode|Coroutine}} feature.}}  
  
== Introduction and Prerequisites ==
+
{{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=  Internet Explorer, Google Chrome, Firefox, Opera
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Web browser
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.2.4
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Nokia Maps, JavaScript, coroutines
 +
|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-timestamp=20111231
 +
|creationdate=20110628
 +
|author=[[User:Maveric]]
 +
}}
  
Firstly, please read the complete section of Coroutines at the Ovi Maps API reference. It is explained there in detail,
+
{{SeeAlso|
and here is the direct link:
+
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/map/panning-the-map.html How to pan the map]
 +
}}
 +
 
 +
 
 +
== Introduction and Prerequisites ==
  
http://api.maps.ovi.com/apireference/symbols/ovi.mapsapi.util.Coroutine.html?s=Coroutine
+
Firstly, please read the complete section of {{Icode|Coroutines}} at the Nokia Maps API reference. It is explained there in detail, and here is the direct link:
  
The example below is using the same concept as in the "Ovi Maps API - Pan the map" example.  
+
http://developer.here.net/docs/maps_js/topics_api_pub/nokia.maps.util.Coroutine.html
  
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.
+
The example below is using the same concept as in the  [http://developer.here.net/apiexplorer/examples/api-for-js/map/panning-the-map.html How to pan the map] example.  
  
Because there is a lot to this subject, it is highly recommended you should read the releated API chapter.
+
As the Coroutine built in serves a similar function to the JavaScript {{Icode|setTimeout()}} and {{Icode|setInterval()}}, you can also utilize them in same type of use cases. The main idea behind the {{Icode|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 that you read the related API chapter.
  
 
== Example code ==
 
== 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.
+
This example will loop from 1 to 500 with 10ms delay. The run is displayed on screen, and after the set time period of {{Icode|Coroutine}} operations, the map will pan to a new position and the {{Icode|Coroutines}} get terminated. Remember to add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]].
  
<code java>
+
<code javascript>
<script type="text/javascript">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
    <head>
 +
      <title>Coroutines Example</title>
 +
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
      <script type="text/javascript"
 +
            src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
 +
        </script>
 +
    </head>
 +
    <!--Add the all_is_ready function to the onload event if code does not work in IE -->
 +
    <body onload = "all_is_ready()">
 +
<div id="showCoords" style="height: 2.0em; font-size: 2em; color: blue;"></div>
  
//Globals
+
        <div id="map" style="width:80%; height:80%;  position: absolute; "></div>
 +
 +
        <script type="text/javascript">
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
// Don't forget to set your API credentials
 +
//
 +
// Replace with your appId and token which you can obtain when you
 +
// register on http://api.developer.nokia.com/
 +
//
 +
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
 +
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
  
     var myInterval = 0;
+
//
   
+
/////////////////////////////////////////////////////////////////////////////////////
 +
 +
     var myInterval = 0;  
 
     var myTimer;
 
     var myTimer;
   
 
   
 
 
     var map_start_x = 100;
 
     var map_start_x = 100;
 
     var map_start_y = 100;
 
     var map_start_y = 100;
 
     var map_end_x = 120;
 
     var map_end_x = 120;
 
     var map_end_y = 100;
 
     var map_end_y = 100;
 
 
     var myMap;
 
     var myMap;
  
if (document.addEventListener)
+
//If code does not work in IE, make sure the following code is commented out
   document.addEventListener("DOMContentLoaded", all_is_ready, false);
+
/*if (document.addEventListener)
 
+
   document.addEventListener("DOMContentLoaded", all_is_ready, false);*/
  
 +
 +
 
function all_is_ready(){
 
function all_is_ready(){
 
   
 
   
 
     alert("Click OK to start the panning using Coroutine");
 
     alert("Click OK to start the panning using Coroutine");
 
   
 
   
     myMap = new ovi.mapsapi.map.Display(document.getElementById("map"),
+
     myMap = new nokia.maps.map.Display(document.getElementById("map"),
 
     {
 
     {
                   components: [ new ovi.mapsapi.map.component.Behavior(),
+
                   components: [ new nokia.maps.map.component.Behavior(),
                             new ovi.mapsapi.map.component.ZoomBar(),
+
                             new nokia.maps.map.component.ZoomBar(),
                             new ovi.mapsapi.map.component.Overview(),                             
+
                             new nokia.maps.map.component.Overview(),                             
                             new ovi.mapsapi.map.component.TypeSelector(),     
+
                             new nokia.maps.map.component.TypeSelector(),     
                             new ovi.mapsapi.map.component.ScaleBar() ],
+
                             new nokia.maps.map.component.ScaleBar() ],
 
                   zoomLevel: 3,
 
                   zoomLevel: 3,
 
                   center: [52.51, 13.4]   
 
                   center: [52.51, 13.4]   
 
   
 
   
 
     });
 
     });
   
+
 
   
 
   
 
     var i = 0,
 
     var i = 0,
     Coroutine = ovi.mapsapi.util.Coroutine;
+
     Coroutine = nokia.maps.util.Coroutine;
 
+
 
     // Define the 1st coroutine - increase the value of i by one every 10 milliseconds, until we reach a 100.
 
     // 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!
 
     // Watch the console output for the numbers!
   
+
 
     var iteration = Coroutine.create("iterator", function( scope, context ) {
 
     var iteration = Coroutine.create("iterator", function( scope, context ) {
 
         i++;
 
         i++;
 
+
 
             if ( i <= 500 ) {
 
             if ( i <= 500 ) {
 
             document.getElementById("showCoords").innerHTML = "Wait until 500 to see the map move! : "+i+"/500";
 
             document.getElementById("showCoords").innerHTML = "Wait until 500 to see the map move! : "+i+"/500";
 
             return Coroutine.sleep(10);
 
             return Coroutine.sleep(10);
 
             }
 
             }
       
+
 
             map_start_x = map_start_x + 200;
 
             map_start_x = map_start_x + 200;
 
             map_start_y = map_start_y + 200;
 
             map_start_y = map_start_y + 200;
 
             map_end_x = map_end_x - 400;
 
             map_end_x = map_end_x - 400;
 
             map_end_y = map_end_y + 400;
 
             map_end_y = map_end_y + 400;
               
+
 
             // pan the map to the new position after the loop is over
 
             // 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);
 
             myMap.pan(map_start_x, map_start_y, map_end_x, map_end_y);
       
+
 
     });
 
     });
 
+
 
     // 2nd coroutine display iteration in console.log every 100 miliseconds
 
     // 2nd coroutine display iteration in console.log every 100 miliseconds
 
     var printing = Coroutine.create("printing", function( scope, context ) {
 
     var printing = Coroutine.create("printing", function( scope, context ) {
Line 88: Line 138:
 
     return Coroutine.sleep(100);
 
     return Coroutine.sleep(100);
 
     });
 
     });
 
+
 
     // 1st coroutine, init to the "coroutine" variable
 
     // 1st coroutine, init to the "coroutine" variable
 
     var coroutine = iteration();
 
     var coroutine = iteration();
 
+
 
     // 2nd second coroutine, init to the "coroutine2" variable
 
     // 2nd second coroutine, init to the "coroutine2" variable
 
     var coroutine2 = printing();
 
     var coroutine2 = printing();
 
+
 
     // Add an observer to the 1st coroutine for it's status
 
     // Add an observer to the 1st coroutine for it's status
 
     coroutine.addObserver("status", function( context, key, value, oldValue ) {
 
     coroutine.addObserver("status", function( context, key, value, oldValue ) {
Line 102: Line 152:
 
         }
 
         }
 
     });
 
     });
 
+
 
}   
 
}   
 
 
 
</script>
 
</script>
<html>
 
<head>
 
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" 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>
 
</body>
 
</html>
 
</html>
 +
</code>
  
</code>
+
==For more on the Nokia Maps API==
 
+
== Tested with ==
+
 
+
Windows XP Pro
+
 
+
Firefox 5.0
+
 
+
Safari 5.0.5
+
 
+
  
== For more on Ovi Maps API go to ==
+
Please check out the Nokia Maps API full documentation and API reference here:
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
  
http://api.maps.ovi.com
+
You may also access the interactive API explorer
 +
* [http://developer.here.net/javascript_api_explorer API explorer]

Revision as of 14:23, 14 March 2013

This article demonstrates the use of Nokia Maps API Coroutine feature.

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web browser
Dependencies: Nokia Maps 2.2.4
Article
Keywords: Nokia Maps, JavaScript, coroutines
Created: Maveric (28 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (14 Mar 2013)


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://developer.here.net/docs/maps_js/topics_api_pub/nokia.maps.util.Coroutine.html

The example below is using the same concept as in the How to pan the map example.

As the Coroutine built in serves a similar function to 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 that you read the related 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. Remember to add in your own AppId and Token.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Coroutines Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
</script>
</head>
<!--Add the all_is_ready function to the onload event if code does not work in IE -->
<body onload = "all_is_ready()">
<div id="showCoords" style="height: 2.0em; font-size: 2em; color: blue;"></div>
 
<div id="map" style="width:80%; height:80%; position: absolute; "></div>
 
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
 
//
/////////////////////////////////////////////////////////////////////////////////////
 
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 code does not work in IE, make sure the following code is commented out
/*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>
</body>
</html>

For more on the Nokia Maps API

Please check out the Nokia Maps API full documentation and API reference here:

You may also access the interactive API explorer

121 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×