×
Namespaces

Variants
Actions
Revision as of 15:00, 14 February 2012 by jasfox (Talk | contribs)

HERE Maps API - How to pan the map

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use the panning method on the map. Feel free to modify and utilize whole or partial for your own purposes!

Article Metadata
Compatibility
Platform(s): Web browser
Dependencies: Nokia Maps 2.1.0
Article
Created: Maveric (27 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (14 Feb 2012)
See Also

{{{1}}}

Contents

Prerequistites

Nokia Maps API supported web browser (basically any modern browser should do).

Example code

This example will start panning the map to the right, then after a moment changes direction to the left and continues forever(?) ;) Unless you stop it by pressing the button and clearing the timer and interval settings.

<script type="text/javascript">
 
//Globals
 
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 (document.addEventListener)
document.addEventListener("DOMContentLoaded", all_is_ready, false);
 
 
function all_is_ready(){
 
alert("Click OK to start the panning.");
 
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: [19.119, 72.8957]
 
});
 
timerLauncher();
 
}
function timerLauncher()
{
// Start the timer
myInterval = setInterval ("panTheMap()", 1000);
}
 
function panTheMap()
{
map_start_x = map_start_x + 1;
map_start_y = map_start_y + 1;
map_end_x = map_end_x - 1;
map_end_y = map_end_y + 1;
 
document.getElementById("showCoords").innerHTML = "("+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);
 
myTimer = setTimeout ('document.getElementById("showCoords").innerHTML = ""', 500);
}
 
function stopPanning()
{
clearTimeout(myTimer);
clearInterval(myInterval);
alert("Timer and interval cleared. Example finished. Reload page to run again.");
 
}
</script>
<html>
<head>
<script type="text/javascript"
src="http://api.maps.nokia.com/2.0.0/jsl.js" 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>
<FORM>
<INPUT type="button" value="STOP panning" name="button6" onClick="stopPanning()">
</FORM>
</center>
</body>
</html>

Screenshot

NokiaMapsPanning.png

For more on Nokia Maps API

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

You may also access the interactive Nokia Maps API playground,

Summary

Using the map panning feature you could create e.g. a game, where the map is moving and the user should e.g. find something on the map and click it before the area vanishes from sight, just an idea ;) develop your own =)? Side scrolling game...? =)

191 page views in the last 30 days.
×