diff --git a/pom.xml b/pom.xml index 17a5be0..6b03e95 100644 --- a/pom.xml +++ b/pom.xml @@ -4,7 +4,7 @@ org.vaadin.addons.componentfactory vcf-leaflet - 2.0.0 + 2.0.1 Leaflet Integration of Leaflet Map for Vaadin Flow diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/canvasiconlayer/CanvasIconLayer.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/canvasiconlayer/CanvasIconLayer.java index dd5374c..9e8b0ad 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/canvasiconlayer/CanvasIconLayer.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/canvasiconlayer/CanvasIconLayer.java @@ -42,7 +42,8 @@ * @since 2020-07-16 * @version 1.0 */ -@NpmPackage(value = "leaflet-markers-canvas-exact", version = "1.2.1") +@NpmPackage(value = "leaflet-canvas-marker", version = "0.2.1") +@JsModule("leaflet-canvas-marker/src/_full.js") public class CanvasIconLayer extends Layer { private List markers = new ArrayList<>(); diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/EsriLeafletLayer.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/EsriLeafletLayer.java index 4d328c1..bb93156 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/EsriLeafletLayer.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/EsriLeafletLayer.java @@ -25,6 +25,7 @@ @NpmPackage(value = "esri-leaflet", version = "3.0.12") @NpmPackage(value = "maplibre-gl", version = "3.6.2") +@JsModule("esri-leaflet/dist/esri-leaflet.js") public abstract class EsriLeafletLayer extends Layer { } diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/VectorBasemapLayer.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/VectorBasemapLayer.java index f13173d..5fa9438 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/VectorBasemapLayer.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/esri/VectorBasemapLayer.java @@ -28,6 +28,8 @@ @RequiredArgsConstructor @Getter @NpmPackage(value = "esri-leaflet-vector", version = "4.2.3") +@JsModule("esri-leaflet-vector/dist/esri-leaflet-vector.js") +@JsModule("./esri-vector-basemap-layer.js") public class VectorBasemapLayer extends EsriLeafletLayer { private static final long serialVersionUID = 1L; diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/fullscreen/FullScreenControl.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/fullscreen/FullScreenControl.java index dacc410..5971c58 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/fullscreen/FullScreenControl.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/fullscreen/FullScreenControl.java @@ -70,6 +70,7 @@ * @see LeafletControl */ @NpmPackage(value = "leaflet.fullscreen", version = "3.0.0") +@JsModule("leaflet.fullscreen/Control.FullScreen.js") @CssImport(value = "leaflet.fullscreen/Control.FullScreen.css", themeFor = "leaflet-map") public class FullScreenControl extends LeafletControl { diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/heatmap/HeatLayer.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/heatmap/HeatLayer.java index cb04115..1987569 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/heatmap/HeatLayer.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/heatmap/HeatLayer.java @@ -59,6 +59,7 @@ * @see HeatLayerOptions */ @NpmPackage(value = "leaflet.heat", version = "0.2.0") +@JsModule("leaflet.heat/dist/leaflet-heat.js") public class HeatLayer extends Layer { private static final long serialVersionUID = 8264047409630317556L; diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/kmz/KmzLayer.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/kmz/KmzLayer.java index 5f06ee8..3eeee02 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/kmz/KmzLayer.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/kmz/KmzLayer.java @@ -22,6 +22,7 @@ * @version 1.0 */ @NpmPackage(value = "leaflet-kmz", version = "1.0.9") +@JsModule("leaflet-kmz/dist/leaflet-kmz-src.js") public class KmzLayer extends Layer { private static final long serialVersionUID = 6515861726518730409L; diff --git a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/markercluster/MarkerClusterGroup.java b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/markercluster/MarkerClusterGroup.java index 72e6159..c752c09 100644 --- a/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/markercluster/MarkerClusterGroup.java +++ b/src/main/java/org/vaadin/addons/componentfactory/leaflet/plugins/markercluster/MarkerClusterGroup.java @@ -29,6 +29,7 @@ * @version 1.0 */ @NpmPackage(value = "leaflet.markercluster", version = "1.5.3") +@JsModule("leaflet.markercluster/dist/leaflet.markercluster-src.js") @CssImport(value = "leaflet.markercluster/dist/MarkerCluster.css", themeFor = "leaflet-map") @CssImport(value = "leaflet.markercluster/dist/MarkerCluster.Default.css", themeFor = "leaflet-map") public class MarkerClusterGroup extends FeatureGroup { 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 b04dff6..86b8f34 100644 --- a/src/main/resources/META-INF/resources/frontend/leaflet-map.js +++ b/src/main/resources/META-INF/resources/frontend/leaflet-map.js @@ -27,16 +27,6 @@ import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"; import * as L from "leaflet/dist/leaflet-src.js"; -import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'; -import 'esri-leaflet/dist/esri-leaflet.js'; -import './esri-dynamic-map.js'; -import './esri-tiled-map-layer.js'; -import 'esri-leaflet-vector/dist/esri-leaflet-vector.js'; -import './esri-vector-basemap-layer.js'; -import 'leaflet.fullscreen/Control.FullScreen.js'; -import 'leaflet.heat/dist/leaflet-heat.js'; -import 'leaflet-kmz/dist/leaflet-kmz-src.js'; - import { LeafletTypeConverter } from "./leaflet-type-converter.js"; class LeafletMap extends ThemableMixin(PolymerElement) { @@ -61,7 +51,7 @@ class LeafletMap extends ThemableMixin(PolymerElement) { */ connectedCallback() { super.connectedCallback(); - console.log("LeafletMap - connectedCallback()"); + // console.log("LeafletMap - connectedCallback()"); } /** @@ -71,7 +61,7 @@ class LeafletMap extends ThemableMixin(PolymerElement) { */ disconnectedCallback() { super.disconnectedCallback(); - console.log("LeafletMap - disconnectedCallback()"); + // console.log("LeafletMap - disconnectedCallback()"); } /** @@ -82,10 +72,10 @@ class LeafletMap extends ThemableMixin(PolymerElement) { ready() { super.ready(); console.info("LeafletMap - ready() leaflet map is ready."); - console.log("LeafletMap - ready() mapOptions: {}", this.mapOptions); + // console.log("LeafletMap - ready() mapOptions: {}", this.mapOptions); - this.leafletConverter = new LeafletTypeConverter(); - console.log("LeafletMap - ready() using converter", this.leafletConverter); + this.leafletConverter = new LeafletTypeConverter(L); + // console.log("LeafletMap - ready() using converter", this.leafletConverter); // init leaflet map let map = this.toLeafletMap(JSON.parse(this.mapOptions)); @@ -96,7 +86,7 @@ class LeafletMap extends ThemableMixin(PolymerElement) { * Called each time after the component is updated from the server side. */ afterServerUpdate() { - console.log("LeafletMap - afterServerUpdate() !!!!!!"); + // console.log("LeafletMap - afterServerUpdate() !!!!!!"); console.log( "LeafletMap - afterServerUpdate() mapOptions: {}", this.mapOptions @@ -115,7 +105,7 @@ class LeafletMap extends ThemableMixin(PolymerElement) { } callLeafletFunction(operation) { - console.info("LeafletMap - callLeafletFunction()", operation); + // console.info("LeafletMap - callLeafletFunction()", operation); let target = this._findTargetLayer(operation); @@ -123,14 +113,14 @@ class LeafletMap extends ThemableMixin(PolymerElement) { leafletArgs = leafletArgs.map((arg) => this.leafletConverter.convert(arg, this) ); - console.log("LeafletMap - callLeafletFunction() - leafletArgs", leafletArgs); + // console.log("LeafletMap - callLeafletFunction() - leafletArgs", leafletArgs); let leafletFn = target[operation.functionName]; - console.log("LeafletMap - callLeafletFunction() - leafletFn", leafletFn); + // console.log("LeafletMap - callLeafletFunction() - leafletFn", leafletFn); if(leafletFn){ let result = leafletFn.apply(target, leafletArgs); - console.log("LeafletMap - callLeafletFunction() - result", result); + // console.log("LeafletMap - callLeafletFunction() - result", result); return result; } @@ -188,9 +178,9 @@ class LeafletMap extends ThemableMixin(PolymerElement) { } toLeafletMap(options) { - console.log("LeafletMap - initialize map with options: {}", options); + // console.log("LeafletMap - initialize map with options: {}", options); let mapElement = this.shadowRoot.getElementById("map"); - console.log("LeafletMap - using DOM element: {}", mapElement); + // console.log("LeafletMap - using DOM element: {}", mapElement); let leafletMap = L.map(mapElement, options); leafletMap._controls = []; this.events @@ -198,7 +188,7 @@ class LeafletMap extends ThemableMixin(PolymerElement) { .forEach((event) => this.registerEventListener(leafletMap, event.leafletEvent) ); - console.log("LeafletMap - map has been created with options", options); + // console.log("LeafletMap - map has been created with options", options); return 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 499ca62..6f82fac 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 @@ -28,11 +28,10 @@ // 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. - -import * as L from "leaflet/dist/leaflet-src.js"; - export class LeafletTypeConverter { - constructor() { + + constructor(L) { + this.L = L; this.basicTypes = [ "Point", "Bounds", @@ -44,7 +43,6 @@ export class LeafletTypeConverter { } toLeafletLayer(layer, map) { - //console.log("LeafletTypeConverter - toLeafletLayer() leafletType", {leafletType: layer.leafletType}); let leafletLayer; if (map.hasLayer(layer.uuid)) { @@ -60,7 +58,7 @@ export class LeafletTypeConverter { } if (layer.leafletType === "GeoJSON") { - leafletLayer = L.geoJSON(null, layer); + leafletLayer = this.L.geoJSON(null, layer); leafletLayer._layers = layer.layers; } else { let factoryFn = this.getLayerFactoryFn(layer.leafletType); @@ -85,7 +83,7 @@ export class LeafletTypeConverter { map.registerEventListener(leafletLayer, event) ); } - console.log("LeafletTypeConverter - toLeafletLayer() result", leafletLayer); + // console.log("LeafletTypeConverter - toLeafletLayer() result", leafletLayer); return leafletLayer; } @@ -94,7 +92,7 @@ export class LeafletTypeConverter { } getControlFactoryFn(leafletType) { - return L.control[leafletType]; + return this.L.control[leafletType]; } toLeafletControl(control, mapTemplate) { @@ -116,10 +114,10 @@ export class LeafletTypeConverter { leafletControl = controlFn(control); } mapTemplate.map._controls[control.uuid] = leafletControl; - console.log( + /*console.log( "LeafletTypeConverter - toLeafletControl() result", leafletControl - ); + );*/ } return leafletControl; } @@ -195,58 +193,58 @@ export class LeafletTypeConverter { iconOptions.iconAnchor = iconOptions.iconAnchor ? [iconOptions.iconAnchor.x, iconOptions.iconAnchor.y] : null; iconOptions.iconSize = iconOptions.iconSize ? [iconOptions.iconSize.x, iconOptions.iconSize.y] : null; iconOptions.shadowSize = iconOptions.shadowSize ? [iconOptions.shadowSize.x, iconOptions.shadowSize.y] : null; - return L.icon(iconOptions); + return this.L.icon(iconOptions); } /** * Convert the given JsonObject to Leaflet DivIcon */ toDivIcon(divIcon) { - return L.divIcon(divIcon); + return this.L.divIcon(divIcon); } /** * Convert the given JsonObject to Leaflet Point */ toPoint(point) { - return point ? L.point(point.x, point.y) : point; + return point ? this.L.point(point.x, point.y) : point; } /** * Convert the given JsonObject to Leaflet LatLng */ toLatLng(latLng) { - return latLng ? L.latLng(latLng.lat, latLng.lng, latLng.altitude) : latLng; + return latLng ? this.L.latLng(latLng.lat, latLng.lng, latLng.altitude) : latLng; } /** * 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); - return L.bounds(corner1, corner2); + let corner1 = this.L.point(bounds.topLeft.x, bounds.topLeft.y); + let corner2 = this.L.point(bounds.bottomRight.x, bounds.bottomRight.y); + return this.L.bounds(corner1, corner2); } /** * 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); + let corner1 = this.L.latLng(bounds._northEast); + let corner2 = this.L.latLng(bounds._southWest); + return this.L.latLngBounds(corner1, corner2); } _applyOptions(layer, options) { if (options.tooltip) { - let leafletTooltip = L.tooltip(options.tooltip).setContent( + let leafletTooltip = this.L.tooltip(options.tooltip).setContent( options.tooltip.content ); //console.log("LeafletConverter - binding tooltip to layer",leafletTooltip); layer.bindTooltip(leafletTooltip); } if (options.popup) { - let leafletPopup = L.popup(options.popup).setContent( + let leafletPopup = this.L.popup(options.popup).setContent( options.popup.content ); //console.log("LeafletConverter - binding popup to layer", leafletPopup);