From a1b341c507748172f3d2347a2ad574a30f494d1f Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Tue, 16 Jan 2024 15:40:15 -0300 Subject: [PATCH] feat: add support to add polylines Close #102 --- .../vaadin/addons/googlemaps/GoogleMap.java | 15 ++ .../addons/googlemaps/GoogleMapPoly.java | 191 ++++++++++++++++++ .../addons/googlemaps/GoogleMapPolygon.java | 163 +-------------- .../addons/googlemaps/GoogleMapPolyline.java | 33 +++ .../addons/googlemaps/GooglemapsDemoView.java | 1 + .../addons/googlemaps/PolylinesDemo.java | 61 ++++++ 6 files changed, 303 insertions(+), 161 deletions(-) create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolyline.java create mode 100644 src/test/java/com/flowingcode/vaadin/addons/googlemaps/PolylinesDemo.java diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java index 75eb250..0ea18b2 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java @@ -160,6 +160,21 @@ public void addPolygon(GoogleMapPolygon polygon) { public void removePolygon(GoogleMapPolygon polygon) { this.getElement().removeChild(polygon.getElement()); } + + public GoogleMapPolyline addPolyline(List points) { + GoogleMapPolyline polyline = new GoogleMapPolyline(points); + this.getElement().appendChild(polyline.getElement()); + return polyline; + } + + public void addPolyline(GoogleMapPolyline polyline) { + this.getElement().appendChild(polyline.getElement()); + } + + @SuppressWarnings("squid:S3242") + public void removePolyline(GoogleMapPolyline polyline) { + this.getElement().removeChild(polyline.getElement()); + } /** * Adds a marker to the map. diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java new file mode 100644 index 0000000..92582d6 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java @@ -0,0 +1,191 @@ +/*- + * #%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.ClickEvent; +import com.vaadin.flow.component.Component; +import com.vaadin.flow.component.ComponentEventListener; +import com.vaadin.flow.component.DomEvent; +import com.vaadin.flow.component.EventData; +import com.vaadin.flow.component.Tag; +import com.vaadin.flow.component.dependency.JsModule; +import com.vaadin.flow.component.dependency.NpmPackage; +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; + +@SuppressWarnings("serial") +@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 = "@googlemaps/markerclusterer", version = "2.0.8") +public abstract class GoogleMapPoly extends Component { + + private static final double DEFAULT_FILL_OPACITY = 0.5d; + private static final String DEFAULT_FILL_COLOR = "blue"; + + public enum StrokePosition { + CENTER, + INSIDE, + OUTSIDE + } + + public GoogleMapPoly(List points) { + getElement().removeProperty("draggable"); + setFillColor(DEFAULT_FILL_COLOR); + setFillOpacity(DEFAULT_FILL_OPACITY); + setPoints(points); + } + + public void setFillOpacity(double opacity) { + this.getElement().setProperty("fillOpacity", opacity); + } + + public double getFillOpacity() { + return this.getElement().getProperty("fillOpacity", 1d); + } + + public void setStrokeOpacity(double opacity) { + this.getElement().setProperty("strokeOpacity", opacity); + } + + public double getStrokeOpacity() { + return this.getElement().getProperty("strokeOpacity", 1d); + } + + public void setStrokePosition(StrokePosition position) { + this.getElement().setProperty("strokePosition", position.name().toLowerCase()); + } + + public StrokePosition getStrokePosition() { + return StrokePosition.valueOf(this.getElement().getProperty("strokePosition").toUpperCase()); + } + + public void setStrokeWeight(double weight) { + this.getElement().setProperty("strokeWeight", weight); + } + + public double getStrokeWeight() { + return this.getElement().getProperty("strokeWeight", 1d); + } + + public void setZIndex(double zindex) { + this.getElement().setProperty("zIndex", zindex); + } + + public double getZIndex() { + return this.getElement().getProperty("zIndex", 1d); + } + + public void setFillColor(String string) { + this.getElement().setProperty("fillColor", string); + } + + public String getFillColor() { + return this.getElement().getProperty("fillColor"); + } + + public void setStrokeColor(String string) { + this.getElement().setProperty("strokeColor", string); + } + + public String getStrokeColor() { + return this.getElement().getProperty("strokeColor"); + } + + public void setClosed(boolean b) { + this.getElement().setProperty("closed", b); + } + + public boolean isClosed() { + return this.getElement().getProperty("closed", false); + } + + public void setGeodesic(boolean b) { + this.getElement().setProperty("geodesic", b); + } + + public boolean isGeodesic() { + return this.getElement().getProperty("geodesic", false); + } + + public void setPoints(Iterable points) { + points.forEach(point -> this.getElement().appendChild(point.getElement())); + } + + public GoogleMapPoint addPoint(LatLon position) { + GoogleMapPoint point = new GoogleMapPoint(position.getLat(), position.getLon()); + this.getElement().appendChild(point.getElement()); + return point; + } + + public void addPoint(GoogleMapPoint point) { + this.getElement().appendChild(point.getElement()); + } + + @SuppressWarnings("squid:S3242") + public void removePoint(GoogleMapPoint point) { + this.getElement().removeChild(point.getElement()); + } + + @DomEvent("google-map-poly-click") + public static class GoogleMapPolyClickEvent extends ClickEvent { + + private final double lat; + private final double lon; + + public GoogleMapPolyClickEvent( + GoogleMapPoly source, + boolean fromClient, + @EventData(value = "event.detail.latLng") JsonValue latLng) { + super(source); + this.lat = ((JsonObject) latLng).getNumber("lat"); + this.lon = ((JsonObject) latLng).getNumber("lng"); + } + + public double getLatitude() { + return this.lat; + } + + public double getLongitude() { + return this.lon; + } + } + + public Registration addClickListener( + ComponentEventListener listener) { + this.getElement().setProperty("clickable", true); + this.getElement().setProperty("clickEvents", true); + return addListener(GoogleMapPolyClickEvent.class, listener); + } + + public void setIcons(Icon... icons) { + JsonArray jsonArray = Json.createArray(); + for (int i = 0; i < icons.length; i++) { + jsonArray.set(i, icons[i].getJson()); + } + this.getElement().setPropertyJson("icons", jsonArray); + } +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolygon.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolygon.java index f96c64b..0913061 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolygon.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolygon.java @@ -20,174 +20,15 @@ package com.flowingcode.vaadin.addons.googlemaps; -import com.vaadin.flow.component.ClickEvent; -import com.vaadin.flow.component.Component; -import com.vaadin.flow.component.ComponentEventListener; -import com.vaadin.flow.component.DomEvent; -import com.vaadin.flow.component.EventData; -import com.vaadin.flow.component.Tag; -import com.vaadin.flow.component.dependency.JsModule; -import com.vaadin.flow.component.dependency.NpmPackage; -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; /** A class representing a polygon overlay of Google Maps. */ @SuppressWarnings("serial") -@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 = "@googlemaps/markerclusterer", version = "2.0.8") -public class GoogleMapPolygon extends Component { - - private static final double DEFAULT_FILL_OPACITY = 0.5d; - private static final String DEFAULT_FILL_COLOR = "blue"; - - public enum StrokePosition { - CENTER, - INSIDE, - OUTSIDE - } +public class GoogleMapPolygon extends GoogleMapPoly { public GoogleMapPolygon(List points) { - getElement().removeProperty("draggable"); + super(points); setClosed(true); - setFillColor(DEFAULT_FILL_COLOR); - setFillOpacity(DEFAULT_FILL_OPACITY); - setPoints(points); - } - - public void setFillOpacity(double opacity) { - this.getElement().setProperty("fillOpacity", opacity); - } - - public double getFillOpacity() { - return this.getElement().getProperty("fillOpacity", 1d); - } - - public void setStrokeOpacity(double opacity) { - this.getElement().setProperty("strokeOpacity", opacity); - } - - public double getStrokeOpacity() { - return this.getElement().getProperty("strokeOpacity", 1d); - } - - public void setStrokePosition(StrokePosition position) { - this.getElement().setProperty("strokePosition", position.name().toLowerCase()); - } - - public StrokePosition getStrokePosition() { - return StrokePosition.valueOf(this.getElement().getProperty("strokePosition").toUpperCase()); - } - - public void setStrokeWeight(double weight) { - this.getElement().setProperty("strokeWeight", weight); - } - - public double getStrokeWeight() { - return this.getElement().getProperty("strokeWeight", 1d); - } - - public void setZIndex(double zindex) { - this.getElement().setProperty("zIndex", zindex); - } - - public double getZIndex() { - return this.getElement().getProperty("zIndex", 1d); - } - - public void setFillColor(String string) { - this.getElement().setProperty("fillColor", string); - } - - public String getFillColor() { - return this.getElement().getProperty("fillColor"); - } - - public void setStrokeColor(String string) { - this.getElement().setProperty("strokeColor", string); - } - - public String getStrokeColor() { - return this.getElement().getProperty("strokeColor"); - } - - public void setClosed(boolean b) { - this.getElement().setProperty("closed", b); - } - - public boolean isClosed() { - return this.getElement().getProperty("closed", false); - } - - public void setGeodesic(boolean b) { - this.getElement().setProperty("geodesic", b); - } - - public boolean isGeodesic() { - return this.getElement().getProperty("geodesic", false); - } - - public void setPoints(Iterable points) { - points.forEach(point -> this.getElement().appendChild(point.getElement())); - } - - public GoogleMapPoint addPoint(LatLon position) { - GoogleMapPoint point = new GoogleMapPoint(position.getLat(), position.getLon()); - this.getElement().appendChild(point.getElement()); - return point; - } - - public void addPoint(GoogleMapPoint point) { - this.getElement().appendChild(point.getElement()); - } - - @SuppressWarnings("squid:S3242") - public void removePoint(GoogleMapPoint point) { - this.getElement().removeChild(point.getElement()); - } - - @DomEvent("google-map-poly-click") - public static class GoogleMapPolygonClickEvent extends ClickEvent { - - private final double lat; - private final double lon; - - public GoogleMapPolygonClickEvent( - GoogleMapPolygon source, - boolean fromClient, - @EventData(value = "event.detail.latLng") JsonValue latLng) { - super(source); - this.lat = ((JsonObject) latLng).getNumber("lat"); - this.lon = ((JsonObject) latLng).getNumber("lng"); - } - - public double getLatitude() { - return this.lat; - } - - public double getLongitude() { - return this.lon; - } } - public Registration addClickListener( - ComponentEventListener listener) { - this.getElement().setProperty("clickable", true); - this.getElement().setProperty("clickEvents", true); - return addListener(GoogleMapPolygonClickEvent.class, listener); - } - - public void setIcons(Icon... icons) { - JsonArray jsonArray = Json.createArray(); - for (int i = 0; i < icons.length; i++) { - jsonArray.set(i, icons[i].getJson()); - } - this.getElement().setPropertyJson("icons", jsonArray); - } } diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolyline.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolyline.java new file mode 100644 index 0000000..a453c4e --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPolyline.java @@ -0,0 +1,33 @@ +/*- + * #%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 java.util.List; + +@SuppressWarnings("serial") +public class GoogleMapPolyline extends GoogleMapPoly { + + public GoogleMapPolyline(List points) { + super(points); + setClosed(false); + } + +} diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java index 7516d13..e74be1a 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java @@ -44,6 +44,7 @@ public GooglemapsDemoView() { addDemo(MarkerClusteringDemo.class); addDemo(TiltAndRotationDemo.class); addDemo(ClusteringWithCustomRendererDemo.class); + addDemo(PolylinesDemo.class); setSizeFull(); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/PolylinesDemo.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/PolylinesDemo.java new file mode 100644 index 0000000..d972a28 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/PolylinesDemo.java @@ -0,0 +1,61 @@ +/*- + * #%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.notification.Notification; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; +import java.util.Arrays; + +@PageTitle("Polylines Demo") +@DemoSource +@Route(value = "googlemaps/polylines", layout = GooglemapsDemoView.class) +@SuppressWarnings("serial") +public class PolylinesDemo extends AbstractGoogleMapsDemo { + + @Override + protected void createGoogleMapsDemo(String apiKey) { + GoogleMap gmaps = new GoogleMap(apiKey, null, null); + gmaps.setMapType(MapType.TERRAIN); + gmaps.setSizeFull(); + gmaps.setZoom(3); + gmaps.setCenter(new LatLon(0, -180)); + + GoogleMapPoint point1 = new GoogleMapPoint(37.772, -122.214); + GoogleMapPoint point2 = new GoogleMapPoint(21.291, -157.821); + GoogleMapPoint point3 = new GoogleMapPoint(-18.142, 178.431); + GoogleMapPoint point4 = new GoogleMapPoint(-27.467, 153.027); + + GoogleMapPolyline polyline = + new GoogleMapPolyline(Arrays.asList(point1, point2, point3, point4)); + polyline.setStrokeColor("#ed0e0e"); + polyline.setStrokeWeight(3.0); + + polyline.addClickListener(e -> Notification + .show("Latitude: " + e.getLatitude() + " - Longitude: " + e.getLongitude())); + + gmaps.addPolyline(polyline); + + add(gmaps); + } +}