jonataswalker / ol-contextmenu Goto Github PK

It would be great if you would integrate a possibility of setting a custom css class on the context menu. This is useful if you want to use different styled context menus on the map. I dont think that this is possible right now.

Hello,
i`m using your extension and i have problem with registered event map.on('pointermove',...).
In ctxmenu i have two actions wchich add/remove event to/from my map.

Below is a snippet of my code:

var wlaczDym = function(obj){
map.on('pointermove', DymekMapa);
};
var ctxwlaczDym = {
text: 'Dymek - on',
callback: wlaczDym
};
var wylaczDym = function(obj){
map.un('pointermove',DymekMapa);
};
var ctxwyaczDym = {
text: 'Dymek - off',
callback: wylaczDym
};
var contextmenu = new ContextMenu({
width: 170,
defaultItems: true,
items: [
ctxwlaczDym,
ctxwyaczDym,
'-'
]
});
map.addControl(contextmenu);

The problem is when wlaczDym is active (pointermove is active) and i'm moving cursor on contextmenu then event is still active. I need to grab features at cursor and then, when i move cursor over contextmenu pointermove event schould not be active (after pressing button in contextmenu i want write results in another variable to process them).
Is there any way to disable this behaviour??

Best regards.

The context menu activates when right clicking in an ol.Overlay.

UglifyJs is throwing error:

[echo] Building task management angular app
[exec]
[exec] @angular/[email protected] requires typescript@'>=2.1.0 <2.4.0' but 2.6.1 was found instead.
[exec] Using this version can result in undefined behaviour and difficult to debug problems.
[exec]
[exec] Please run the following command to install a compatible version of TypeScript.
[exec]
[exec] npm install typescript@'>=2.1.0 <2.4.0'
[exec]
[exec] To disable this warning run "ng set --global warnings.typescriptMismatch=false".
[exec]
[exec] �[0m�[0m
[exec] �[0mDate: �[1m�[37m2018-01-29T11:09:49.085Z�[39m�[22m�[0m
[exec] �[0m�[1m�[31mERROR in vendor.b8ac280cccaff61c75c8.bundle.js from UglifyJs�[39m�[22m�[0m
[exec] �[0mHash: �[1m�[37mbaf88294c6791d70b771�[39m�[22m�[0m
[exec] �[0m�[1m�[31mUnexpected token: name (a) [vendor.b8ac280cccaff61c75c8.bundle.js:139516,468]�[39m�[22m�[0m
[exec] �[0mTime: �[1m�[

Is there a way to open the context menu on a touch device? (perhaps by holding down for a long period) or does this need implemented manually?

Great component by the way.

Regards

257, 266 lines in ol3-contextmenu-debug.js:

257: var topics = {};
...
266: var index = topics[topic].push(listener) -1;

Variable 'topics' is not redefined, when ContextMenu is reinitialized. So item's callbacks are accumulated and called multiply, when the user reinitialize ContextMenu after redrawing the map.

it would be nice if menu(and submenu) was auto trim. now if i set width: 'auto' sub menu items are displayed on the main menu. the main menu is ok.

hi,ol3-contextmenu is good,thangs for your work.but it can not create second level menu，like File->Open。if it can create second level menu or more,it will be more great.

Hello,

I have this warning in my FF debug console.

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

I know that it's just a warning but it maybe make bad performance for application.
The warning dont appear in Chrome.

Firefox version : 45.7.0 ESR
Openlayers version : 3.18.2
ol3-contextmenu version : 2.4.0

Thanks for your help :)

Bug on 40 line: http://jsfiddle.net/gLmq75sp/1/

map.removeControl(contextmenu) calls Base.setMap(null) function, which results in an error

I'm only showing the context menu if a feature exists, but some of my features are pretty small (< 5 pixles), so it's not easy to get a 'hit'

Is there any way to incorporate a hitTolerance on the event, maybe as a configurable option?

Thanks

I have modified the fiddle created by you and created a new one here jsfiddle.

below is the code with the change, I have marked the lines which I have changed.

`contextmenu.on('open', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, ft => ft);

