Archive
Bing Maps v6.3 – Context Menu with jQuery Plugin
The tradition way to add a context menu for the Bing Map v6.3 is to attach event handler for “onclick” event and check if the right mouse button is clicked in the event handler. Please see Abhishek Sur‘s post for details.
There is another way to add a context menu – attach event handler for “oncontextmenu” event, but this is for Bing Map v4 (see this). The behavior is very similar to the “onclick” event in v6.3.
These two methods add some overhead in the event handling, and I found there are some glitches when handling “onclick” event – it’s better to check the right mouse button clicking in “onmouseup” event. Anyway, thanks to the jQuery Context Menu Plugin – it handles mouse and keyboard events very well and it makes adding context menus in Bing Map way easier.
Let’s check the source code of the demo page:
1 <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”ContextMenu.aspx.cs” Inherits=”BingMap.ContextMenu” %>
2
3 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
4
5 <html xmlns=”http://www.w3.org/1999/xhtml” >
6 <head runat=”server”>
7 <title>Bing Map – Context Menu</title>
8 <script type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3″></script>
9 <script src=”JavaScript/jquery-1.4.2.min.js” type=”text/javascript”></script>
10 <script src=”JavaScript/jquery.contextMenu.js” type=”text/javascript”></script>
11 <link href=”CSS/jquery.contextMenu.css” rel=”stylesheet” type=”text/css” />
12
13 <script type=”text/javascript”>
14 var map = null;
15
16 jQuery(document).ready(function() {
17 InitMap();
18 });
19
20 function InitMap() {
21 // Set and load map
22 map = new VEMap(“myMap”);
23 map.LoadMap(new VELatLong(49.260407, -123.114034), 15, VEMapStyle.Road);
24
25 // Add context menu to the map
26 jQuery(“#myMap”).contextMenu({
27 menu: ‘myMapContextMenu’
28 },
29 function(action, src, pos) {
30 MapContextMenuHandler(action, src, pos);
31 });
32
33 }
34
35 function MapContextMenuHandler(action, src, pos) {
36 if (action == “add_shape”) {
37 // Add a new shape
38 var pixel = new VEPixel(pos.x + 5, pos.y + 5);
39 var shape = new VEShape(VEShapeType.Pushpin, map.PixelToLatLong(pixel));
40 shape.SetCustomIcon(“<img src=’/images/POI_dd-via.png’ />”);
41 map.AddShape(shape);
42
43 // Add context menu to the map
44 var primitiveID = shape.Primitives[0].iid;
45 jQuery(“#” + primitiveID).contextMenu({
46 menu: ‘myShapeContextMenu’
47 },
48 function(action1, src1, pos1) {
49 ShapeContextMenuHandler(action1, src1, pos1);
50 });
51 }
52 }
53
54 function ShapeContextMenuHandler(action, src, pos) {
55 if (action == “remove_shape”) {
56 // Remove the shape
57 var primitiveID = jQuery(src).attr(“id”);
58 var shape = map.GetShapeByID(primitiveID);
59 if (shape != null) {
60 map.DeleteShape(shape);
61 }
62 }
63 }
64
65 </script>
66 </head>
67 <body>
68 <form id=”form1″ runat=”server”>
69 <div>
70 <div id=”myMap” style=”position: relative; width: 900px; height: 700px;“></div>
71
72 <ul id=”myMapContextMenu” class=”contextMenu”>
73 <li class=”edit”><a href=”#add_shape”>Add Shape</a></li>
74 <li class=”quit separator”><a href=”#quit”>Close</a></li>
75 </ul>
76
77 <ul id=”myShapeContextMenu” class=”contextMenu”>
78 <li class=”delete”><a href=”#remove_shape”>Remove Shape</a></li>
79 <li class=”quit separator”><a href=”#quit”>Close</a></li>
80 </ul>
81 </div>
82 </form>
83 </body>
84 </html>
The code is pretty self-explanatory. Here are some notes:
- Include jQuery and jQuery Context Menu Plugin JavaScripts and jQuery Context Menu CSS file.
- Two types of context menus:
- myMapContextMenu – this context menu shows up when right mouse button is clicked anywhere inside the map – except the shapes (green dots). Selecting “Add Shape” will add a shape at the point right button was clicked.
- myShapeContextMenu – this context menu shoes up when right mouse button is clicked on the shapes (green dots). Selecting “Remove shape” will remove the shape from the map.
- Use jQuery ready() to initialize map.
- Bind the myMapContextMenu to the map control and provide a callback named “MapContextMenuHandler”.
- In the callback “MapContextMenuHandler”, create a new shape with custom icon (green dot), then bind the myShapeContextMenu to the newly created shape and provide the callback named “ShapeContextMenuHanlder”. The import thing is I use “Primitive” of the shape as the hook to the shape itself – shape.Primitives[0].iid.
- In the callback “ShapeContextMenuHandler”, get back the primitive ID and find the shape with the primitive ID, then remove the shape from the map.
Cool, eh?
Here are screenshots:
- Right-click shows up a context menu and select “Add Shape”.
- A shape is added to the map.
- Right-click the newly created shape to show the context menu. Click “Remove Shape” to remove this shape from the map.
