Skip to content

Openlayers delete element option by mouse rightclick

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:

enter image description here

My code looks like this:

 var polygonInteraction = new ol.interaction.Draw({
 type: 'Polygon',
 source: vectorLayer.getSource()
  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++
  '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?


I found a quite good option for achieving it:

which led me to conclusion like this:'contextmenu');
  var feature = map.forEachFeatureAtPixel(map.getEventPixel(e),
   function (feature, layer) {
       return feature;
   if (feature) {
   return removeFeature

   var removeFeature = {
   text: 'Remove this object',
   classname: 'marker',
   callback: selectInteraction.getFeatures(),

based also at the solution here:

but so far I do the right click and the console shows the “contextmenu” only for me.

My full JSfiddle is here:

What I am doing wrong here?

Thanks & Regards


Here is an working example

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="[email protected]/en/v6.9.0/css/ol.css" type="text/css">
      .map {
        height: 400px;
        width: 100%;
    <script src="[email protected]/en/v6.9.0/build/ol.js"></script>
    <link href="[email protected]/dist/ol-contextmenu.min.css" rel="stylesheet">
<script src=""></script>
    <title>OpenLayers example</title>
    <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
var contextmenu = new ContextMenu({
  width: 170,
  defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
  items: []

var removeMarker = function (obj) {
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(); = { marker: feature };
    restore = true;
  } else if (restore) {
    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]))