This demo shows you different markers, popups, polygons and other stuff
""")
// Set the icon size to unlimited otherwise the div collapses
.withIconSize(new LPoint(this.reg, -1, -1)));
final LMarker markerInfo = new LMarker(
this.reg,
new LLatLng(this.reg, 49.674662, 12.162869),
new LMarkerOptions()
.withIcon(divIconInfo)
.withDraggable(true));
@SuppressWarnings("checkstyle:LineLength")
final LIcon iconXDEV = new LIcon(this.reg, new LIconOptions()
.withIconUrl(INLINED_XDEV_LOGO)
// You can also use the URL directly but note you may have to whitelist the resources accordingly
// Comment this out to see the inline version above
.withIconUrl("assets/XDEV_LOGO.svg")
.withIconSize(new LPoint(this.reg, 125, 25)));
final LLatLng locationXDEV = new LLatLng(this.reg, 49.6756, 12.1610);
final LMarker markerXDEV =
new LMarker(this.reg, locationXDEV, new LMarkerOptions().withIcon(iconXDEV))
.bindPopup("XDEV Software GmbH");
final LPolygon polygonNOC = new LPolygon(
this.reg,
new LLatLng(this.reg, 49.674883, 12.159098),
new LLatLng(this.reg, 49.675719, 12.160248),
new LLatLng(this.reg, 49.676080, 12.159985),
new LLatLng(this.reg, 49.675750, 12.158008),
new LLatLng(this.reg, 49.675306, 12.158499));
polygonNOC.bindPopup("NOC - NordOberpfalz Center")
.bindTooltip("This is a tooltip You can click to open the popup");
final LCircle circleFood = new LCircle(
this.reg,
locationXDEV,
new LCircleOptions()
.withRadius(400d)
.withStroke(true)
.withColor("#000")
.withFill(false));
final LMarker markerPizza = new LMarker(this.reg, new LLatLng(this.reg, 49.674413, 12.160925))
.bindPopup("Pizza");
final LLatLng locationSchnitzel = new LLatLng(this.reg, 49.673800, 12.160113);
final LMarker markerSchnitzel = new LMarker(this.reg, locationSchnitzel)
.bindPopup("Schnitzel");
final LPolyline polylineToSchnitzel = new LPolyline(
this.reg,
locationXDEV,
new LLatLng(this.reg, 49.675631, 12.160430),
new LLatLng(this.reg, 49.673919, 12.160769),
locationSchnitzel)
.bindPopup("Route to Schnitzel");
final LLayerGroup lLayerGroupPlaces = new LLayerGroup(this.reg)
.addLayer(markerXDEV)
.addLayer(polygonNOC)
.addLayer(markerInfo);
final LLayerGroup lLayerGroupFood =
new LLayerGroup(this.reg, markerPizza, markerSchnitzel, circleFood, polylineToSchnitzel);
// Add default layers
this.map
.addLayer(tlOSM)
.addLayer(lLayerGroupPlaces);
this.addControls(tlOSM, tlOSMHOT, tlTopo, tlWMS, lLayerGroupPlaces, lLayerGroupFood, tlWMSUSWeatherData);
this.hlButtons.setWidthFull();
this.add(this.hlButtons);
this.addEventDemo();
this.addLocateDemo();
this.addMapMethodsDemo(center);
this.addImageOverlayDemo();
this.addVideoOverlayDemo();
this.addComplexPolygonDemo();
this.addRetrieveClientSideDataDemo();
this.addOpenDialogOverMapDemo();
}
private void addControls(
final LTileLayer tlOSM,
final LTileLayer tlOSMHOT,
final LTileLayer tlTopo,
final LTileLayerWMS tlWMS,
final LLayerGroup lLayerGroupPlaces,
final LLayerGroup lLayerGroupFood,
final LTileLayerWMS tlWMSUSWeatherData)
{
// Use LinkedHashMap for order
final LinkedHashMap> baseLayers = new LinkedHashMap<>();
baseLayers.put("OSM", tlOSM);
baseLayers.put("OSM HOT", tlOSMHOT);
baseLayers.put("TOPO", tlTopo);
baseLayers.put("WMS", tlWMS);
final LControlLayers lControlLayers = new LControlLayers(
this.reg,
baseLayers,
new LControlLayersOptions().withCollapsed(false))
.addOverlay(lLayerGroupPlaces, "Places")
.addOverlay(lLayerGroupFood, "Food")
.addOverlay(tlWMSUSWeatherData, "US Weather data")
.addTo(this.map);
// Apply manual patch for https://github.com/Leaflet/Leaflet/issues/9009 as this was not released yet
this.map.on(
"resize",
lControlLayers.clientComponentJsAccessor() + "._expandIfNotCollapsed",
lControlLayers.clientComponentJsAccessor());
new LControlScale(this.reg, new LControlScaleOptions()).addTo(this.map);
}
private void addEventDemo()
{
// See also https://vaadin.com/docs/latest/create-ui/element-api/client-server-rpc
this.map.on("click", "e => document.getElementById('" + ID + "').$server.mapClicked(e.latlng)");
}
// This server side method will be called when the map is clicked
@ClientCallable
public void mapClicked(final JsonNode input)
{
if(!(input instanceof final ObjectNode obj))
{
return;
}
LOG.info("Map clicked - lat: {}, lng: {}", obj.get("lat").asDouble(), obj.get("lng").asDouble());
}
private void addLocateDemo()
{
this.map.on(
"locationerror",
"e => alert('Failed to locate: ' "
+ "+ '\\nCode: ' + e.code "
+ "+ '\\nMessage: ' + e.message"
+ ")");
this.map.on(
"locationfound",
"e => alert('Location successful: '"
+ "+ '\\nLocation: ' + e.latlng "
+ "+ '\\nBounds: ' + e.bounds?.getNorthWest() + ' ' + e.bounds?.getSouthEast() "
+ "+ '\\nAccuracy(m): ' + e.accuracy "
+ "+ '\\nAltitude(m): ' + e.altitude "
+ "+ '\\nAltitudeAccuracy(m): ' + e.altitudeAccuracy "
+ "+ '\\nHeading: ' + e.heading"
+ "+ '\\nSpeed: ' + e.speed "
+ ")");
this.hlButtons.add(new Button("Locate", ev -> this.map.locate(new LMapLocateOptions().withSetView(true))));
}
private void addMapMethodsDemo(final LLatLng center)
{
this.hlButtons.add(new Button("Center on Weiden", ev -> this.map.setView(center, 17)));
this.hlButtons.add(new Button("FlyTo to Weiden", ev -> this.map.flyTo(center, 17)));
}
private void addImageOverlayDemo()
{
final LImageOverlay imageOverlay = new LImageOverlay(
this.reg,
// https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg
"newark_nj_1922.jpg", // Workaround: Use locally hosted image because remote enters redirect loop?
new LLatLngBounds(
this.reg,
new LLatLng(this.reg, 40.712216, -74.22655),
new LLatLng(this.reg, 40.773941, -74.12544)
)
);
this.hlButtons.add(this.createToggleButton(
"Show image",
"Hide image",
() -> {
imageOverlay.addTo(this.map);
this.map.setView(new LLatLng(this.reg, 40.74, -74.17), 12);
},
imageOverlay::remove
));
}
private void addVideoOverlayDemo()
{
final LVideoOverlay videoOverlay = new LVideoOverlay(
this.reg,
"https://www.mapbox.com/bites/00188/patricia_nasa.webm",
new LLatLngBounds(
this.reg,
new LLatLng(this.reg, 32, -130),
new LLatLng(this.reg, 13, -100)
),
new LVideoOverlayOptions().withAttribution(
"NASA"));
this.hlButtons.add(this.createToggleButton(
"Show video",
"Hide video",
() -> {
videoOverlay.addTo(this.map);
// Start video 30s in (otherwise no hurricane - boring)
videoOverlay.invokeSelf(".getElement().currentTime=30");
this.map.setView(new LLatLng(this.reg, 20, -115), 5);
// Play otherwise stops after hiding
videoOverlay.invokeSelf(".getElement()?.play()");
},
videoOverlay::remove
));
}
private void addComplexPolygonDemo()
{
// See also 38.871008516069516, -77.0559701487416
final LPolygon pentagon = new LPolygon(
this.reg,
List.of(
List.of(
List.of(
new LLatLng(this.reg, 38.872923, -77.054687),
new LLatLng(this.reg, 38.870639, -77.053252),
new LLatLng(this.reg, 38.868895, -77.055569),
new LLatLng(this.reg, 38.870071, -77.058473),
new LLatLng(this.reg, 38.872570, -77.057877)
),
List.of(
new LLatLng(this.reg, 38.871749, -77.055494),
new LLatLng(this.reg, 38.870866, -77.054932),
new LLatLng(this.reg, 38.870225, -77.055829),
new LLatLng(this.reg, 38.870650, -77.056901),
new LLatLng(this.reg, 38.871607, -77.056723)
)
),
List.of(
new LLatLng(this.reg, 38.871107, -77.055903),
new LLatLng(this.reg, 38.870990, -77.055831),
new LLatLng(this.reg, 38.870899, -77.055950),
new LLatLng(this.reg, 38.870961, -77.056104),
new LLatLng(this.reg, 38.871089, -77.056072)
)
));
final String imageLink =
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Building_and_ship_comparison_to_the_Pentagon2"
+ ".svg/260px-Building_and_ship_comparison_to_the_Pentagon2.svg.png";
pentagon.bindPopup(""
+ "