Map (Leaflet) Context Menu

Add-ons
#1

Hi,
is there a way to implement this Leaflet plugin (GitHub - aratcliffe/Leaflet.contextmenu: A context menu for Leaflet.) in Cuba maps-addon?
It would be great to have a context menu opening on right click and giving the possibility to show user some menu items like:

  • Zoom here
  • Show coordinates
  • Center map here
  • Open Entity Screen (when you right click on a Point, Polyline or Polygon)
  • Show taken photos
  • Get geoInfos using OpenStreetMap nominatim
  • … and so on…

Please, have a look here, this is the demo url: Leaflet Context Menu

By the way, the addon is really useful.
Great job!

Thank you guys!

Regards,
Paolo

#3

Hi, Paolo!

Actually, it is possible to use Vaadin’s Context menu with the map, so there is no need to support the Leaflet plugin for this purpose.

If you want to show a context menu when clicking on some empty spot on a map, you may find this code helpful:


import com.haulmont.addon.maps.web.toolkit.ui.leaflet.shared.Point;
import com.haulmont.cuba.web.gui.icons.IconResolver;
import com.haulmont.cuba.web.widgets.addons.contextmenu.ContextMenu;
import com.vaadin.server.Resource;

    ...

    @Inject
    private GeoMap map;
    @Inject
    private IconResolver iconResolver;
    @Inject
    private Notifications notifications;

    private Point contextClickPoint = new Point();

    @Subscribe
    public void init(InitEvent initEvent) {
        LMap leafletMap = map.unwrap(LMap.class);

        ContextMenu contextMenu = new ContextMenu(leafletMap, false);
        Resource compassIcon = iconResolver.getIconResource(CubaIcon.COMPASS.source());

        contextMenu.addItem("Center map here", compassIcon,
                selectedItem -> map.setCenter(contextClickPoint.getLon(), contextClickPoint.getLat()));

        Resource questionIcon  = iconResolver.getIconResource(CubaIcon.QUESTION.source());
        contextMenu.addItem("Show coordinates", questionIcon,
                selectedItem -> notifications.create(Notifications.NotificationType.HUMANIZED)
                        .withCaption(contextClickPoint.toString())
                        .show());

        leafletMap.addContextMenuListener(event -> {
            contextClickPoint.setLat(event.getPoint().getLat());
            contextClickPoint.setLon(event.getPoint().getLon());

            contextMenu.open((int) event.getClientX(), (int) event.getClientY());
        });
    }

What about opening an editor screen for a geo-object, you can do it by subscribing to event of clicking on the geo-object (as described in this topic).

If none of these options is applicable for your case, could you please tell us about it in more detail?

Thank you for your feedback!
Regards,
Gleb

2 Likes
#5

Hi Gleb,
this is exactly what I was looking for!
But this works only when I right click on the map; I’d like to do the same on a geo-object (point/marker, polyline, polygon) both on a VectorLayer and on a CanvasLayer.
For example, when I do right click on a Point, I’d like to open a menu with this items:

  • Open Entity Screen
  • Open other Entity connected screens (maybe with a submenu?)
  • Move point (i.e. change coordinates by setting the Point editable)
  • Zoom here (already implemented)
  • Center Map here (already implemented)
  • Get geographic data (invoking OpenStreetMap nominatim service - already implemented)
  • View this Point on GoogleMaps (already implemented)

I tried to implement a context menu on a Point, using the Point.addRightClickListener() but I can’t get the right [x,y] event position:

		CanvasLayer.Point location = canvasLayer.addPoint(GeometryUtils.createPoint(p.getX(), p.getY()));
		location.addRightClickListener(rightClickEvent -> {
		
            LMap leafletMap = map.unwrap(LMap.class);
            com.haulmont.addon.maps.web.toolkit.ui.leaflet.shared.Point point = new com.haulmont.addon.maps.web.toolkit.ui.leaflet.shared.Point();
            ContextMenu contextMenu = new ContextMenu(leafletMap, false);

            Resource compassIcon = iconResolver.getIconResource(CubaIcon.COMPASS.source());
            contextMenu.addItem("Change point position", compassIcon, selectedItem -> {
                location.setEditable(true);
                location.addModifiedListener(modifiedEvent -> location.setEditable(false));
            });

            point.setLon(rightClickEvent.getGeometry().getX());
            point.setLat(rightClickEvent.getGeometry().getY());
            contextMenu.open((int) rightClickEvent.getGeometry().getX(), (int) rightClickEvent.getGeometry().getY()); // i know, it's incorrect: these are x,y on the map, not in the browser window... so the context menu appears outside the map
			
        });

How can I achieve this?

Thanks in advance.

Regards,
Paolo

#7

Hi, Paolo!

Unfortunately, current version of the add-on does not provide a way to bind custom context menu to geo-objects or Canvas geometries.

Regards,
Gleb