Skip to content

Instantly share code, notes, and snippets.

@mstahv
Created October 2, 2015 14:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mstahv/fc97922bcccdf0704831 to your computer and use it in GitHub Desktop.
Save mstahv/fc97922bcccdf0704831 to your computer and use it in GitHub Desktop.
An example how to use ContextMenu add-on together with V-Leaflet
package org.bluemix.challenge;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.Page;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import org.vaadin.addon.leaflet.LMap;
import org.vaadin.addon.leaflet.LMarker;
import org.vaadin.addon.leaflet.LOpenStreetMapLayer;
import org.vaadin.addon.leaflet.LeafletContextMenuEvent;
import org.vaadin.addon.leaflet.LeafletContextMenuListener;
import org.vaadin.addon.leaflet.shared.Point;
import org.vaadin.peter.contextmenu.ContextMenu;
import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItem;
/**
*
*/
@Theme("mytheme")
@Widgetset("org.bluemix.challenge.MyAppWidgetset")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
int clientX = event.getClientX();
layout.addComponent(new Label("Thank you for clicking"));
}
});
layout.addComponent(button);
layout.addComponent(new Label("Foobar"));
Page.getCurrent().getStyles().add(
".leaflet-container {cursor :crosshair !important;}");
final LMap leafletMap = new LMap();
leafletMap.setZoomLevel(1);
leafletMap.setCenter(0, 0);
leafletMap.addLayer(new LOpenStreetMapLayer());
final ContextMenu contextMenu = new ContextMenu();
final ContextMenuItem addMarker = contextMenu.addItem("Try me").addItem(
"Add marker");
final ContextMenu.ContextMenuItem addCircle = contextMenu.
addItem("Add circle");
final ContextMenuItem addPath = contextMenu.
addItem("Add start new path");
final ContextMenuItem startPolygon = contextMenu.addItem(
"Add start new polygon");
contextMenu.setAsContextMenuOf(leafletMap);
contextMenu.setOpenAutomatically(false);
final Point p = new Point();
final ContextMenu.ContextMenuItemClickListener contextMenuItemClickListener = new ContextMenu.ContextMenuItemClickListener() {
@Override
public void contextMenuItemClicked(
ContextMenu.ContextMenuItemClickEvent ctxEvent) {
ContextMenuItem source = (ContextMenuItem) ctxEvent.
getSource();
if (source == addMarker) {
LMarker marker = new LMarker(p);
marker.setPopup("Created by context click on LMap");
leafletMap.addComponent(marker);
} else {
Notification.show(
"Try adding marker, this was just an ad ;-)");
}
}
};
contextMenu.addItemClickListener(contextMenuItemClickListener);
leafletMap.addContextMenuListener(new LeafletContextMenuListener() {
@Override
public void onContextMenu(final LeafletContextMenuEvent event) {
Point point = event.getPoint();
p.setLat(point.getLat());
p.setLon(point.getLon());
contextMenu.open((int) event.getClientX(), (int) event.
getClientY());
}
});
leafletMap.setHeight("300px");
leafletMap.setWidth("300px");
layout.addComponent(leafletMap);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
@chenli868
Copy link

Hi, Thanks for sharing this. Somehow the context menu event is not working on LGoogleLayer with g-leaflet.
But if you add a shape on top of the LGoogleLayer, the context menu event is passing through. Even right click the zoom in/out button gives the event. But not on the google map.
Could you please give us some directions? Cheers

@chenli868
Copy link

Sorry, it is actually v-leaflet-shramov that gives the google map layer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment