The default behavior of a MapTP map is as follows:
- Dragging the mouse with pressed right mouse button pans a MapTP map
- Dragging the mouse with pressed left mouse button draws a zoom rectangle, and the map view is zoomed in at the marked position.
You can switch the mouse button behavior using an MRC command. Then users will be able to pan the map with pressed left mouse button, and zoom in the map with pressed right mouse button. Additionally, it is possible to assign further actions such as a predefined zoom action to different mouse events, for example click and double click events.
To see how it works, have a look at the sourcecode. This code snippet shows an example of how to define the behavior of a double click with the right mouse button. In the Value parameter you can assign a map action (here: ZOOMOUT) to the mouse event:
new Map24.WebServices.Property({
Key: "DblClick(Right)",
Value: "ZOOMOUT(true,true,1)"
})
A ZOOMIN/ZOOMOUT action has the following parameters:
- ToCursor {boolean} - If true, the center of the zoom will be the position of the mouse cursor. If false, the center of the zoom will me the center of the map.
- Animated {boolean} - Indicates, if the zoom operation should be animated (only takes affect using the interactive map).
- Steps {int} - Number of steps for the animated zoom (only takes affect using the interactive map).
View example
Executable code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Switch Mouse Buttons</title>
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=Your AJAX application key goes here"></script>
<script language="javascript" type="text/javascript">
var map = null;
var locConn = null;
// Load the MapTP Ajax API
function goMap24(){
// Load the api
Map24.loadApi(["core_api"], map24ApiLoaded);
}
// The map24 Ajax API is ready
function map24ApiLoaded(){
//Create the map.
map = new Map24.Map();
// Open a local connection
locConn = map.Local.openConnection();
// Define the viewport.
var canvas = new Map24.Canvas({ NodeName: "maparea" });
// Add the Canvas to the map
map.addCanvas(canvas, "c");
// Create a static map client
var staticClient = new Map24.MapClient.Static();
// Add the static map client to the map
map.addMapClient(staticClient, "Static");
// Show the map
map.show("Static", "c");
}
// This function will change the settings
// of the mouse buttons
function switchMouseButton (mode) {
// When the parameter is "pan_left", the
// left button should be used to pan the map
// and the right button should enable the
// zoom rectangle
if(mode == "pan_left") {
var panButton = "Left";
var zoomButton = "Right";
// And the other way around
} else if (mode == "pan_right") {
var panButton = "Right";
var zoomButton = "Left";
}
// Send a MRC request to change the assignment of the buttons
// using the local connection
locConn.mapletRemoteControl(
new Map24.WebServices.Message.mapletRemoteControlRequest({
MapletRemoteControlRequest: new Map24.WebServices.MapletRemoteControlRequest({
Map24MRC: new Map24.WebServices.Map24MRC({
Commands: [
new Map24.WebServices.XMLCommandWrapper({
// The handling of actions on the map is controlled by
// the MapHandler component. To modify the behaviour
// it's neccessary to set some special properties.
ControlComponent: new Map24.WebServices.ControlComponent({
Component: "MAPEVENTHANDLER",
Control: "SHOW",
Properties: [
// Set the new zoom button, to show the
// zooming rectangle, when dragging the
// mouse over the map and holding the specified
// button down
new Map24.WebServices.Property({
Key: "MouseDrag(" + zoomButton + ")",
Value: "ZOOMRECT"
}),
// Set the new pan button to pan
// the map, when dragging the
// mouse over the map and holding the specified
// button down
new Map24.WebServices.Property({
Key: "MouseDrag(" + panButton + ")",
Value: "MAPPAN"
}),
// Double click on the new pan button
// will cause the map to zoom in
new Map24.WebServices.Property({
Key: "DblClick(" + panButton + ")",
Value: "ZOOMIN(true,true,1)"
}),
// Double click on the new zoom button
// will cause the map to zoom out
new Map24.WebServices.Property({
Key: "DblClick(" + zoomButton + ")",
Value: "ZOOMOUT(true,true,1)"
})
]
})
})
]
})
})
})
);
// Disable the button of the new activated mode and enable
// the button of the inactive mode, using the id (which is the same
// as the mode parameter for this function)
var enableButton = mode == "pan_left" ? "pan_right" : "pan_left";
document.getElementById(enableButton).disabled = false;
document.getElementById(mode).disabled = true;
}
</script>
</head>
<body onload="goMap24();">
<h1>Switch Mouse Buttons with the MapTP Ajax API 2.3</h1>
<div id="maparea" style="height: 500px; width: 500px"></div>
<button id="pan_left" onclick="switchMouseButton('pan_left')">Pan with left button, zoom with right button</button>
<button id="pan_right" onclick="switchMouseButton('pan_right')" disabled="disabled">Pan with right button, zoom with left button</button>
</body>
</html>
