Add/remove custom controls dynamically

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
     <artifactId>google-maps</artifactId>
-    <version>2.1.1-SNAPSHOT</version>
+    <version>2.2.0-SNAPSHOT</version>
     <name>Google Maps Addon</name>
     <description>Integration of google-map for Vaadin platform</description>
 

src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java

@@ -42,19 +42,23 @@
 import elemental.json.JsonArray;
 import elemental.json.JsonObject;
 import elemental.json.JsonValue;
+import java.util.ArrayList;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.concurrent.CompletableFuture;
 import org.apache.commons.lang3.StringUtils;
 
 @SuppressWarnings("serial")
 @Tag("google-map")
 @JsModule("@flowingcode/google-map/google-map.js")
-@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.8.0")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 @JsModule("./googlemaps/geolocation.js")
 public class GoogleMap extends Component implements HasSize {
 
-  private Integer trackLocationId = null;
+  private Integer trackLocationId = null;  
+
+  private List<CustomControl> customControls = new ArrayList<CustomControl>();
 
   /** Base map types supported by Google Maps. */
   public enum MapType {
@@ -776,21 +780,53 @@ public void addCustomControls(CustomControl... customControls) {
     }
     this.getElement().setPropertyJson("customControls", jsonArray);
   }
-
+    
   /**
    * Sets the custom control buttons to be displayed in the map.
    * 
    * @param customControls list of custom controls to add to the map
    */
   public void setCustomControls(CustomControl... customControls) {
-    JsonArray jsonArray = Json.createArray();
-    for (int i = 0; i < customControls.length; i++) {
-      CustomControl customControl = customControls[i];
-      jsonArray.set(i, customControl.getJson(i));
-      customControl.getControlButton().getElement().setAttribute("slot", "customControlSlot_" + i);
-      this.getElement().appendChild(customControl.getControlButton().getElement());
-    }
-    this.getElement().setPropertyJson("customControls", jsonArray);
+    this.customControls.clear();
+    this.getElement().executeJs("this._removeCustomControls()").then((e) -> {
+      JsonArray jsonArray = Json.createArray();
+      for (int i = 0; i < customControls.length; i++) {
+        CustomControl customControl = customControls[i];
+        jsonArray.set(i, customControl.getJson(i));
+        customControl.getControlButton().getElement().setAttribute("slot", "customControlSlot_" + i);
+        this.getElement().appendChild(customControl.getControlButton().getElement());
+        this.customControls.add(customControl);
+      }
+      this.getElement().setPropertyJson("customControls", jsonArray);
+    });    
+  }
+
+  /**
+   * Adds a custom control to be displayed in the map.
+   * 
+   * @param customControl the custom control to add to the map
+   */
+  public void addCustomControl(CustomControl customControl) {
+    this.customControls.add(customControl);
+    this.setCustomControls(this.customControls.stream().toArray(CustomControl[]::new));
+  }
+
+  /**
+   * Removes a custom control added to the map.
+   * 
+   * @param customControl the custom control to be removed
+   */
+  public void removeCustomControl(CustomControl customControl) {
+    this.customControls.remove(customControl);
+    this.setCustomControls(this.customControls.stream().toArray(CustomControl[]::new));
+  }
+
+  /**
+   * Removes all custom controls added to the map.
+   */
+  public void removeCustomControls() {
+    this.customControls.clear();
+    this.getElement().executeJs("this._removeCustomControls()");
   }
 
   /**

src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java

@@ -39,7 +39,7 @@
 @SuppressWarnings("serial")
 @Tag("google-map-marker")
 @JsModule("@flowingcode/google-map/google-map-marker.js")
-@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.8.0")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 public class GoogleMapMarker extends Component {
 

src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoint.java

@@ -28,7 +28,7 @@
 @SuppressWarnings("serial")
 @Tag("google-map-point")
 @JsModule("@flowingcode/google-map/google-map-point.js")
-@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.8.0")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 public class GoogleMapPoint extends Component {
 

src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java

@@ -39,7 +39,7 @@
 @Tag("google-map-poly")
 @JsModule("@flowingcode/google-map/google-map-poly.js")
 @JsModule("@flowingcode/google-map/google-map-point.js")
-@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.8.0")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 public abstract class GoogleMapPoly extends Component {
 

src/test/java/com/flowingcode/vaadin/addons/googlemaps/CustomControlsDemo.java

@@ -0,0 +1,103 @@
+/*-
+ * #%L
+ * Google Maps Addon
+ * %%
+ * Copyright (C) 2020 - 2024 Flowing Code
+ * %%
+ * 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.
+ * #L%
+ */
+
+package com.flowingcode.vaadin.addons.googlemaps;
+
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.flowingcode.vaadin.addons.googlemaps.GoogleMap.MapType;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@PageTitle("Custom Controls Demo")
+@DemoSource
+@DemoSource(
+    value = "/src/test/resources/META-INF/resources/frontend/styles/google-maps/custom-controls-demo-styles.css",
+    caption = "custom-controls-demo-styles.css")
+@Route(value = "googlemaps/custom-controls", layout = GooglemapsDemoView.class)
+@CssImport("./styles/google-maps/custom-controls-demo-styles.css")
+@SuppressWarnings("serial")
+public class CustomControlsDemo extends AbstractGoogleMapsDemo {
+
+  @Override
+  protected void createGoogleMapsDemo(String apiKey) {
+    GoogleMap gmaps = new GoogleMap(apiKey, null, null);
+    gmaps.setMapType(MapType.ROADMAP);
+    gmaps.setSizeFull();
+    add(gmaps);
+
+    Button customControlButton1 = new Button("Custom Control 1");
+    customControlButton1.setClassName("custom-control-button");
+    CustomControl customControl1 =
+        new CustomControl(customControlButton1, ControlPosition.TOP_CENTER);
+    Button customControlButton2 = new Button("Custom Control 2");
+    customControlButton2.setClassName("custom-control-button");
+    CustomControl customControl2 =
+        new CustomControl(customControlButton2, ControlPosition.LEFT_CENTER);
+    gmaps.setCustomControls(customControl1, customControl2);
+
+    Button customControlButton3 = new Button("Custom Control 3");
+    customControlButton3.setClassName("custom-control-button");
+    CustomControl customControl3 =
+        new CustomControl(customControlButton3, ControlPosition.BOTTOM_CENTER);
+
+    Button addCustomControl3Button = createDemoButton("Add Custom Control 3");
+    Button removeCustomControl3Button = createDemoButton("Remove Custom Control 3");
+    Button removeAllCustomControlsButton = createDemoButton("Remove all controls");
+    Button resetButton = createDemoButton("Reset");
+
+    addCustomControl3Button.addClickListener(e -> {
+      gmaps.addCustomControl(customControl3);
+      removeCustomControl3Button.setEnabled(true); // hide-source
+      removeAllCustomControlsButton.setEnabled(true); // hide-source
+    });  
+
+    removeCustomControl3Button.addClickListener(e -> {
+      gmaps.removeCustomControl(customControl3);
+      addCustomControl3Button.setEnabled(true); // hide-source
+    });
+    removeCustomControl3Button.setEnabled(false); 
+
+    removeAllCustomControlsButton.addClickListener(e -> {
+      gmaps.removeCustomControls();
+      addCustomControl3Button.setEnabled(true); // hide-source
+      removeCustomControl3Button.setEnabled(false); // hide-source
+      resetButton.setEnabled(true); // hide-source
+    });
+
+    resetButton.addClickListener(e -> {
+      gmaps.setCustomControls(customControl1, customControl2);
+      removeAllCustomControlsButton.setEnabled(true); // hide-source
+      addCustomControl3Button.setEnabled(true); // hide-source
+      removeCustomControl3Button.setEnabled(false); // hide-source
+    });
+
+    add(new HorizontalLayout(addCustomControl3Button, removeCustomControl3Button,
+        removeAllCustomControlsButton, resetButton));
+  }
+
+  private Button createDemoButton(String caption) {
+    Button button = new Button(caption);
+    button.setDisableOnClick(true);
+    return button;
+  }
+}

src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java

@@ -48,6 +48,7 @@ public GooglemapsDemoView() {
     addDemo(CustomizedMarkerIconsDemo.class);
     addDemo(TrackLocationDemo.class);
     addDemo(StyleFeaturesDemo.class);
+    addDemo(CustomControlsDemo.class);
     setSizeFull();
   }
 }

src/test/resources/META-INF/resources/frontend/styles/google-maps/custom-controls-demo-styles.css

@@ -0,0 +1,31 @@
+/*-
+ * #%L
+ * Google Maps Addon
+ * %%
+ * Copyright (C) 2020 - 2024 Flowing Code
+ * %%
+ * 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.
+ * #L%
+ */
+
+.custom-control-button {
+	background: white;
+	margin: 10px;
+	height: 40px;
+	color: black;
+	cursor: pointer;
+	font-family: Arial;
+	font-size: 18px;
+	border-radius: 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
+}