×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Coroutines

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - - Example code)
jasfox (Talk | contribs)
m (Jasfox - links)
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
{{Abstract|This article demonstrates the use of Nokia Maps API {{Icode|Coroutine}} feature.}}  
+
{{Abstract|This article demonstrates the use of HERE Maps API {{Icode|Coroutine}} feature.}}  
  
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/coroutine.html coroutine.html]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices=  Internet Explorer, Google Chrome, Firefox, Opera
 
|devices=  Internet Explorer, Google Chrome, Firefox, Opera
Line 9: Line 9:
 
|platform= Web browser
 
|platform= Web browser
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.2.3
+
|dependencies=HERE Maps 2.5.3
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps, JavaScript, coroutines
+
|keywords= HERE Maps, JavaScript, coroutines
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 27: Line 27:
  
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
 +
* [http://heremaps.github.io/examples/index.html HERE Maps on Github]
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/map/panning-the-map.html How to pan the map]
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/map/panning-the-map.html How to pan the map]
 
  }}
 
  }}
Line 34: Line 35:
 
== Introduction and Prerequisites ==
 
== Introduction and Prerequisites ==
  
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:
+
Firstly, please read the complete section of {{Icode|Coroutines}} at the HERE 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
 
http://developer.here.net/docs/maps_js/topics_api_pub/nokia.maps.util.Coroutine.html
Line 49: Line 50:
  
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
function initialiseCoroutines(map){
<html xmlns="http://www.w3.org/1999/xhtml">
+
// Define the 1st coroutine - increase the value of i by one every 10 milliseconds,
    <head>
+
// until we reach a 500. Watch the screen output for the numbers.
      <title>Coroutines Example</title>
+
this.iterationCoroutine = nokia.maps.util.Coroutine.create(
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
"iterator", function( scope, context ) {
      <script type="text/javascript"
+
i++;
            src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8">
+
        </script>
+
if ( i <= 500 ) {
    </head>
+
$("#iterator").text("Wait until 500 to see the map move! : "+i+"/500");
    <!--Add the all_is_ready function to the onload event if code does not work in IE -->
+
return nokia.maps.util.Coroutine.sleep(10);
    <body onload = "all_is_ready()">
+
}
<div id="showCoords" style="height: 2.0em; font-size: 2em; color: blue;"></div>
+
 +
// pan the map to the new position after the loop is over
 +
this.map.pan(0, 0, 400, 400);
 +
});
 +
 +
// Define the 2nd coroutine display iteration in console.log every 100 miliseconds
 +
this.loggingCoroutine = nokia.maps.util.Coroutine.create(
 +
"printing", function( scope, context ) {
 +
$("#printerlog").text( 'logging count = ' + i);
 +
return nokia.maps.util.Coroutine.sleep(100);
 +
});
 +
 +
}
 +
</code>
 +
<code javascript>
 +
function runCoroutines(){
 +
// 1st coroutine, init the iteration.
 +
var coroutine1 = iterationCoroutine();
 +
 +
// 2nd second coroutine, init the logging.
 +
var coroutine2 = loggingCoroutine();
 +
 +
// Add an observer to the 1st coroutine for it's status
 +
coroutine1.addObserver("status", function( context, key, value, oldValue ) {
 +
if ( value == nokia.maps.util.Coroutine.TERMINATED ) { // When gets terminated
 +
nokia.maps.util.Coroutine.kill( coroutine2 ); // kill the 2nd coroutine
 +
$("#showCoords").text( "coroutine1 has finished, and coroutine2 was terminated.");
 +
}
 +
});
 +
}
 +
</code>
  
        <div id="map" style="width:80%; height:80%;  position: absolute; "></div>
+
A working example can be found at:
+
        <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");
+
  
//
+
http://heremaps.github.io/examples/examples.html#coroutine
/////////////////////////////////////////////////////////////////////////////////////
+
+
    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>
+
</code>
+
  
==For more on the Nokia Maps API==
+
==For more on the HERE Maps API==
  
Please check out the Nokia Maps API full documentation and API reference here:
+
Please check out the HERE Maps API full documentation and API reference here:
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.net/javascript_api HERE Maps API]
  
 
You may also access the interactive API explorer
 
You may also access the interactive API explorer
 
* [http://developer.here.net/javascript_api_explorer API explorer]
 
* [http://developer.here.net/javascript_api_explorer API explorer]

Latest revision as of 18:35, 20 December 2013

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

Article Metadata
Code Example
Source file: coroutine.html
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web browser
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, coroutines
Created: Maveric (28 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (20 Dec 2013)


[edit] Introduction and Prerequisites

Firstly, please read the complete section of Coroutines at the HERE 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.

[edit] 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.

function initialiseCoroutines(map){
// Define the 1st coroutine - increase the value of i by one every 10 milliseconds,
// until we reach a 500. Watch the screen output for the numbers.
this.iterationCoroutine = nokia.maps.util.Coroutine.create(
"iterator", function( scope, context ) {
i++;
 
if ( i <= 500 ) {
$("#iterator").text("Wait until 500 to see the map move! : "+i+"/500");
return nokia.maps.util.Coroutine.sleep(10);
}
 
// pan the map to the new position after the loop is over
this.map.pan(0, 0, 400, 400);
});
 
// Define the 2nd coroutine display iteration in console.log every 100 miliseconds
this.loggingCoroutine = nokia.maps.util.Coroutine.create(
"printing", function( scope, context ) {
$("#printerlog").text( 'logging count = ' + i);
return nokia.maps.util.Coroutine.sleep(100);
});
 
}
function runCoroutines(){
// 1st coroutine, init the iteration.
var coroutine1 = iterationCoroutine();
 
// 2nd second coroutine, init the logging.
var coroutine2 = loggingCoroutine();
 
// Add an observer to the 1st coroutine for it's status
coroutine1.addObserver("status", function( context, key, value, oldValue ) {
if ( value == nokia.maps.util.Coroutine.TERMINATED ) { // When gets terminated
nokia.maps.util.Coroutine.kill( coroutine2 ); // kill the 2nd coroutine
$("#showCoords").text( "coroutine1 has finished, and coroutine2 was terminated.");
}
});
}

A working example can be found at:

http://heremaps.github.io/examples/examples.html#coroutine

[edit] For more on the HERE Maps API

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

You may also access the interactive API explorer

This page was last modified on 20 December 2013, at 18:35.
116 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.

×