if (feature && feature.get('type') === 'removable') {
contextmenu.clear();
removeMarkerItem.data = { marker: feature };
contextmenu.push(removeMarkerItem);
} else {
contextmenu.clear();
contextmenu.extend(contextmenu_items);
contextmenu.extend(contextmenu.getDefaultItems());
}
contextmenu.clear(); //added this line
contextmenu.close(); ////added this line
});`

for the second issue. after calling contextmenu.clear() still contextmenu.element.childElementCount is showing as 1.

ol3-contextmenu - v2.4.1

I'm using the latest version of OpenLayers (4.0.1) and with the default context menu items (just zoom in/out), I get the following error when clicking either option:
Uncaught TypeError: Cannot read property 'pan' of undefined

I just wondered if this was something I'm doing wrong, or if this isn't compatible with ol4.

Hi Jonatas,

I'm using your component with sub menus. I have around 10 elements in the sub menu, and when it right click at the "bottom" of the page, the sub menu will partially disapear:

I illustrated it in a image:
http://nsa38.casimages.com/img/2016/09/29/160929120456152917.png

Here is a quick JS Fiddle that reproduces the bug: http://jsfiddle.net/YoannBureau/ooxs1w5d/44/

Thanks a lot!

hi.
r you planning to make context menu with scrollbar when there are many items inside menu?
best regards

Is it possible that you publish the context menu module on npm?

Hi Jonatas

First off I want to say what a useful plugin this, thanks for making it available.

I have a small feature request. It would be very handy to able to use FontAwesome (or Glyphicons) as well as /instead of icons. So something like:

                {
                    text: 'Add a Marker',
                    iconClass: 'fa fa-map-marker' ,                   
                    callback: marker
                },

Stewart

I'm attempting to use this menu to display a note to the user when they right click on a feature so that I can let them know something is happening while I make requests to get the data specific to the feature they have clicked on.

When I have the entries I want to display I update the menu.

Everything works fine until there are too many entries and the menu goes off the bottom of the page.

I tried updating to v2.3.0 but it didn't help.

When I using this package in npm, I have an error:

Uncaught ReferenceError: ol is not defined
    at ol3-contextmenu.js:8
    at e (ol3-contextmenu.js:8)
    at Object.<anonymous> (ol3-contextmenu.js:8)
    at __webpack_require__ (bootstrap 3ed0ba6…:553)
    at fn (bootstrap 3ed0ba6…:84)
    at Object.<anonymous> (map.js:76252)
    at Object.<anonymous> (map.js:76253)
    at __webpack_require__ (bootstrap 3ed0ba6…:553)
    at fn (bootstrap 3ed0ba6…:84)

I think we should import ol from 'openlayers'; in source files

@studentitm

Can I also pass parameters to the callback function which has been defined for a particular option in the context menu? At present, the callback function takes an implicit object that has coordinates of the clicked position and a data key.
I want to take some information from the right clicked feature and pass it to the callback function.
Right now, I am clearing the contextmenu on right click, add data to option and then push it in the contextmenu.
Can I somehow set the value of this data key dynamically, when the target feature is right clicked?

A while back I added the updatePosition method to allow you to indicate that the context menu had moved/the entries had changed. That calls down to the positionContainer to allow the underlying position to re-evaluate of the menu will fit on the screen.

Looking at it this works mostly but once the menus are getting a little larger they are snapping to the bottom of the map. Specifically I'm seeing it with a menu that doesn't need to move.

When user open contextmenu several times (5) it crash on IE.
This happens when method Сlear tries to remove submenu elements

Is it possible to update the Travis-CI build to register this in the Bower registry or at least perform a command line registration of the GitHub repo?

How to pass parameters to a callback function?

function tryMe (param1, param2) {
    alert (param1 + " and " + param2);
}

{
    text: 'Add a Marker',
    icon: 'img/marker.png',
    callback: tryMe (param1, param2)
  }

Using your fiddle provided here, i tried to create a sub menu item and change the callback to be in this sub menu item, however, it seems like it is unable to retrieve information to delete marker. I got the following error message when I click the subMenu item, "Uncaught TypeError: Cannot read property 'marker' of null"

Below is the updated menu item:
var secondaryItem = [ { text: 'removeMarker subMenu', callback: removeMarker } ]; var removeMarkerItem = { text: 'Remove this Marker', icon: url_marker, items: secondaryItem };

Below is the updated contextmenu.on function:
contextmenu.on('open', function(evt){ var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){ return ft; }); if (feature && feature.get('type') == 'removable') { contextmenu.clear(); secondaryItem.data = { marker:feature }; contextmenu.push(removeMarkerItem); } else { contextmenu.clear(); contextmenu.extend(contextmenu_items); contextmenu.extend(contextmenu.getDefaultItems()); } });

I am looking at a way to add checkbox items instead of simple text. Please let me know, how to add them.
Thanks
Giri

Hi, your beforeopen event example seems wrong. It should enable when feature is true.

Original example

contextmenu.on('beforeopen', function(evt){
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
    return ft;
  });

  if (feature) { // open only on features
    contextmenu.disable();
  } else {
    contextmenu.enable();
  }
});

Correct example.

contextmenu.on('beforeopen', function(evt){
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
    return ft;
  });

  if (feature) { // open only on features
    contextmenu.enable();
  } else {
    contextmenu.disable();
  }
});

I am sorry if I said wrong.

For example change the opening of the context menu on single left (regular) click.

Hi,
is it possible to add dynamic content to the context menu?
I want to add menu item based on vector features below the mouse.
-- Tolotos

Could you please add the functionality to view number of items currently in the menu, excluding the default items and check if the context menu is currently empty.

Hi i am getting this error ( Cannot read property 'addEventListener' of null ) While implementing to my maps codes , Could you guid me to resolve this issue please .

Openlayers 3.16 Version i am using

I am new to here n this domain so please help me solve

Thanks & Regards
KuMbA

The context menu plugin is a great utility.
But the contextmenu opens on right click of every element.
Could you please provide a way by which it opens only on right click of drawn geometries like polygon,circle etc.

Hi,

.on('open') changed behavior with Firefox 57 @Linux - in only fires on right double click.
Firefox <57, Chromium and Firefox 57 @ Windows still work.

if you change ol3-contextmenu from 2.2.4 to 2.3+ method close() stops working.
tested on javafx webview
`
var onOpenMenu = function (evt) {

  ..
        contextMenu.close();

.

};

