This tutorial shows you how to center the map view on a given coordinate, zoom the map view, or pan it in a given direction.
-
Panning the map view in a direction can be done with the Map24.MapApplication.pan() function. The direction is provided as parameter, for example “NORTH”, “NORTHWEST”, “WEST”, “SOUTHWEST”, and so on.
View example
Executable code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>NN4D - Map Controls</title>
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=Add your AJAX application key here"></script>
<script type="text/javascript" language="javascript">
function goMap24() {
Map24.loadApi( ["core_api", "wrapper_api"] , map24ApiLoaded );
}
function map24ApiLoaded(){
Map24.MapApplication.init( { NodeName: "maparea" } );
}
//Zoom in the current map view.
function zoomIn(){
Map24.MapApplication.zoomIn();
}
//Zoom out the current map view.
function zoomOut(){
Map24.MapApplication.zoomOut();
}
//Pan the map view in the direction provided in the parameter, e.g. NORTH, EAST, ...
function pan( dir ){
Map24.MapApplication.pan( dir );
}
//Center the map view on the given map coordinates. The MinimumWidth parameter
//defines the minimal width of the new map view in meters.
function centerOnCoordinate() {
Map24.MapApplication.center( {Longitude:500, Latitude:3000, MinimumWidth: 1000} );
}
//Center the map view on a coordinate provided in an object of type Map24.Coordinate.
function centerOnCoordinateObject() {
Map24.MapApplication.center( { Coordinate:new Map24.Coordinate(600, 3000), MinimumWidth: 5000 } );
}
</script>
</head>
<body onload="goMap24();">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
<br />
<input type="button" value="Center On Lon Lat" onclick="centerOnCoordinate();" />
<input type="button" value="Center On Coordinate Object" onclick="centerOnCoordinateObject();" />
<input type="button" value="Zoom In" onclick="zoomIn();" />
<input type="button" value="Zoom Out" onclick="zoomOut();" /> <br />
<input type="button" value="Pan North" onclick='pan("NORTH");' />
<input type="button" value="Pan West" onclick='pan("WEST");' />
<input type="button" value="Pan East" onclick='pan("EAST");' />
<input type="button" value="Pan South" onclick='pan("SOUTH");' /> <br />
<input type="button" value="Pan Northeast" onclick='pan("NORTHEAST");' />
<input type="button" value="Pan Northwest" onclick='pan("NORTHWEST");' />
<input type="button" value="Pan Southeast" onclick='pan("SOUTHEAST");' />
<input type="button" value="Pan Southwest" onclick='pan("SOUTHWEST");' /> <br />
</body>
</html>
