Add support for adding custom control buttons

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
     <artifactId>google-maps</artifactId>
-    <version>1.11.1-SNAPSHOT</version>
+    <version>1.12.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/ControlPosition.java

@@ -0,0 +1,98 @@
+/*-
+ * #%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;
+
+/**
+ * Enum representing supported control positions for map control buttons. 
+ */
+public enum ControlPosition {
+
+  /**
+   * Indicates that the control should be placed along the top center of the map.
+   */
+  TOP_CENTER,
+
+  /**
+   * Indicates that the control should be placed along the top left of the map, with any
+   * sub-elements of the control "flowing" towards the top center.
+   */
+  TOP_LEFT,
+
+  /**
+   * Indicates that the control should be placed along the top right of the map, with any
+   * sub-elements of the control "flowing" towards the top center.
+   */
+  TOP_RIGHT,
+
+  /**
+   * Indicates that the control should be placed along the top left of the map, but below any
+   * TOP_LEFT elements.
+   */
+  LEFT_TOP,
+
+  /**
+   * Indicates that the control should be placed along the top right of the map, but below any
+   * TOP_RIGHT elements.
+   */
+  RIGHT_TOP,
+
+  /**
+   * Indicates that the control should be placed along the left side of the map, centered between
+   * the TOP_LEFT and BOTTOM_LEFT positions
+   */
+  LEFT_CENTER,
+
+  /**
+   * Indicates that the control should be placed along the right side of the map, centered between
+   * the TOP_RIGHT and BOTTOM_RIGHT positions.
+   */
+  RIGHT_CENTER,
+
+  /**
+   * Indicates that the control should be placed along the bottom left of the map, but above any
+   * BOTTOM_LEFT elements.
+   */
+  LEFT_BOTTOM,
+
+  /**
+   * Indicates that the control should be placed along the bottom right of the map, but above any
+   * BOTTOM_RIGHT elements.
+   */
+  RIGHT_BOTTOM,
+
+  /**
+   * Indicates that the control should be placed along the bottom center of the map.
+   */
+  BOTTOM_CENTER,
+
+  /**
+   * Indicates that the control should be placed along the bottom left of the map, with any
+   * sub-elements of the control "flowing" towards the bottom center.
+   */
+  BOTTOM_LEFT,
+
+  /**
+   * Indicates that the control should be placed along the bottom right of the map, with any
+   * sub-elements of the control "flowing" towards the bottom center.
+   */
+  BOTTOM_RIGHT;
+
+}

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

@@ -0,0 +1,73 @@
+/*-
+ * #%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.vaadin.flow.component.button.Button;
+import elemental.json.Json;
+import elemental.json.JsonObject;
+import java.io.Serializable;
+import java.util.Optional;
+
+/**
+ * Represents a custom control that can be added to the map.
+ * 
+ * A button to represent the custom control and the {@link ControlPosition position} where the
+ * button should be displayed within the map should be specified.
+ * 
+ */
+public class CustomControl implements Serializable {
+
+  private static final long serialVersionUID = -1821466465711569857L;
+
+  private Button controlButton;
+
+  private ControlPosition controlPosition;
+
+  public CustomControl(Button controlButton, ControlPosition controlPosition) {
+    this.controlButton = controlButton;
+    this.controlPosition = controlPosition;
+  }
+
+  public Button getControlButton() {
+    return controlButton;
+  }
+
+  public void setControlButton(Button controlButton) {
+    this.controlButton = controlButton;
+  }
+
+  public ControlPosition getControlPosition() {
+    return controlPosition;
+  }
+
+  public void setControlPosition(ControlPosition controlPosition) {
+    this.controlPosition = controlPosition;
+  }
+
+  protected JsonObject getJson(int id) {
+    JsonObject js = Json.createObject();
+    js.put("id", id);
+    Optional.ofNullable(controlPosition)
+        .ifPresent(value -> js.put("position", controlPosition.name()));
+    return js;
+  }
+
+}

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