contextMenu.on('open', onOpenMenu);

`

empty menu is still visible on map

Is there an option to be able to show the menu to the left of the mouse instead of the right?

Hi,

I want to open menu without right click to map. Is there any function to do that?

draw.on('drawend', function (e) {
    var currentFeature = e.feature;
    var coordinate = e.target.sketchLineCoords_["0"];
   //function?
});

I like your ol3-contextmenu, it's looking very good an is easy to use.

Maybe you can add a little feature in the next release:
An option (iconsize) to scale-down (or up) the icon.
This would allow to override the default CSS-value and dynamically change icon sizes from js.

In html.js it should be something like this:

if(item.icon){
    item.classname += ' ol-contextmenu-icon';
    style = ' style="background-image:url(' + item.icon + ');';

    if(item.iconsize){
        style += 'background-size:' + item.iconsize + ';';
    } else {
        style+='"'
    }

Best regards
Michael

Maybe I missed something, but does the js include a snippet to prevent the default context menu from opening?

Right now I added

$('body').attr('oncontextmenu','return false;');

But I rather not add this if possible. However unless I have the above, the default context menu for the browser opens.

Hi,

Is it possible to determine if the context menu is currently be displayed or not?
Some kind of .isVisible() function?

Best regards
Michael

Hi! Great stuff, but I have a new use case that isn't working as expected.

I have two side-by-side maps, each map needing an independent context menu. Unfortunately, clearing, pushing, or extending the first context menu will unexpectedly affect the second context menu.

JSFIDDLE

• Right click in the bottom map to view the context menu

• Right click in the upper map to view the context menu

• Items unexpectedly appear in the bottom context menu during upper map right click

It seems as though much of the code ends up referencing only the last context menu you create. I did notice the "li" element IDs were not unique in the case of multiple context menus, but correcting that issue wasn't enough to solve the problem.

Any ideas? Thanks in advance for any help!

Menu positioning is not working properly for me. Horizontal position is perfect, but the menu fails to open vertically adjacent to the right-click position. It is always positioned with the text-baseline of the last menu element at the bottom of the parent container div with the last few pixels of menu background clipped outside the div.

I must be doing something wrong, as I am just testing a console.log fire for the callback function and nothing happens. The menu is properly appearing though.

var contextmenu = new ContextMenu({
		width: 170,
		defaultItems: true
		});
	map.addControl(_this.contextmenu);
var feature;
var restore = false;
	contextmenu.on('open', function(evt){
		
		feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
			return ft;
		});
		if (feature) {
			contextmenu.clear();
			addFeatureItem.data = {
				feature: feature
			};
			contextmenu.push(addFeatureItem);
			restore = true;
		} else if (restore) {
			contextmenu.clear();
			contextmenu.extend(contextmenu_items);
			contextmenu.extend(contextmenu.getDefaultItems());
			restore = false;
		}
	});
var addFeatureItem = {
		text: 'Add Feature Instance',
		callback: addFeatureCallback
	};
	var addFeatureCallback = function(obj) {
			console.log('hi');
			console.log(obj.data.feature);
	}

Thanks for any help.

If you right click on a map then use the mouse wheel to zoom the map then the context menu remains on screen.

This means it's possible for the menu to be displayed in an area that it is not relevant for when clicking on a menu option. I believe I can work around this in my own code but it seems like something the context menu itself should also account for.

Hello there.
I must say that I love your plugin.

I want to know if it is possible to create my own icon classes (similar with ol-ctx-menu-zoom-in), or some based on font icons (like fontawsome ) and use them with contextmenu . For now it is possible to add icons only by providing an url .
And using classes makes it easier to integrate with other frameworks (like bootstrap, foundation).

The current way of adding icons have a bug because for each right mouse click, a new "ol-ctx-menu-icon" class is inserted in the < li > class list only for the item with a custom icon.
I accidentally observed it.

Have a nice day :)

Im unable to dismiss context menu outside of map, how i can dismiss, there is no method to dismiss the popup. tried dispose, but it completely remove the context-menu, setting up again il never shown on map.

gives an error of appendChild of undefined

I would like to open a menu which keep opening after closing a menu.

I open a menu and the select a item. After that, I would like to show another menu which has "save" and "Cancel" option. However, the second just show up for a while.

When I disable to context menu in the 'beforeopen' event then default browser context menu opens. is there any way to stop it from opening.
here is a https://jsfiddle.net/tzq4s6s2/
To test it,

1. right click and click on 'Add a marker'
   2, and then click on the added marker again.
   now, you will see that the default browser context menu open.
   I don't want this to happen. can you tell me how to do that ?

Following code works by previnting default browser context menu from displaying.
document.getElementById('mapDiv').oncontextmenu = function(e){ e = e?e:window.event; if (e.preventDefault) e.preventDefault(); // For non-IE browsers. else return false; // For IE browsers. };

I have a fresh install of ol3-contextmenu which I am initialising with an empty items array:

this.contextMenu = new ContextMenu({ width: 170, default_items: true, items: [] });
this.map.addControl(this.contextMenu);

The addControl operation generates an uncaught type error:

ol3-contextmenu.js:8 Uncaught TypeError: e.getTargetElement is not a function
p.setListeners @ ol3-contextmenu.js:8
p.init @ ol3-contextmenu.js:8e.setMap @ ol3-contextmenu.js:8
(anonymous function) @ ol.js:518id @ ol.js:33
k.dispatchEvent @ ol.js:31
k.Xc @ ol.js:91
...
...