This tutorial shows how to create a context menu with the following functionality:
- When the user clicks anywhere on the map, the context menu allows adding a logo (a MapTP location) at the clicked location on the map.
- When the user clicks on a location, the context menu allows hiding the location.
A context menu is created with a DeclareMap24HTMLObject command, in the same way as an HTML Object:
//Declare the context menu (HTML object)
DeclareMap24HTMLObject: new Map24.WebServices.DeclareMap24HTMLObject({
MapObjectID: "_ctxMenu",
//The postion of the context menu is defined in coordinates which is delivered by MapClick event.
Coordinate: new Map24.WebServices.Coordinate({
Longitude: lon,
Latitude: lat
}),
Orientation: new Map24.WebServices.MapObjectOrientation({
Horizontal: "RIGHT",
Vertical: "BOTTOM",
HOffset: 10,
VOffset: 10
}),
HTML: content
})
The mapClickHandler function handles the mouse event. If a context menu is already open, it will be closed with the hideContextMenu function. The mapClickHandler function checks
- if a right mouse click has occurred, and
- if the mouse click has occurred on the map or on a location object. The content of the context menu is set accordingly. The context menu is shown with the showContextMenu function.
function mapClickHandler(e) {
//Tries to hide context menu if there is already one in map
hideContextMenu();
//If the right mouse button has been clicked
if(e.Button == e.RIGHT_BUTTON){
var objStackFirst = e.ObjectStack[0];
//If the target is a location
if (map.Session.MapObjects[objStackFirst.TargetId] instanceof Map24.Session.Location) {
//Context menu is a HTML Object, the content is defined in a DIV tag.
content = "<div style='border: 0px; text-align: left; background-color: #f0f0ea'>" +
"Context Menu for the location<br/><br/>" +
"<a href=\"javascript:hideLocation('"+objStackFirst.TargetId+"');hideContextMenu();\" target='_self'>Hide the location</a>" +
"</div>";
//show the context menu for removing a location
showContextMenu(e.Coordinate.Longitude, e.Coordinate.Latitude, content);
}
//The target is the map
else {
//Context menu is a HTML Object, the content is defined in a DIV tag
content = "<div style='border: 0px; text-align: left; background-color: #f0f0ea'>" +
"Context Menu for the location<br/><br/>" +
"<a href=\"javascript:addLocation("+e.Coordinate.Longitude+","+e.Coordinate.Latitude+
");hideContextMenu();\" target='_self'> Add a location</a>" +
"</div>";
//Show the context menu for adding a location
showContextMenu(e.Coordinate.Longitude, e.Coordinate.Latitude, content);
}
}
}
View example
Executable code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Context Menu</title>
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=Your AJAX application key goes here"></script>
<script type="text/javascript" language="javascript">
//Declare global variables
var map = null;
var LocalConn = null;
var count = 0;
var contextMenuVisibility = false;
function goMap24() {
//Load core and wrapper classes and specify a callback method.
//This method is called when the API is loaded and the map
//can be shown.
Map24.loadApi( ["core_api"], map24ApiLoaded);
}
function map24ApiLoaded() {
map = new Map24.Map();
map.addCanvas( new Map24.Canvas( { NodeName: "maparea" } ), "canvas" );
mapclient = new Map24.MapClient.Static();
map.addMapClient( mapclient, "static" );
map.show( "static", "canvas" );
//Add a listener to the MapClick event for map
//Handler for mouse clicks on map, it is used for adding and hiding locations
map.addListener( "Map24.Event.MapClick", mapClickHandler );
//Open a local connection for sending commands
LocalConn = map.Local.openConnection();
}
function mapClickHandler(e) {
//Tries to hide context menu if there is already one in map
hideContextMenu();
//If the right mouse button has been clicked
if(e.Button == e.RIGHT_BUTTON){
var objStackFirst = e.ObjectStack[0];
//If the target is a location
if (map.Session.MapObjects[objStackFirst.TargetId] instanceof Map24.Session.Location) {
//Context menu is a HTML Object, the content is defined in a DIV tag.
content = "<div style='border: 0px; text-align: left; background-color: #f0f0ea'>" +
"Context Menu for the location<br/><br/>" +
"<a href=\"javascript:hideLocation('"+objStackFirst.TargetId+"');hideContextMenu();\" target='_self'>"+
"Hide the location</a>" +
"</div>";
//show the context menu for removing a location
showContextMenu(e.Coordinate.Longitude, e.Coordinate.Latitude, content);
}
//The target is the map
else {
//Context menu is a HTML Object, the content is defined in a DIV tag
content = "<div style='border: 0px; text-align: left; background-color: #f0f0ea'>" +
"Context Menu for the location<br/><br/>" +
"<a href=\"javascript:addLocation("+e.Coordinate.Longitude+","+e.Coordinate.Latitude+
");hideContextMenu();\" target='_self'> Add a location</a>" +
"</div>";
//Show the context menu for adding a location
showContextMenu(e.Coordinate.Longitude, e.Coordinate.Latitude, content);
}
}
}
//Push the context menu into the map and show it
function showContextMenu(lon, lat, content) {
var commands = [
new Map24.WebServices.XMLCommandWrapper({
//Declare the context menu (HTMLObject)
DeclareMap24HTMLObject: new Map24.WebServices.DeclareMap24HTMLObject({
MapObjectID: "_ctxMenu",
//The postion of the context menu is defined in coordinates which is delivered by MapClick event.
Coordinate: new Map24.WebServices.Coordinate({
Longitude: lon,
Latitude: lat
}),
Orientation: new Map24.WebServices.MapObjectOrientation({
Horizontal: "RIGHT",
Vertical: "BOTTOM",
HOffset: 10,
VOffset: 10
}),
HTML: content
})
}),
new Map24.WebServices.XMLCommandWrapper({
ControlMapObject: new Map24.WebServices.ControlMapObject({
Control: "ENABLE",
MapObjectIDs: [
"_ctxMenu"
]
})
})
];
LocalConn.mapletRemoteControl(new Map24.WebServices.Message.mapletRemoteControlRequest({
MapletRemoteControlRequest: new Map24.WebServices.MapletRemoteControlRequest({
Map24MRC: new Map24.WebServices.Map24MRC({
Commands: commands
})
})
}));
contextMenuVisibility = true;
}
//Hide the context menu
function hideContextMenu() {
//If the context menu isn't visible, don't hide it
if(contextMenuVisibility == false){
return;
}
var commands = [
new Map24.WebServices.XMLCommandWrapper({
ControlMapObject: new Map24.WebServices.ControlMapObject({
Control: "DISABLE",
MapObjectIDs: [
"_ctxMenu"
]
})
})
];
LocalConn.mapletRemoteControl(new Map24.WebServices.Message.mapletRemoteControlRequest({
MapletRemoteControlRequest: new Map24.WebServices.MapletRemoteControlRequest({
Map24MRC: new Map24.WebServices.Map24MRC({
Commands: commands
})
})
}));
contextMenuVisibility = false;
}
//Add a location
function addLocation(lon,lat) {
//Create an unique MapObjectID for location
LocationId = "myLocation" + count++;
var commands = [
new Map24.WebServices.XMLCommandWrapper({
//Declare a location.
DeclareMap24Location: new Map24.WebServices.DeclareMap24Location({
MapObjectID: LocationId,
Discard: false,
//The postion of the location is defined in coordinates which is delivered by MapClick event.
Coordinate: new Map24.WebServices.Coordinate({
Longitude: lon,
Latitude: lat
}),
//The logo is an image. This image uses a Hotspot definition
LogoURL: "./flag.png#hotspot=1,24"
})
}),
new Map24.WebServices.XMLCommandWrapper({
ControlMapObject: new Map24.WebServices.ControlMapObject({
Control: "ENABLE",
MapObjectIDs: [
LocationId
]
})
})
];
LocalConn.mapletRemoteControl(new Map24.WebServices.Message.mapletRemoteControlRequest({
MapletRemoteControlRequest: new Map24.WebServices.MapletRemoteControlRequest({
Map24MRC: new Map24.WebServices.Map24MRC({
Commands: commands
})
})
}));
}
//Hide the location
function hideLocation(locationId) {
var commands = [
new Map24.WebServices.XMLCommandWrapper({
ControlMapObject: new Map24.WebServices.ControlMapObject({
//Disable this location
Control: "DISABLE",
MapObjectIDs: [
locationId
]
})
})
];
LocalConn.mapletRemoteControl(new Map24.WebServices.Message.mapletRemoteControlRequest({
MapletRemoteControlRequest: new Map24.WebServices.MapletRemoteControlRequest({
Map24MRC: new Map24.WebServices.Map24MRC({
Commands: commands
})
})
}));
}
</script>
</head>
<body onload="goMap24()">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
</body>
</html>
