new examples, minor bug fixes

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

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

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`
-      <div id="map" style="position: relative; width: 100%; height: 100%;"></div>
+      <div
+        id="map"
+        style="position: relative; width: 100%; height: 100%;"
+      ></div>
     `;
   }
 
@@ -72,138 +92,184 @@ 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()");
         this.map.invalidateSize();
         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);
   }
 
   getEventMap() {
     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);