I would like to enable the delete option after right-clicking on my object. So far, the code I provided doesn’t work, because the browser is checking some devices for me, as you can see below:
My code looks like this:
var polygonInteraction = new ol.interaction.Draw({ type: 'Polygon', source: vectorLayer.getSource() }); polygonInteraction.setActive(false); polygonInteraction.on('drawend', onDrawend); polygonInteraction.on('drawend', function(e) { var title = prompt("Please provide the name", "default"); var value = prompt("Please provide the value", "undefinied"); var id = x++ e.feature.setProperties({ 'Id': id, 'Name': title, 'Value': value, }); function Rightcl(e) { var rightclick; if (e) var e = window.event; if (e.which) rightclick = (e.which == 3); else if (e.button) rightclick = (e.button == 2); alert('Delete me' + rightclick); // true or false }
I would like to have an option to delete the selected object after the right-click. How can I do it?
UPDATE:
I found a quite good option for achieving it:
which led me to conclusion like this:
console.info('contextmenu'); var feature = map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) { return feature; }); if (feature) { selectInteraction.getFeatures() } return removeFeature }); var removeFeature = { text: 'Remove this object', classname: 'marker', callback: selectInteraction.getFeatures(), }
based also at the solution here:
https://rawgit.com/jonataswalker/ol-contextmenu/master/examples/contextmenu.js
but so far I do the right click and the console shows the “contextmenu” only for me.
My full JSfiddle is here:
https://jsfiddle.net/1x3nuspj/
What I am doing wrong here?
Thanks & Regards
Advertisement
Answer
Here is an working example
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script> <link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([4.35247, 50.84673]), zoom: 4 }) }); </script> </body> </html>
var contextmenu = new ContextMenu({ width: 170, defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out items: [] }); var removeMarker = function (obj) { layer.getSource().removeFeature(obj.data.marker); }; var removeMarkerItem = { text: 'Remove this Marker', icon: 'img/marker.png', callback: removeMarker }; var restore = false; contextmenu.on('open', function (evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) { return ft; }); if (feature) { contextmenu.clear(); removeMarkerItem.data = { marker: feature }; contextmenu.push(removeMarkerItem); restore = true; } else if (restore) { contextmenu.clear(); contextmenu.extend(contextmenu_items); contextmenu.extend(contextmenu.getDefaultItems()); restore = false; } }); var layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673])) }) ] }) }); map.addLayer(layer); map.addControl(contextmenu);