From 459f95cfff5014ec585024a3ab7d528534d46390 Mon Sep 17 00:00:00 2001 From: Gabor Date: Fri, 5 Jun 2020 14:10:38 +0200 Subject: [PATCH] new examples, minor bug fixes --- frontend/styles/demo-menu.css | 12 +- .../addon/leaflet4vaadin/LeafletMap.java | 4 +- .../resources/frontend/leaflet-map.js | 153 ++++++++---- .../frontend/leaflet-type-converter.js | 224 ++++++++++-------- .../leaflet4vaadin/demo/LeafletDemoApp.java | 18 +- .../demo/components/AppMenuItem.java | 2 +- .../demo/view/map/MapDialogExample.java | 45 ++++ .../demo/view/map/MapFunctionsExample.java | 42 ++-- .../demo/view/map/MultipleMapsExample.java | 56 +++++ 9 files changed, 381 insertions(+), 175 deletions(-) create mode 100644 src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapDialogExample.java create mode 100644 src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MultipleMapsExample.java diff --git a/frontend/styles/demo-menu.css b/frontend/styles/demo-menu.css index 314971e..9ab51d8 100644 --- a/frontend/styles/demo-menu.css +++ b/frontend/styles/demo-menu.css @@ -2,14 +2,22 @@ background: #e5f1fd; } -.app-menu-item-summary { - padding: 5px 0px; +.app-menu-item-panel:hover { + cursor: pointer; } .app-menu-item-summary { padding: 5px 0px; + font-weight: 300; } +.app-menu-item-summary label { + line-height: 24px; +} + +.app-menu-item-summary iron-icon { + width: 20px; +} .app-menu-item-summary.has-new-feature { color: var(--lumo-success-text-color); diff --git a/src/main/java/com/vaadin/addon/leaflet4vaadin/LeafletMap.java b/src/main/java/com/vaadin/addon/leaflet4vaadin/LeafletMap.java index 33a1df9..1dc3801 100644 --- a/src/main/java/com/vaadin/addon/leaflet4vaadin/LeafletMap.java +++ b/src/main/java/com/vaadin/addon/leaflet4vaadin/LeafletMap.java @@ -556,13 +556,13 @@ public String getUuid() { @Override public void removeEventListener(LeafletEventType eventType) { this.mapLayer.removeEventListener(eventType); - this.getModel().getEvents().remove(eventType); + executeJs("removeEventListener", eventType.getLeafletEvent()); } @Override public void clearAllEventListeners() { this.mapLayer.clearAllEventListeners(); - this.getModel().getEvents().clear(); + executeJs("clearAllEventListeners"); } @Override diff --git a/src/main/resources/META-INF/resources/frontend/leaflet-map.js b/src/main/resources/META-INF/resources/frontend/leaflet-map.js index ad70f49..bdc096b 100644 --- a/src/main/resources/META-INF/resources/frontend/leaflet-map.js +++ b/src/main/resources/META-INF/resources/frontend/leaflet-map.js @@ -1,3 +1,20 @@ +/* + * Copyright (c) 2020 Gabor Kokeny + * All rights reserved. + + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + // Copyright 2020 Gabor Kokeny and contributors // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -13,14 +30,17 @@ // limitations under the License. import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; -import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"; import * as L from "leaflet/dist/leaflet-src.js"; import { LeafletTypeConverter } from "./leaflet-type-converter.js"; class LeafletMap extends ThemableMixin(PolymerElement) { static get template() { return html` -
+
`; } @@ -72,7 +92,10 @@ class LeafletMap extends ThemableMixin(PolymerElement) { */ afterServerUpdate() { console.log("LeafletMap - afterServerUpdate() !!!!!!"); - console.log("LeafletMap - afterServerUpdate() mapOptions: {}", this.mapOptions); + console.log( + "LeafletMap - afterServerUpdate() mapOptions: {}", + this.mapOptions + ); if (!this.mapInitialized) { this.map.whenReady(() => { console.log("LeafletMap - whenReady()"); @@ -80,75 +103,108 @@ class LeafletMap extends ThemableMixin(PolymerElement) { this.onMapReadyEventHandler(); }); } else { - console.log("LeafletMap - afterServerUpdate() Leaflet Map already initialized"); + console.log( + "LeafletMap - afterServerUpdate() Leaflet Map already initialized" + ); } } - callLeafletFunction(operation) { console.info("LeafletMap - callLeafletFunction()", operation); let target = this._findTargetLayer(operation); - + let leafletArgs = JSON.parse(operation.arguments); - leafletArgs = leafletArgs.map(arg => this.leafletConverter.convert(arg, this)); + leafletArgs = leafletArgs.map((arg) => + this.leafletConverter.convert(arg, this) + ); //console.log("LeafletMap - callLeafletFunction() - leafletArgs", leafletArgs); - + let leafletFn = target[operation.functionName]; //console.log("LeafletMap - callLeafletFunction() - leafletFn", leafletFn); - + let result = leafletFn.apply(target, leafletArgs); console.log("LeafletMap - callLeafletFunction() - result", result); return result; } - + _findTargetLayer(operation) { - let target; - if(this.map.options.uuid === operation.layerId){ - target = this.map; + let target; + if (this.map.options.uuid === operation.layerId) { + target = this.map; } else { - if(operation.controlOperation) { - target = this.getControl(operation.layerId); - } - else { - target = this.getLayer(operation.layerId); - } + if (operation.controlOperation) { + target = this.getControl(operation.layerId); + } else { + target = this.getLayer(operation.layerId); + } } + + if (target == null) { + target = this._findChildLayer(this.map, operation.layerId); + } + return target; } - + + _findChildLayer(head, layerId) { + if (head.options.uuid === layerId) { + return head; + } + if (head.eachLayer) { + let found; + head.eachLayer((child) => { + if (!found) { + found = this._findChildLayer(child, layerId); + } else { + return found; + } + }); + if (found) { + return found; + } + } + } + hasLayer(layerId) { - return this.map._layers && this.getLayer(layerId); + return this.map._layers && this.getLayer(layerId); } - + getLayer(layerId) { - return this.map._layers[layerId]; + return this.map._layers[layerId]; } getControl(controlId) { - return this.map._controls[controlId]; + return this.map._controls[controlId]; } - + toLeafletMap(options) { console.log("LeafletMap - initialize map with options: {}", options); let mapElement = this.shadowRoot.getElementById("map"); console.log("LeafletMap - using DOM element: {}", mapElement); let leafletMap = L.map(mapElement, options); leafletMap._controls = []; - this.events.slice().forEach(event => this.registerEventListener(leafletMap, event.leafletEvent)); + this.events + .slice() + .forEach((event) => + this.registerEventListener(leafletMap, event.leafletEvent) + ); console.log("LeafletMap - map has been created with options", options); return leafletMap; } registerEventListener(layer, event) { - let found = this.getEventMap().find(e => e.events.indexOf(event) >= 0); + let found = this.getEventMap().find((e) => e.events.indexOf(event) >= 0); let eventListener = this.onBaseEventHandler; if (found) { if (!found.condition || found.condition.call(this, layer)) { eventListener = found.handler; } } - console.info("LeafletMap - registerEventListener() register listener for event", { event: event }); + console.info( + "LeafletMap - registerEventListener() register listener for event", + { event: event } + ); layer.on(event, eventListener, this); } @@ -156,54 +212,64 @@ class LeafletMap extends ThemableMixin(PolymerElement) { if (!this.eventMap) { this.eventMap = [ { - events: ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "mousemove", "contextmenu", "preclick"], - handler: this.onMouseEventEventHandler + events: [ + "click", + "dblclick", + "mousedown", + "mouseup", + "mouseover", + "mouseout", + "mousemove", + "contextmenu", + "preclick", + ], + handler: this.onMouseEventEventHandler, }, { events: ["keypress", "keydown", "keyup"], - handler: this.onKeyboardEventHandler + handler: this.onKeyboardEventHandler, }, { events: ["resize"], - handler: this.onResizeEventHandler + handler: this.onResizeEventHandler, }, { events: ["zoomanim"], - handler: this.onZoomAnimEventHandler + handler: this.onZoomAnimEventHandler, }, { events: ["dragend"], - handler: this.onDragEndEventHandler + handler: this.onDragEndEventHandler, }, { events: ["layeradd", "layerremove"], - handler: this.onLayerEventHandler + handler: this.onLayerEventHandler, }, { events: ["baselayerchange", "overlayadd", "overlayremove"], - handler: this.onLayersControlEventHandler + handler: this.onLayersControlEventHandler, }, { events: ["move"], - condition: layer => layer.options.leafletType === "Marker", - handler: this.onMoveEventHandler + condition: (layer) => layer.options.leafletType === "Marker", + handler: this.onMoveEventHandler, }, { events: ["popupclose", "popupopen"], - handler: this.onPopupEventHandler + handler: this.onPopupEventHandler, }, { events: ["tooltipclose", "tooltipopen"], - handler: this.onTooltipEventHandler + handler: this.onTooltipEventHandler, }, { events: ["locationfound"], - handler: this.onLocationEventHandler + handler: this.onLocationEventHandler, }, { events: ["locationerror"], - handler: this.onErrorEventHandler - } + handler: this.onErrorEventHandler, + }, ]; } return this.eventMap; @@ -248,7 +314,6 @@ class LeafletMap extends ThemableMixin(PolymerElement) { onBaseEventHandler(event) { console.info("LeafletMap - onBaseEventHandler()", event); } - } customElements.define(LeafletMap.is, LeafletMap); diff --git a/src/main/resources/META-INF/resources/frontend/leaflet-type-converter.js b/src/main/resources/META-INF/resources/frontend/leaflet-type-converter.js index 5bd234a..acfb432 100644 --- a/src/main/resources/META-INF/resources/frontend/leaflet-type-converter.js +++ b/src/main/resources/META-INF/resources/frontend/leaflet-type-converter.js @@ -1,3 +1,20 @@ +/* + * Copyright (c) 2020 Gabor Kokeny + * All rights reserved. + + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + // Copyright 2020 Gabor Kokeny and contributors // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -15,23 +32,31 @@ import * as L from "leaflet/dist/leaflet-src.js"; export class LeafletTypeConverter { - - constructor(){ - this.basicTypes = ["Point", "Bounds", "LatLng", "LatLngBounds", "Icon", "DivIcon"]; - } - + constructor() { + this.basicTypes = [ + "Point", + "Bounds", + "LatLng", + "LatLngBounds", + "Icon", + "DivIcon", + ]; + } + toLeafletLayer(layer, map) { //console.log("LeafletTypeConverter - toLeafletLayer() leafletType", {leafletType: layer.leafletType}); let leafletLayer; - - if(map.hasLayer(layer.uuid)){ - return map.getLayer(layer.uuid); + + if (map.hasLayer(layer.uuid)) { + return map.getLayer(layer.uuid); } - - if(layer.icon){ + + if (layer.icon) { layer.icon = this.convert(layer.icon); - } else if(layer.layers){ - layer.layers = layer.layers.slice().map(childLayer => this.toLeafletLayer(childLayer, map)); + } else if (layer.layers) { + layer.layers = layer.layers + .slice() + .map((childLayer) => this.toLeafletLayer(childLayer, map)); } if (layer.leafletType === "GeoJSON") { @@ -39,9 +64,11 @@ export class LeafletTypeConverter { leafletLayer._layers = layer.layers; } else { let factoryFn = this.getLayerFactoryFn(layer.leafletType); - if(layer.constructorArgumentNames){ + if (layer.constructorArgumentNames) { //console.log("LeafletTypeConverter - toLeafletLayer() constructorArgumentNames", layer.constructorArgumentNames); - let initArgs = layer.constructorArgumentNames.map(argName => this.convert(layer[argName], map)); + let initArgs = layer.constructorArgumentNames.map((argName) => + this.convert(layer[argName], map) + ); initArgs.push(layer); //console.log("LeafletTypeConverter - toLeafletLayer() initArgs", initArgs); leafletLayer = factoryFn.apply(null, initArgs); @@ -51,115 +78,116 @@ export class LeafletTypeConverter { } this._applyOptions(leafletLayer, layer); - + //apply layer event listeners if (layer.events) { - layer.events.forEach(event => map.registerEventListener(leafletLayer, event)); + layer.events.forEach((event) => + map.registerEventListener(leafletLayer, event) + ); } console.log("LeafletTypeConverter - toLeafletLayer() result", leafletLayer); return leafletLayer; } - getLayerFactoryFn(leafletType){ - return L[leafletType.charAt(0).toLowerCase() + leafletType.slice(1)]; + getLayerFactoryFn(leafletType) { + return L[leafletType.charAt(0).toLowerCase() + leafletType.slice(1)]; } - - getControlFactoryFn(leafletType){ - return L.control[leafletType]; + + getControlFactoryFn(leafletType) { + return L.control[leafletType]; } toLeafletControl(control, mapTemplate) { - let leafletControl = control; - if(control){ - let controlFn = this.getControlFactoryFn(control.leafletType); - if (!controlFn) { - throw "Unsupported control type : " + control.leafletType; - } - if(control.constructorArgumentNames){ - //console.log("LeafletTypeConverter - toLeafletControl() constructorArgumentNames", control.constructorArgumentNames); - let initArgs = control.constructorArgumentNames.map(argName => this.convert(control[argName], mapTemplate)); - initArgs.push(control); - //console.log("LeafletTypeConverter - toLeafletControl() initArgs", initArgs); - leafletControl = controlFn.apply(null, initArgs); - } - else { - leafletControl = controlFn(control); - } - mapTemplate.map._controls[control.uuid] = leafletControl; - console.log("LeafletTypeConverter - toLeafletControl() result", leafletControl); - } + let leafletControl = control; + if (control) { + let controlFn = this.getControlFactoryFn(control.leafletType); + if (!controlFn) { + throw "Unsupported control type : " + control.leafletType; + } + if (control.constructorArgumentNames) { + //console.log("LeafletTypeConverter - toLeafletControl() constructorArgumentNames", control.constructorArgumentNames); + let initArgs = control.constructorArgumentNames.map((argName) => + this.convert(control[argName], mapTemplate) + ); + initArgs.push(control); + //console.log("LeafletTypeConverter - toLeafletControl() initArgs", initArgs); + leafletControl = controlFn.apply(null, initArgs); + } else { + leafletControl = controlFn(control); + } + mapTemplate.map._controls[control.uuid] = leafletControl; + console.log( + "LeafletTypeConverter - toLeafletControl() result", + leafletControl + ); + } return leafletControl; } convert(object, map) { let converted = object; - if(this.isLeafletType(object)){ - if (this.isBasicType(object.leafletType)) { - converted = this.convertBasicType(object); - } - else if(this.isLeafletLayer(object.leafletType)){ - converted = this.toLeafletLayer(object, map); - } - else if(this.isLeafletControl(object.leafletType)){ - converted = this.toLeafletControl(object, map); - } - //Override the internal leaflet id - if(object.uuid) { - converted._leaflet_id = object.uuid; - } - } - else if(object instanceof Object){ - Object.keys(object).forEach((key, index) => { - if(this.isLeafletType(object[key])) { - converted[key] = this.convert(object[key], map); - } - }); + if (this.isLeafletType(object)) { + if (this.isBasicType(object.leafletType)) { + converted = this.convertBasicType(object); + } else if (this.isLeafletLayer(object.leafletType)) { + converted = this.toLeafletLayer(object, map); + } else if (this.isLeafletControl(object.leafletType)) { + converted = this.toLeafletControl(object, map); + } + //Override the internal leaflet id + if (object.uuid) { + converted._leaflet_id = object.uuid; + } + } else if (object instanceof Object) { + Object.keys(object).forEach((key, index) => { + if (this.isLeafletType(object[key])) { + converted[key] = this.convert(object[key], map); + } + }); } - + //console.log("LeafletTypeConverter - convert() result", converted); return converted; } - convertBasicType(basicType) { let converted = basicType; - if (basicType.leafletType === "Point") { - converted = this.toPoint(basicType); - } else if (basicType.leafletType === "Bounds") { - converted = this.toBounds(basicType); - } else if (basicType.leafletType === "LatLng") { - converted = this.toLatLng(basicType); - } else if (basicType.leafletType === "LatLngBounds") { - converted = this.toLatLngBounds(basicType); - } else if (basicType.leafletType === "Icon") { - converted = this.toIcon(basicType); - } else if (basicType.leafletType === "DivIcon") { - converted = this.toDivIcon(basicType); - } - //console.log("LeafletTypeConverter - convertBasicType() result", converted); + if (basicType.leafletType === "Point") { + converted = this.toPoint(basicType); + } else if (basicType.leafletType === "Bounds") { + converted = this.toBounds(basicType); + } else if (basicType.leafletType === "LatLng") { + converted = this.toLatLng(basicType); + } else if (basicType.leafletType === "LatLngBounds") { + converted = this.toLatLngBounds(basicType); + } else if (basicType.leafletType === "Icon") { + converted = this.toIcon(basicType); + } else if (basicType.leafletType === "DivIcon") { + converted = this.toDivIcon(basicType); + } + //console.log("LeafletTypeConverter - convertBasicType() result", converted); return converted; } - isLeafletType(object) { - return object && typeof(object.leafletType) !== "undefined"; + return object && typeof object.leafletType !== "undefined"; } - + isBasicType(object) { - return this.basicTypes.indexOf(object) >= 0; + return this.basicTypes.indexOf(object) >= 0; } - + isLeafletControl(object) { - return this.getControlFactoryFn(object) != null; + return this.getControlFactoryFn(object) != null; } - + isLeafletLayer(object) { - return this.getLayerFactoryFn(object) != null; + return this.getLayerFactoryFn(object) != null; } /** - * Convert the given JsonObject to Leaflet Icon - */ + * Convert the given JsonObject to Leaflet Icon + */ toIcon(iconOptions) { let icon = L.icon(iconOptions); icon.popupAnchor = this.convert(iconOptions.popupAnchor); @@ -170,31 +198,31 @@ export class LeafletTypeConverter { icon.shadowSize = this.convert(iconOptions.shadowSize); return icon; } - + /** * Convert the given JsonObject to Leaflet DivIcon */ toDivIcon(divIcon) { - return L.divIcon(divIcon); + return L.divIcon(divIcon); } /** - * Convert the given JsonObject to Leaflet Point - */ + * Convert the given JsonObject to Leaflet Point + */ toPoint(point) { return point ? L.point(point.x, point.y) : point; } /** - * Convert the given JsonObject to Leaflet LatLng - */ + * Convert the given JsonObject to Leaflet LatLng + */ toLatLng(latLng) { return latLng ? L.latLng(latLng.lat, latLng.lng, latLng.altitude) : latLng; } /** - * Convert the given JsonObject to Leaflet Bounds - */ + * Convert the given JsonObject to Leaflet Bounds + */ toBounds(bounds) { let corner1 = L.point(bounds.topLeft.x, bounds.topLeft.y); let corner2 = L.point(bounds.bottomRight.x, bounds.bottomRight.y); @@ -202,14 +230,14 @@ export class LeafletTypeConverter { } /** - * Convert the given JsonObject to Leaflet LatLngBounds - */ + * Convert the given JsonObject to Leaflet LatLngBounds + */ toLatLngBounds(bounds) { let corner1 = L.latLng(bounds._northEast); let corner2 = L.latLng(bounds._southWest); return L.latLngBounds(corner1, corner2); } - + _applyOptions(layer, options) { if (options.tooltip) { let leafletTooltip = L.tooltip(options.tooltip).setContent( diff --git a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/LeafletDemoApp.java b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/LeafletDemoApp.java index 9b2e57e..5c3e291 100644 --- a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/LeafletDemoApp.java +++ b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/LeafletDemoApp.java @@ -14,7 +14,7 @@ package com.vaadin.addon.leaflet4vaadin.demo; -import static com.vaadin.addon.leaflet4vaadin.demo.components.AppMenuItem.NEW_FEATURE; +import static com.vaadin.addon.leaflet4vaadin.demo.components.AppMenuItem.NEW; import com.vaadin.addon.leaflet4vaadin.demo.components.AppMenu; import com.vaadin.addon.leaflet4vaadin.demo.components.AppMenuItem; @@ -29,11 +29,13 @@ import com.vaadin.addon.leaflet4vaadin.demo.view.layers.MultipleBaseLayersExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapConversionMethodsExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapDarkThemeExample; +import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapDialogExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapEventsExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapFunctionsExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapGeolocationExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapMaxBoundsExample; import com.vaadin.addon.leaflet4vaadin.demo.view.map.MapPollListenerExample; +import com.vaadin.addon.leaflet4vaadin.demo.view.map.MultipleMapsExample; import com.vaadin.addon.leaflet4vaadin.demo.view.marker.MarkerDivIconExample; import com.vaadin.addon.leaflet4vaadin.demo.view.marker.MarkerMethodCallExample; import com.vaadin.addon.leaflet4vaadin.demo.view.marker.MarkersAddAndRemoveExample; @@ -145,7 +147,9 @@ private void initializeDemoMenu() { AppMenuItem.create("Map", new Icon(VaadinIcon.GLOBE)).addSubMenu(MapEventsExample.class) .addSubMenu(MapMaxBoundsExample.class).addSubMenu(MapDarkThemeExample.class) .addSubMenu(MapPollListenerExample.class).addSubMenu(MapGeolocationExample.class) - .addSubMenu(MapFunctionsExample.class).addSubMenu(MapConversionMethodsExample.class).addTo(appMenu); + .addSubMenu(MapFunctionsExample.class).addSubMenu(MapConversionMethodsExample.class) + .addSubMenu(MapDialogExample.class, NEW) + .addSubMenu(MultipleMapsExample.class, NEW).addTo(appMenu); // Marker examples AppMenuItem.create("Markers", new Icon(VaadinIcon.MAP_MARKER)).addSubMenu(MarkersSimpleExample.class) @@ -153,7 +157,7 @@ private void initializeDemoMenu() { .addSubMenu(MarkersGroupExample.class).addSubMenu(MarkersAddAndRemoveExample.class) .addSubMenu(MarkersChangingIconExample.class).addSubMenu(MarkersRemoveOnClickExample.class) .addSubMenu(MarkerMethodCallExample.class) - .addSubMenu(MarkerDivIconExample.class, NEW_FEATURE) + .addSubMenu(MarkerDivIconExample.class, NEW) .addTo(appMenu); // Layers examples @@ -170,16 +174,16 @@ private void initializeDemoMenu() { // Controls examples AppMenuItem.create("Controls", new Icon(VaadinIcon.ARROWS)).addSubMenu(RemoveDefaultControlsExample.class) - .addSubMenu(LayersControlExample.class, NEW_FEATURE) + .addSubMenu(LayersControlExample.class, NEW) .addSubMenu(ControlPositionExample.class).addSubMenu(ScaleControlExample.class).addTo(appMenu); // Mixins examples AppMenuItem.create("Mixin", new Icon(VaadinIcon.SHIELD)).addSubMenu(WorldMapFlagsExample.class).addTo(appMenu); // Plugins examples - AppMenuItem.create("Plugins", new Icon(VaadinIcon.PLUG)).addSubMenu(FullScreenPluginExample.class, NEW_FEATURE) - .addSubMenu(HeatmapPluginExample.class, NEW_FEATURE) - .addSubMenu(MarkerClusterPluginExample.class, NEW_FEATURE) + AppMenuItem.create("Plugins", new Icon(VaadinIcon.PLUG)).addSubMenu(FullScreenPluginExample.class, NEW) + .addSubMenu(HeatmapPluginExample.class, NEW) + .addSubMenu(MarkerClusterPluginExample.class, NEW) .addTo(appMenu); addToDrawer(appMenu); diff --git a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/components/AppMenuItem.java b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/components/AppMenuItem.java index 740fd07..3df7e25 100644 --- a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/components/AppMenuItem.java +++ b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/components/AppMenuItem.java @@ -31,7 +31,7 @@ public class AppMenuItem extends VerticalLayout { private static final long serialVersionUID = 6428270908323350266L; - public static final boolean NEW_FEATURE = true; + public static final boolean NEW = true; private final String title; private final Icon icon; private Icon badge; diff --git a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapDialogExample.java b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapDialogExample.java new file mode 100644 index 0000000..1dfd4cf --- /dev/null +++ b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapDialogExample.java @@ -0,0 +1,45 @@ +package com.vaadin.addon.leaflet4vaadin.demo.view.map; + +import static com.vaadin.addon.leaflet4vaadin.types.LatLng.latlng; + +import com.vaadin.addon.leaflet4vaadin.LeafletMap; +import com.vaadin.addon.leaflet4vaadin.demo.LeafletDemoApp; +import com.vaadin.addon.leaflet4vaadin.demo.components.ExampleContainer; +import com.vaadin.addon.leaflet4vaadin.layer.map.options.DefaultMapOptions; +import com.vaadin.addon.leaflet4vaadin.layer.map.options.MapOptions; +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; +import com.vaadin.flow.component.dialog.Dialog; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@PageTitle("Map in dialog") +@Route(value = "map/dialog", layout = LeafletDemoApp.class) +public class MapDialogExample extends ExampleContainer { + + @Override + protected void initDemo() { + Button openDialog = new Button("Open dialog"); + openDialog.addThemeVariants(ButtonVariant.LUMO_PRIMARY); + openDialog.addClickListener((event) -> { + Dialog dialog = new Dialog(); + dialog.setWidth("600px"); + dialog.setHeight("400px"); + + //Initialize map + + MapOptions options = new DefaultMapOptions(); + options.setCenter(latlng(47.070121823, 19.2041015625)); + options.setZoom(7); + options.setPreferCanvas(true); + + LeafletMap leafletMap = new LeafletMap(options); + leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"); + dialog.add(leafletMap); + + dialog.open(); + }); + addToContent(openDialog); + } + +} diff --git a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapFunctionsExample.java b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapFunctionsExample.java index 975d4ed..9a0dd34 100644 --- a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapFunctionsExample.java +++ b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MapFunctionsExample.java @@ -29,26 +29,26 @@ @Route(value = "map/functions", layout = LeafletDemoApp.class) public class MapFunctionsExample extends ExampleContainer { - @Override - protected void initDemo() { - - Label eventLabel = new Label("Click on map to fly to a coordinate or right-click to fit World"); - eventLabel.getStyle().set("font-weight", "bold"); - - final MapOptions options = new DefaultMapOptions(); - options.setCenter(new LatLng(47.070121823, 19.204101562500004)); - options.setZoom(7); - final LeafletMap leafletMap = new LeafletMap(options); - leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"); - - leafletMap.onClick((event) -> { - leafletMap.flyTo(event.getLatLng(), options.getZoom(), new ZoomOptions()); - }); - leafletMap.onContextMenuOpened((event) -> { - leafletMap.fitWorld(); - }); - - addToContent(eventLabel, leafletMap); - } + @Override + protected void initDemo() { + + Label eventLabel = new Label("Click on map to fly to a coordinate or right-click to fit World"); + eventLabel.getStyle().set("font-weight", "bold"); + + final MapOptions options = new DefaultMapOptions(); + options.setCenter(new LatLng(47.070121823, 19.204101562500004)); + options.setZoom(7); + final LeafletMap leafletMap = new LeafletMap(options); + leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"); + + leafletMap.onClick((event) -> { + leafletMap.flyTo(event.getLatLng(), options.getZoom(), new ZoomOptions()); + }); + leafletMap.onContextMenuOpened((event) -> { + leafletMap.fitWorld(); + }); + + addToContent(eventLabel, leafletMap); + } } diff --git a/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MultipleMapsExample.java b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MultipleMapsExample.java new file mode 100644 index 0000000..94154fa --- /dev/null +++ b/src/test/java/com/vaadin/addon/leaflet4vaadin/demo/view/map/MultipleMapsExample.java @@ -0,0 +1,56 @@ +package com.vaadin.addon.leaflet4vaadin.demo.view.map; + +import static com.vaadin.addon.leaflet4vaadin.types.LatLng.latlng; +import static java.util.stream.IntStream.range; + +import com.vaadin.addon.leaflet4vaadin.LeafletMap; +import com.vaadin.addon.leaflet4vaadin.demo.LeafletDemoApp; +import com.vaadin.addon.leaflet4vaadin.demo.components.ExampleContainer; +import com.vaadin.addon.leaflet4vaadin.layer.groups.LayerGroup; +import com.vaadin.addon.leaflet4vaadin.layer.map.options.DefaultMapOptions; +import com.vaadin.addon.leaflet4vaadin.layer.map.options.MapOptions; +import com.vaadin.addon.leaflet4vaadin.layer.ui.marker.Marker; +import com.vaadin.addon.leaflet4vaadin.types.Icon; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@PageTitle("Multiple maps") +@Route(value = "map/multiple", layout = LeafletDemoApp.class) +public class MultipleMapsExample extends ExampleContainer { + + private static Icon CUSTOM_ICON = new Icon("images/marker-icon-demo.png", 41); + + @Override + protected void initDemo() { + MapOptions options = new DefaultMapOptions(); + options.setCenter(latlng(47.070121823, 19.2041015625)); + options.setZoom(7); + options.setPreferCanvas(true); + + LeafletMap leafletMapLeft = new LeafletMap(options); + leafletMapLeft.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"); + leafletMapLeft.addLayer(createRandomMarkers(Icon.DEFAULT_ICON, 30)); + + LeafletMap leafletMapRight = new LeafletMap(options); + leafletMapRight.setBaseUrl("https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"); + leafletMapRight.addLayer(createRandomMarkers(CUSTOM_ICON, 30)); + + HorizontalLayout horizontalLayout = new HorizontalLayout(); + horizontalLayout.setSizeFull(); + horizontalLayout.add(leafletMapLeft, leafletMapRight); + addToContent(horizontalLayout); + } + + private LayerGroup createRandomMarkers(Icon icon, int limit) { + LayerGroup layerGroup = new LayerGroup(); + range(0, limit).forEach((i) -> { + double lat = (Math.random() * 4) + 45; + double lon = (Math.random() * 7) + 16; + Marker marker = new Marker(latlng(lat, lon)); + marker.setIcon(icon); + marker.addTo(layerGroup); + }); + return layerGroup; + } +}