RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jonataswalker/ol-contextmenu below:

jonataswalker/ol-contextmenu: Custom Context Menu for OpenLayers

OpenLayers Custom Context Menu

A contextmenu extension for OpenLayers. Requires OpenLayers v7.0.0 or higher.

JSFiddle CodeSandbox

npm install ol-contextmenu

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.

Instantiate with some options and add the Control

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

You can add a (nested) submenu like this:

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
];

Would you like to propagate custom data to the callback handler?

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;
    }
});

options is an object with the following possible properties:

eventType: contextmenu; The listening event type (You could use 'click', 'dblclick')
defaultItems: true; Whether the default items (which are: Zoom In/Out) are enabled
width: 150; The menu's width
items: []; 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.

contextmenu.getDefaultItems()

Get an array of default items.

Whether the menu is open.

contextmenu.updatePosition(pixel)

@param {Array} pixel

Update menu's position.

If you want to disable this plugin under certain circumstances, listen to beforeopen

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();
    }
});

Listen and make some changes when context menu opens

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
    }
});

Any action when context menu gets closed?

contextmenu.on('close', function (evt) {
    // it's upon you
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4