×
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.
150 page views in the last 30 days.
×