Class: ContextMenu

cercaliagl.ContextMenu


Javascript ES5

const contextMenu = new cercaliagl.ContextMenu.({ ... });

Class for creating a context menu. This control permits:

  • - Draw a menu in a LonLat position
  • - Add / Remove options in menu.
  • - Enable / Disable options of the menu.
  • - Show / Hide options of the menu.


Example creating a custom contexte menu (without default options):

const map = new cercaliagl.Map({
  controls: [],
  rightClickMenuOptions: [],
});
const contextMenu = new cercaliagl.ContextMenu({ map });
contextMenu.addOption('drawMarker', 'Create marker here', (position) => {
  const marker = new cercaliagl.Marker({
    position,
    simpleLabel: new cercaliagl.SimpleLabel({ text: position.toString() }),
  });
  map.addMarker(marker);
});

new ContextMenu(options)

ContextMenu.js, line 187
Name Type Description
options

Options.

Name Type Description
id string | undefined

Id option
map module:cercaliagl/Map~Map | undefined

Map
fixedPosition module:maplibre-gl~LngLat | undefined

Fixed position in map
className string

Context menu class name

Methods

addOption(id, name, callbackFn, position, className)

ContextMenu.js, line 284

Add a new option in the context menu at the end or in a specific position. Returns options identifier. If the id options exist removes previous option.

Name Type Description
id string

Option's identifier.
name string

Text will be displayed in option.
callbackFn function

Function will be fired when users click the option.
position number

The position where option will be added.
className string

Classname for option.

addSubMenu(id, name, optionList)

ContextMenu.js, line 305

Add submenu. A submenu contains one or more options

Name Type Description
id string

Specify internal Id element
name string

Label of submenu.
optionList Array.<module:cercaliagl/ContextMenu~ContextMenuSubmenuOption>

Option list. Example: {[{id:'btn1', label:'Button1', callback: 'callbackFn1'}, {id:'btn2', label:'Button2', callback: 'callbackFn1'}]}.

close()

ContextMenu.js, line 326

Close the menu.

closeSubmenu(id)

ContextMenu.js, line 405

Close Submenu

Name Type Description
id string

Id.

existOption(id){boolean}

ContextMenu.js, line 337

Returns true if the option exists.

Name Type Description
id string

Option's identifier.
Returns:
True if exists.

hideOption(id)

ContextMenu.js, line 387

Hide menu option.

Name Type Description
id string

Id.

isVisible(){boolean}

ContextMenu.js, line 270

Returns true if the context menu is visible.

Returns:
Returns true if is visible.

open(lonLat)

ContextMenu.js, line 346

Open the menu. If menu isn't position fixed needs a position to be displayed.

Name Type Description
lonLat module:maplibre-gl~LngLat | module:cercaliagl/LonLat~LonLat

If menu isn't position fixed, menu will be displayed in ths position.

openSubmenu(id)

ContextMenu.js, line 396

Open Submenu

Name Type Description
id string

Id.

removeAllOptions()

ContextMenu.js, line 360

Remove all options in context menu.

removeOption(id)

ContextMenu.js, line 369

Remove an option from the context menu.

Name Type Description
id string

Option's identifier.

showOption(id)

ContextMenu.js, line 378

Show menu option.

Name Type Description
id string

Id.