FIx an issue with the devbundle and prodbundle

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>org.vaadin.addons.componentfactory</groupId>
 	<artifactId>vcf-leaflet</artifactId>
-	<version>2.0.0</version>
+	<version>2.0.1</version>
 	<name>Leaflet</name>
 	<description>Integration of Leaflet Map for Vaadin Flow</description>
 	<scm>

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<Marker> markers = new ArrayList<>();

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 {
 
 }

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;

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 {
 

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;

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;

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 {

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,22 +105,22 @@ class LeafletMap extends ThemableMixin(PolymerElement) {
   }
 
   callLeafletFunction(operation) {
-    console.info("LeafletMap - 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)
     );
-    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,17 +178,17 @@ 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
       .slice()
       .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;
   }
 

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);