A contextmenu extension for OpenLayers. Requires OpenLayers v7.0.0 or higher.
npm install ol-contextmenu
CDN Hosted - jsDelivr
Load CSS and Javascript:
<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script>Load CSS and Javascript:
<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.css" rel="stylesheet">
<script src="https://unpkg.com/ol-contextmenu"></script>Download latest release and (obviously) load CSS and Javascript.
const contextmenu = new ContextMenu({
width: 170,
defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
items: [
{
text: 'Center map here',
classname: 'some-style-class', // add some CSS rules
callback: center, // `center` is your callback function
},
{
text: 'Add a Marker',
classname: 'some-style-class', // you can add this icon with a CSS class
// instead of `icon` property (see next line)
icon: 'img/marker.png', // this can be relative or absolute
callback: marker,
},
'-', // this is a separator
],
});
map.addControl(contextmenu);If you provide items {Array} a submenu will be created as a child of the current item.
const all_items = [
{
text: 'Some Actions',
items: [
// <== this is a submenu
{
text: 'Action 1',
callback: action,
},
{
text: 'Other action',
callback: action2,
},
],
},
{
text: 'Add a Marker',
icon: 'img/marker.png',
callback: marker,
},
'-', // this is a separator
];const removeMarker = function (obj) {
vectorLayer.getSource().removeFeature(obj.data.marker);
};
const removeMarkerItem = {
text: 'Remove this Marker',
icon: 'img/marker.png',
callback: removeMarker,
};
let restore = false;
contextmenu.on('open', function (evt) {
const 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;
}
});eventType:contextmenu; The listening event type (You could use'click','dblclick')defaultItems:true; Whether the default items (which are: Zoom In/Out) are enabledwidth:150; The menu's widthitems:[]; An array of object|string
Remove all elements from the menu.
Close the menu programmatically.
@param {Array} arr
Add items to the menu. This pushes each item in the provided array to the end of the menu.
Example:
const contextmenu = new ContextMenu();
map.addControl(contextmenu);
const add_later = [
'-', // this is a separator
{
text: 'Add a Marker',
icon: 'img/marker.png',
callback: marker,
},
];
contextmenu.extend(add_later);@param {Object|String} item
Insert the provided item at the end of the menu.
Remove the first item of the menu.
Remove the last item of the menu.
Get an array of default items.
Whether the menu is open.
@param {Array} pixel
Update menu's position.
contextmenu.on('beforeopen', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
return ft;
});
if (feature) {
// open only on features
contextmenu.enable();
} else {
contextmenu.disable();
}
});contextmenu.on('open', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
return ft;
});
if (feature) {
// add some other items to the menu
}
});contextmenu.on('close', function (evt) {
// it's upon you
});
