Skip to content

Commit deb9b96

Browse files
dbacareldbacarel
authored
Fixed Context menu example to work with all engines (#172)
* Fixed Context menu example to work with all engines * minor Signed-off-by: Daniele Bacarella <[email protected]> --------- Signed-off-by: Daniele Bacarella <[email protected]>
1 parent 6a72b12 commit deb9b96

File tree

2 files changed

+55
-75
lines changed

2 files changed

+55
-75
lines changed

‎context-menu/demo.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<head>
44
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
55
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
6-
6+
77
<title>Context menu</title>
88
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
99
<link rel="stylesheet" type="text/css" href="demo.css" />
1010
<link rel="stylesheet" type="text/css" href="styles.css" />
1111
<link rel="stylesheet" type="text/css" href="../template.css" />
1212
<script type="text/javascript" src='../test-credentials.js'></script>
13-
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
13+
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
1414
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
1515
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
1616
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
@@ -25,7 +25,7 @@ <h1>Context menu</h1>
2525
</p>
2626
<div id="map"></div>
2727
<h3>Code</h3>
28-
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
28+
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
2929
</p>
3030
<p>By default new menu items does not replace the previous ones, instead all items are collected and displayed together. However you can easily modify the items array to change this behaviour. </p>
3131
<p>Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR.

‎context-menu/demo.js‎

Lines changed: 52 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -9,83 +9,63 @@
99
function addContextMenus(map) {
1010
// First we need to subscribe to the "contextmenu" event on the map
1111
map.addEventListener('contextmenu', function (e) {
12-
// As we already handle contextmenu event callback on circle object,
13-
// we don't do anything if target is different than the map.
14-
if (e.target !== map) {
15-
return;
16-
}
12+
// Create and push the proper context items according to the event target
13+
if (e.target instanceof H.map.Circle) {
14+
// Add a single item to the context menu displaying "Remove circle"
15+
e.items.push(
16+
new H.util.ContextItem({
17+
label: 'Remove circle',
18+
callback: function () {
19+
map.removeObject(e.target);
20+
}
21+
})
22+
);
23+
} else {
24+
// "contextmenu" event might be triggered not only by a pointer,
25+
// but a keyboard button as well. That's why ContextMenuEvent
26+
// doesn't have a "currentPointer" property.
27+
// Instead it has "viewportX" and "viewportY" properties
28+
// for the associates position.
1729

18-
// "contextmenu" event might be triggered not only by a pointer,
19-
// but a keyboard button as well. That's why ContextMenuEvent
20-
// doesn't have a "currentPointer" property.
21-
// Instead it has "viewportX" and "viewportY" properties
22-
// for the associates position.
30+
// Get geo coordinates from the screen coordinates.
31+
var coord = map.screenToGeo(e.viewportX, e.viewportY);
2332

24-
// Get geo coordinates from the screen coordinates.
25-
var coord = map.screenToGeo(e.viewportX, e.viewportY);
33+
// In order to add menu items, you have to push them to the "items"
34+
// property of the event object. That has to be done synchronously, otherwise
35+
// the ui component will not contain them. However you can change the menu entry
36+
// text asynchronously.
37+
e.items.push(
38+
// Create a menu item, that has only a label,
39+
// which displays the current coordinates.
40+
new H.util.ContextItem({
41+
label: [
42+
Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
43+
Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
44+
].join(' ')
45+
}),
46+
// Create an item, that will change the map center when clicking on it.
47+
new H.util.ContextItem({
48+
label: 'Center map here',
49+
callback: function () {
50+
map.setCenter(coord, true);
51+
}
52+
}),
53+
// It is possible to add a seperator between items in order to logically group them.
54+
H.util.ContextItem.SEPARATOR,
55+
// This menu item will add a new circle to the map
56+
new H.util.ContextItem({
57+
label: 'Add circle',
58+
callback: function () {
59+
// Create and add the circle to the map
60+
map.addObject(new H.map.Circle(coord, 5000));
61+
}
62+
})
63+
);
64+
}
2665

27-
// In order to add menu items, you have to push them to the "items"
28-
// property of the event object. That has to be done synchronously, otherwise
29-
// the ui component will not contain them. However you can change the menu entry
30-
// text asynchronously.
31-
e.items.push(
32-
// Create a menu item, that has only a label,
33-
// which displays the current coordinates.
34-
new H.util.ContextItem({
35-
label: [
36-
Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
37-
Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
38-
].join(' ')
39-
}),
40-
// Create an item, that will change the map center when clicking on it.
41-
new H.util.ContextItem({
42-
label: 'Center map here',
43-
callback: function() {
44-
map.setCenter(coord, true);
45-
}
46-
}),
47-
// It is possible to add a seperator between items in order to logically group them.
48-
H.util.ContextItem.SEPARATOR,
49-
// This menu item will add a new circle to the map
50-
new H.util.ContextItem({
51-
label: 'Add circle',
52-
callback: addCircle.bind(map, coord)
53-
})
54-
);
5566
});
5667
}
5768

58-
/**
59-
* Adds a circle which has a context menu item to remove itself.
60-
*
61-
* @this H.Map
62-
* @param {H.geo.Point} coord Circle center coordinates
63-
*/
64-
function addCircle(coord) {
65-
// Create a new circle object
66-
var circle = new H.map.Circle(coord, 5000),
67-
map = this;
68-
69-
// Subscribe to the "contextmenu" eventas we did for the map.
70-
circle.addEventListener('contextmenu', function(e) {
71-
// Add another menu item,
72-
// that will be visible only when clicking on this object.
73-
//
74-
// New item doesn't replace items, which are added by the map.
75-
// So we may want to add a separator to between them.
76-
e.items.push(
77-
new H.util.ContextItem({
78-
label: 'Remove',
79-
callback: function() {
80-
map.removeObject(circle);
81-
}
82-
})
83-
);
84-
});
85-
86-
// Make the circle visible, by adding it to the map
87-
map.addObject(circle);
88-
}
8969

9070
/**
9171
* Boilerplate map initialization code starts below:
@@ -99,7 +79,7 @@ var defaultLayers = platform.createDefaultLayers();
9979

10080
// Step 2: initialize a map
10181
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
102-
center: {lat: 52.55006203880433, lng: 13.27548854220585},
82+
center: { lat: 52.55006203880433, lng: 13.27548854220585 },
10383
zoom: 9,
10484
pixelRatio: window.devicePixelRatio || 1
10585
});

0 commit comments

Comments
 (0)