@@ -35,6 +35,8 @@
 import com.vaadin.flow.dom.DebouncePhase;
 import com.vaadin.flow.dom.DomListenerRegistration;
 import com.vaadin.flow.shared.Registration;
+import elemental.json.Json;
+import elemental.json.JsonArray;
 import elemental.json.JsonObject;
 import elemental.json.JsonValue;
 import java.util.List;
@@ -44,7 +46,7 @@
 @SuppressWarnings("serial")
 @Tag("google-map")
 @JsModule("@flowingcode/google-map/google-map.js")
-@NpmPackage(value = "@flowingcode/google-map", version = "3.6.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 @JsModule("./googlemaps/geolocation.js")
 public class GoogleMap extends Component implements HasSize {
@@ -625,5 +627,20 @@ public LatLonBounds getBounds() {
       return bounds;
     }
   }
-
+
+  /**
+   * Adds custom control buttons to the map.
+   * 
+   * @param customControls list of custom controls to add to the map
+   */
+  public void addCustomControls(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);
+  }
 }

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.6.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
 @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.6.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
 @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.6.1")
+@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
 @NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
 public abstract class GoogleMapPoly extends Component {
 

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

@@ -23,15 +23,19 @@
 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.icon.VaadinIcon;
 import com.vaadin.flow.component.notification.Notification;
-import com.vaadin.flow.component.orderedlayout.FlexLayout;
-import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexWrap;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 
 @PageTitle("Geolocation Demo")
 @DemoSource
+@DemoSource(
+    value = "/src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-demo-styles.css",
+    caption = "geolocation-demo-styles.css")
 @Route(value = "googlemaps/geolocation", layout = GooglemapsDemoView.class)
+@CssImport("./styles/google-maps/geolocation-demo-styles.css")
 @SuppressWarnings("serial")
 public class GeolocationDemo extends AbstractGoogleMapsDemo {
 
@@ -40,22 +44,21 @@ protected void createGoogleMapsDemo(String apiKey) {
     GoogleMap gmaps = new GoogleMap(apiKey, null, null);
     gmaps.setMapType(MapType.ROADMAP);
     gmaps.setSizeFull();
+    add(gmaps);
 
-    FlexLayout layout = new FlexLayout();
-    layout.setFlexWrap(FlexWrap.WRAP);
-    layout.add(new Button("Go to current location", e -> gmaps.goToCurrentLocation()));
-    add(gmaps, layout);
+    // create custom control button to pan to current location
+    Button currentLocationButton = new Button("Go to current location",
+        VaadinIcon.CROSSHAIRS.create(), e -> gmaps.goToCurrentLocation());
+    currentLocationButton.setClassName("geolocation-button");
+    CustomControl geolocationControl =
+        new CustomControl(currentLocationButton, ControlPosition.TOP_CENTER);
+    gmaps.addCustomControls(geolocationControl);
 
-    gmaps.addCurrentLocationEventListener(
-        e ->
-            gmaps.addMarker(
-                new GoogleMapMarker("You are here!", gmaps.getCenter(), false, Markers.GREEN)));
+    gmaps.addCurrentLocationEventListener(e -> gmaps
+        .addMarker(new GoogleMapMarker("You are here!", gmaps.getCenter(), false, Markers.GREEN)));
 
-    gmaps.addGeolocationErrorEventListener(
-        e ->
-            Notification.show(
-                e.isBrowserHasGeolocationSupport()
-                    ? "The geolocation service failed on retrieving your location."
-                    : "Your browser doesn't support geolocation."));
+    gmaps.addGeolocationErrorEventListener(e -> Notification.show(e.isBrowserHasGeolocationSupport()
+        ? "The geolocation service failed on retrieving your location."
+        : "Your browser doesn't support geolocation."));
   }
 }

src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-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%
+ */
+
+.geolocation-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;
+}