Find file
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (88 sloc) 2.94 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta name="keywords" content="setUpContainer,addOnClickEventListener,checkDateBorder" />
<title>HERE Maps API Example: Checking the International Date Line</title>
<!-- Set up constants such as APP ID and token -->
<script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
<!-- Bootstrap jQuery Library -->
<script type="text/javascript" src="libs/jQl.min.js"></script>
<!-- Asynchronously the HERE Maps API for JavaScript -->
<script type="text/javascript" src="libs/hereAsyncLoader.js"
id="HereMapsLoaderScript"
data-map-container="mapContainer"
data-params="maps"
data-callback="afterHereMapLoad" >
</script>
<link rel="icon" href="http://here.com/favicon.ico"/>
<!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
<h1>Checking the International Date Line</h1>
<p>Add additional markers by clicking on the map.</p>
<div id="dateline" style="height: 2.0em; font-size: 2em; color: blue;"></div>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="date-line" type="text/javascript" >
//<![CDATA[
var map,
container;
function addDateline(map) {
// Set of initial geo coordinates to create the purple polyline
var points = [
new nokia.maps.geo.Coordinate(85, 180),
new nokia.maps.geo.Coordinate(-85, 180)
];
// Transparent purple polyline
map.objects.add(new nokia.maps.map.Polyline(
points,
{
pen: {
strokeColor: '#22CA',
lineWidth: 5
}
}
));
}
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');
}
}
function addOnClickEventListener(map) {
var TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click',
coordinate;
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 setUpContainer() {
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());
}
function afterHereMapLoad(theMap) {
map = theMap;
map.set('center', new nokia.maps.geo.Coordinate(-18.10, 180.0));
map.set('zoomLevel', 15);
addDateline(map);
setUpContainer();
checkDateBorder(container);
addOnClickEventListener(map);
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>