×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to check the Date Border Crossing

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
jasfox (Talk | contribs)
m (Jasfox -)
 
(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 explains how to check the Date Border Crossing using the  [http://developer.here.net/javascript_api Nokia Maps API].}}  
+
{{Abstract|This article explains how to check the Date Border Crossing using the  [http://developer.here.net/javascript_api HERE Maps API].}}  
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|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/international-date-line-check.html international-date-line-check.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=FireFox, Internet Explorer, Google Chrome, Opera
+
|devices= FireFox, Internet Explorer, Google Chrome, Opera
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|platform= Web
 
|platform= Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= Nokia Maps API 2.2.4
+
|dependencies= HERE Maps API 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, Date Border
+
|keywords= HERE Maps, JavaScript, Date Border
|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 -->
+
|translated-by= <!-- [[User:XXXX]] -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
+
|translated-from-id= <!-- Id of translated revision -->
|update-by=<!-- After significant update: [[User:username]]-->
+
|review-by= <!-- After re-review: [[User:username]] -->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|creationdate=20111116
+
|update-by= <!-- After significant update: [[User:username]]-->
|author=[[User:Maveric]]
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20111116
 +
|author= [[User:Maveric]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
  
The {{Icode|isCDB}} flag of the {{Icode|BoundingBox}} in  [http://developer.here.net/javascript_api Nokia Maps API] has been added since v2 to indicate that the bounding box is crossing the date border. A bounding box which is spanned from -180° (left) to +180° (right) is NOT crossing the date border. Default value is {{Icode|false}}.  
+
The {{Icode|isCDB}} flag of the {{Icode|BoundingBox}} in  [http://developer.here.net/javascript_api HERE Maps API] has been added since v2 to indicate that the bounding box is crossing the date border. A bounding box which is spanned from -180° (left) to +180° (right) is NOT crossing the date border. Default value is {{Icode|false}}.  
  
 
The API reference link:
 
The API reference link:
Line 37: Line 39:
 
== Example code ==
 
== Example code ==
  
This example first adds two {{Icode|Markers}} for which the {{Icode|BoundingBox}} is not crossing the International Date Line. A third Marker is then randomly added to coordinates that will cause the check to produce the {{Icode|BoundingBox}} to have crossed the IDL. Remember to add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] to get the example to work.
+
This example first adds two {{Icode|Markers}} for which the {{Icode|BoundingBox}} is not crossing the International Date Line. A third Marker is then added by clicking on the map which will also check to see if  the {{Icode|BoundingBox}} to have crossed the IDL.
  
 
<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 setUpContainer(){
<html xmlns="http://www.w3.org/1999/xhtml">
+
this.container = new nokia.maps.map.Container();
    <head>
+
container.objects.addAll([
      <title>Check for Date Border Crossing</title>
+
new nokia.maps.map.StandardMarker([-18.10, 176.46]),
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
new nokia.maps.map.StandardMarker([-18.10, 180.00])]
      <script type="text/javascript"
+
);
            src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
+
        </script>
+
    </head>
+
    <body>
+
  
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
+
map.objects.add(container);
        <script type="text/javascript">
+
map.zoomTo(container.getBoundingBox(),false,true);
/////////////////////////////////////////////////////////////////////////////////////
+
// 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 map = new nokia.maps.map.Display(document.getElementById("mapContainer"),  
+
{    components: [ new nokia.maps.map.component.Behavior()],
+
    'zoomLevel': 10,       
+
                  'center':[-1.366667, 176.466667]
+
 
}
 
}
);
+
</code>
+
<code javascript>
var markerContainer = new nokia.maps.map.Container()                  
+
function addOnClickEventListener(map){
markerContainer.objects.add(   
+
map.addListener("click", function(evt){
            new nokia.maps.map.StandardMarker   
+
evt.preventDefault();
            (      
+
coordinate = map.pixelToGeo(evt.displayX, evt.displayY);
              [-1.366667, 176.466667],       
+
container.objects.add(new nokia.maps.map.Marker(coordinate));
              {           
+
checkDateBorder(container);});
                text:  "-1.366667, 176.466667",
+
}
                draggable: false         
+
</code>
              }));
+
<code javascript>
+
function checkDateBorder(container){
markerContainer.objects.add(   
+
if (container.getBoundingBox().isCDB){
            new nokia.maps.map.StandardMarker(       
+
$("#dateline").text("True - The Bounding box crosses the date border");
              [-1.366667, 180.000000],       
+
} else {
              {          
+
$("#dateline").text("False - The Bounding box is not crossing the date border");
                text:  "-1.366667, 180.000000",
+
}
                draggable: false,       
+
              }));   
+
+
map.objects.add(markerContainer);  
+
map.zoomTo(markerContainer.getBoundingBox(),false,true);  
+
+
// Check for Date Border Crossing
+
checkDateBorder();
+
+
// Add new Marker randomly
+
markerContainer.objects.add(  
+
              new nokia.maps.map.StandardMarker(       
+
                  [Math.random() * 180 - 90, -176.000],       
+
                  {            text:  "-176.000, 179.000",                               
+
                                draggable: false,       
+
                  }));  
+
+
map.zoomTo(markerContainer.getBoundingBox(),false,true);  
+
+
// Check for Date Border Crossing
+
+
checkDateBorder();
+
+
function checkDateBorder()
+
{  
+
  var CDB = markerContainer.getBoundingBox().isCDB;   
+
  if (CDB == false)  
+
          {          
+
            alert("False - The Bounding box is not crossing the date border");      
+
              } else if(CDB == true)
+
                    {      
+
                      alert("True - The Bounding box crosses the date border");      
+
                    }
+
 
}
 
}
</script>
 
</body>
 
</html>
 
 
  </code>
 
  </code>
  
==For more on Nokia Maps API==
+
A working example can be found at:
 +
 
 +
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/international-date-line-check.html
 +
 
 +
==For more on 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 10:22, 28 November 2013

This article explains how to check the Date Border Crossing using the HERE Maps API.

Article Metadata
Code ExampleTested with
Devices(s): FireFox, Internet Explorer, Google Chrome, Opera
Compatibility
Platform(s): Web
Dependencies: HERE Maps API 2.5.3
Article
Keywords: HERE Maps, JavaScript, Date Border
Created: Maveric (16 Nov 2011)
Last edited: jasfox (28 Nov 2013)

Contents

[edit] Introduction

The isCDB flag of the BoundingBox in HERE Maps API has been added since v2 to indicate that the bounding box is crossing the date border. A bounding box which is spanned from -180° (left) to +180° (right) is NOT crossing the date border. Default value is false.

The API reference link: http://developer.here.net/docs/maps_js/topics_api_pub/nokia.maps.geo.BoundingBox.html#topic-apiref__BoundingBox-isCDB

[edit] The International Date Line (IDL) Definition by Wikipedia.org

IDL is a generally north-south imaginary line on the surface of the Earth, passing through the middle of the Pacific Ocean, that designates the place where each calendar day begins. It is roughly along 180° longitude, opposite the Prime Meridian, but it is drawn with diversions to pass around some territories and island groups.Crossing the IDL traveling east results in a day or 24 hours being subtracted, so that the traveler repeats the date to the west of the line. Full description here: http://en.wikipedia.org/wiki/International_Date_Line

[edit] Example code

This example first adds two Markers for which the BoundingBox is not crossing the International Date Line. A third Marker is then added by clicking on the map which will also check to see if the BoundingBox to have crossed the IDL.

function setUpContainer(){
this.container = new nokia.maps.map.Container();
container.objects.addAll([
new nokia.maps.map.StandardMarker([-18.10, 176.46]),
new nokia.maps.map.StandardMarker([-18.10, 180.00])]
);
 
map.objects.add(container);
map.zoomTo(container.getBoundingBox(),false,true);
}
function addOnClickEventListener(map){
map.addListener("click", function(evt){
evt.preventDefault();
coordinate = map.pixelToGeo(evt.displayX, evt.displayY);
container.objects.add(new nokia.maps.map.Marker(coordinate));
checkDateBorder(container);});
}
function checkDateBorder(container){
if (container.getBoundingBox().isCDB){
$("#dateline").text("True - The Bounding box crosses the date border");
} else {
$("#dateline").text("False - The Bounding box is not crossing the date border");
}
}

A working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/international-date-line-check.html

[edit] For more on 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 28 November 2013, at 10:22.
82 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.

×