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:

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
 }

JavaScript
​x
 
 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:

https://gis.stackexchange.com/questions/148428/how-can-i-select-a-feature-in-openlayers-3-by-right-click-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(),
   }

JavaScript
 
 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

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>

JavaScript
 
<!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);

JavaScript
 
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);
​

https://jsfiddle.net/dab4Lvnz/5/

Advertisement

Answer