From 74d0856f52d8eecba3b62c183e51475fea88ff23 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 7 Mar 2024 17:52:29 -0300 Subject: [PATCH] feat: update API to allow setting properties to icons Close #113 --- .../vaadin/addons/googlemaps/GoogleMap.java | 18 +++ .../addons/googlemaps/GoogleMapIcon.java | 31 +++++ .../addons/googlemaps/GoogleMapMarker.java | 25 +++- .../addons/googlemaps/GoogleMapPoly.java | 18 +++ .../vaadin/addons/googlemaps/Icon.java | 65 ++------- .../addons/googlemaps/IconSequence.java | 80 +++++++++++ .../vaadin/addons/googlemaps/MarkerIcon.java | 97 ++++++++++++++ .../vaadin/addons/googlemaps/Size.java | 56 ++++++++ .../vaadin/addons/googlemaps/Symbol.java | 124 ++++++++++++++++++ .../addons/googlemaps/util/JsonIconUtils.java | 35 +++++ .../googlemaps/CustomizedMarkerIconsDemo.java | 67 ++++++++++ .../addons/googlemaps/GoogleMapsDemo.java | 4 +- .../addons/googlemaps/GooglemapsDemoView.java | 1 + 13 files changed, 568 insertions(+), 53 deletions(-) create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapIcon.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/IconSequence.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/MarkerIcon.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/Size.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/Symbol.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/googlemaps/util/JsonIconUtils.java create mode 100644 src/test/java/com/flowingcode/vaadin/addons/googlemaps/CustomizedMarkerIconsDemo.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 2b317a3..0937545 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMap.java @@ -139,6 +139,7 @@ public int getZoom() { * @param position Coordinates of the marker on the map. * @param draggable Set true to enable dragging of the marker. * @param iconUrl The url of the icon of the marker. + * * @return GoogleMapMarker object created with the given settings. */ public GoogleMapMarker addMarker( @@ -147,6 +148,23 @@ public GoogleMapMarker addMarker( addMarker(gmm); return gmm; } + + /** + * Adds a new marker to the map. + * + * @param caption Caption of the marker shown when the marker is hovered. + * @param position Coordinates of the marker on the map. + * @param draggable Set true to enable dragging of the marker. + * @param icon the icon image of the marker. + * + * @return GoogleMapMarker object created with the given settings. + */ + public GoogleMapMarker addMarker( + String caption, LatLon position, boolean draggable, GoogleMapIcon icon) { + GoogleMapMarker gmm = new GoogleMapMarker(caption, position, draggable, icon); + addMarker(gmm); + return gmm; + } public GoogleMapPolygon addPolygon(List points) { GoogleMapPolygon polygon = new GoogleMapPolygon(points); diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapIcon.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapIcon.java new file mode 100644 index 0000000..51ac755 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapIcon.java @@ -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% + */ + +package com.flowingcode.vaadin.addons.googlemaps; + +import elemental.json.JsonObject; + +/** + * Interface representing a google map icon ({@link MarkerIcon} or {@link Symbol}). + */ +public interface GoogleMapIcon { + + JsonObject getJson(); +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java index 8d859c2..aef2a81 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java @@ -76,12 +76,26 @@ public GoogleMapMarker(String caption, LatLon position, boolean draggable) { * @param caption The caption to use. * @param position The position of the marker * @param draggable Can marker be dragged? + * @param iconUrl the icon url as a string */ public GoogleMapMarker(String caption, LatLon position, boolean draggable, String iconUrl) { this(caption, position, draggable); this.setIconUrl(iconUrl); } - + + /** + * Instantiates a new GoogleMapMarker + * + * @param caption The caption to use. + * @param position The position of the marker + * @param draggable Can marker be dragged? + * @param icon the icon image for the marker + */ + public GoogleMapMarker(String caption, LatLon position, boolean draggable, GoogleMapIcon icon) { + this(caption, position, draggable); + this.setIcon(icon); + } + public void addInfoWindow(String htmlContent) { this.getElement().setProperty("innerHTML", htmlContent); } @@ -172,6 +186,15 @@ public String getIconUrl() { public void setIconUrl(String iconUrl) { this.getElement().setProperty("icon", iconUrl); } + + /** + * Sets the icon image of the marker + * + * @param icon the icon image of the marker + */ + public void setIcon(GoogleMapIcon icon) { + this.getElement().setPropertyJson("icon", icon.getJson()); + } /** * Checks if marker animation is enabled. diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java index dfd6137..055c58d 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapPoly.java @@ -181,6 +181,10 @@ public Registration addClickListener( return addListener(GoogleMapPolyClickEvent.class, listener); } + /** + * @deprecated, use {@link #setIcons(IconSequence...)} instead. + */ + @Deprecated public void setIcons(Icon... icons) { JsonArray jsonArray = Json.createArray(); for (int i = 0; i < icons.length; i++) { @@ -188,4 +192,18 @@ public void setIcons(Icon... icons) { } this.getElement().setPropertyJson("icons", jsonArray); } + + /** + * Set icons to the polygon/polyline. + * + * @param icons the icons to set + */ + public void setIcons(IconSequence... 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/Icon.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Icon.java index 66a50a1..48b9d03 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Icon.java +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Icon.java @@ -24,55 +24,22 @@ import elemental.json.JsonObject; import java.util.Optional; -public class Icon { +/** + * @deprecated, use {@link IconSequence} instead. + */ +@Deprecated +public class Icon extends Symbol { - private String path; - private String strokeColor; - private String fillColor; - private int fillOpacity; private int repeat; public Icon(String path, String strokeColor, String fillColor, int fillOpacity, int repeat) { - super(); - this.path = path; - this.strokeColor = strokeColor; - this.fillColor = fillColor; - this.fillOpacity = fillOpacity; + super(path); + this.setStrokeColor(strokeColor); + this.setFillColor(fillColor); + this.setFillOpacity(Double.valueOf(fillOpacity)); this.repeat = repeat; } - public String getPath() { - return path; - } - - public void setPath(String path) { - this.path = path; - } - - public String getStrokeColor() { - return strokeColor; - } - - public void setStrokeColor(String strokeColor) { - this.strokeColor = strokeColor; - } - - public String getFillColor() { - return fillColor; - } - - public void setFillColor(String fillColor) { - this.fillColor = fillColor; - } - - public int getFillOpacity() { - return fillOpacity; - } - - public void setFillOpacity(int fillOpacity) { - this.fillOpacity = fillOpacity; - } - public int getRepeat() { return repeat; } @@ -81,16 +48,12 @@ public void setRepeat(int repeat) { this.repeat = repeat; } - protected JsonObject getJson() { - JsonObject options = Json.createObject(); - Optional.ofNullable(getPath()).ifPresent(value -> options.put("path", value)); - Optional.ofNullable(getStrokeColor()).ifPresent(value -> options.put("strokeColor", value)); - Optional.ofNullable(getFillColor()).ifPresent(value -> options.put("fillColor", value)); - Optional.ofNullable(getFillOpacity()).ifPresent(value -> options.put("fillOpacity", value)); - + @Override + public JsonObject getJson() { JsonObject js = Json.createObject(); - js.put("icon", options); + JsonObject iconJs = super.getJson(); + js.put("icon", iconJs); Optional.ofNullable(getRepeat()).ifPresent(v -> js.put("repeat", v + "px")); - return js; + return js; } } diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/IconSequence.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/IconSequence.java new file mode 100644 index 0000000..40e8962 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/IconSequence.java @@ -0,0 +1,80 @@ +/*- + * #%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 elemental.json.Json; +import elemental.json.JsonObject; +import java.util.Optional; +import lombok.Getter; +import lombok.Setter; + +/** + * Describes how icons are to be rendered on a line (for polygons and polylines). + */ +@Getter +@Setter +public class IconSequence { + + /** + * The icon to render on the line. + */ + private Symbol symbol; + + /** + * The distance between consecutive icons on the line. This distance may be expressed as a + * percentage or in pixels. To disable repeating of the icon, specify '0'. + */ + private String repeat; + + /** + * If true, each icon in the sequence has the same fixed rotation regardless of the angle of the + * edge on which it lies. If false, case each icon in the sequence is rotated to align with its + * edge. Default value: false. + */ + private boolean fixedRotation; + + /** + * The distance from the start of the line at which an icon is to be rendered. This distance may + * be expressed as a percentage or in pixels. + */ + private String offset; + + + public IconSequence(Symbol symbol) { + this.symbol = symbol; + } + + public IconSequence(Symbol symbol, String repeat) { + this(symbol); + this.repeat = repeat; + } + + protected JsonObject getJson() { + JsonObject js = Json.createObject(); + JsonObject symbolJs = symbol.getJson(); + js.put("icon", symbolJs); + Optional.ofNullable(getRepeat()).ifPresent(value -> js.put("repeat", value)); + Optional.ofNullable(isFixedRotation()).ifPresent(value -> js.put("fixedRotation", value)); + Optional.ofNullable(getOffset()).ifPresent(value -> js.put("offset", value)); + return js; + } + +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/MarkerIcon.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/MarkerIcon.java new file mode 100644 index 0000000..d0e32bb --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/MarkerIcon.java @@ -0,0 +1,97 @@ +/*- + * #%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.googlemaps.util.JsonIconUtils; +import elemental.json.Json; +import elemental.json.JsonObject; +import java.util.Optional; +import lombok.Getter; +import lombok.NonNull; +import lombok.RequiredArgsConstructor; +import lombok.Setter; + +/** + * A structure representing a Marker icon image. + */ +@Getter +@Setter +@RequiredArgsConstructor +public class MarkerIcon implements GoogleMapIcon { + + /** + * The URL of the image or sprite sheet. + */ + @NonNull + private String url; + + /** + * The position at which to anchor an image in correspondence to the location of the marker on the + * map. By default, the anchor is located along the center point of the bottom of the image. + */ + private GoogleMapPoint anchor; + + /** + * The origin of the label relative to the top-left corner of the icon image, if a label is + * supplied by the marker. By default, the origin is located in the center point of the image. + */ + private GoogleMapPoint labelOrigin; + + /** + * The position of the image within a sprite, if any. + */ + private GoogleMapPoint originPoint; + + /** + * The display size of the sprite or image. When using sprites, you must specify the sprite size. + * If the size is not provided, it will be set when the image loads. + */ + private Size size; + + /** + * The size of the entire image after scaling, if any. Use this property to stretch/shrink an + * image or a sprite. + */ + private Size scaledSize; + + @Override + public JsonObject getJson() { + JsonObject js = Json.createObject(); + js.put("url", url); + Optional.ofNullable(getAnchor()).ifPresent(value -> { + js.put("anchor", JsonIconUtils.getPointJson(value)); + }); + Optional.ofNullable(getLabelOrigin()).ifPresent(value -> { + js.put("labelOrigin", JsonIconUtils.getPointJson(value)); + }); + Optional.ofNullable(getOriginPoint()).ifPresent(value -> { + js.put("originPoint", JsonIconUtils.getPointJson(value)); + }); + Optional.ofNullable(getSize()).ifPresent(value -> { + js.put("size", value.getSizeJson()); + }); + Optional.ofNullable(getScaledSize()).ifPresent(value -> { + js.put("scaledSize", value.getSizeJson()); + }); + return js; + } + +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Size.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Size.java new file mode 100644 index 0000000..f08c7de --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Size.java @@ -0,0 +1,56 @@ +/*- + * #%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 elemental.json.Json; +import elemental.json.JsonObject; +import java.io.Serializable; +import lombok.AllArgsConstructor; +import lombok.Getter; +import lombok.Setter; + +/** + * Two-dimensional size, where width is the distance on the x-axis, and height is the distance on + * the y-axis. + */ +@Getter +@Setter +@AllArgsConstructor +@SuppressWarnings("serial") +public class Size implements Serializable { + + /** + * The width along the x-axis, in pixels. + */ + private Double width; + + /** + * The height along the y-axis, in pixels. + */ + private Double height; + + protected JsonObject getSizeJson() { + JsonObject sizeJs = Json.createObject(); + sizeJs.put("width", width); + sizeJs.put("height", height); + return sizeJs; + } +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Symbol.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Symbol.java new file mode 100644 index 0000000..5b6fbca --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/Symbol.java @@ -0,0 +1,124 @@ +/*- + * #%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.googlemaps.util.JsonIconUtils; +import elemental.json.Json; +import elemental.json.JsonObject; +import java.util.Optional; +import lombok.Getter; +import lombok.NonNull; +import lombok.RequiredArgsConstructor; +import lombok.Setter; + +/** + * Describes a symbol, which consists of a vector path with styling. A symbol can be used as the + * icon of a marker, or placed on a polygon or polyline. + */ +@Getter +@Setter +@RequiredArgsConstructor +public class Symbol implements GoogleMapIcon { + + /** + * A custom path expressed using SVG path notation. Required. + */ + @NonNull + private String path; + + /** + * The position of the symbol relative to the marker or polyline. The coordinates of the symbol's + * path are translated left and up by the anchor's x and y coordinates respectively. The position + * is expressed in the same coordinate system as the symbol's path. + */ + private GoogleMapPoint anchor; + + /** + * The origin of the label relative to the origin of the path, if label is supplied by the marker. + * The origin is expressed in the same coordinate system as the symbol's path. This property is + * unused for symbols on polylines. + */ + private GoogleMapPoint labelOrigin; + + /** + * The symbol's fill color. + */ + private String fillColor; + + /** + * The symbol's fill opacity. + */ + private Double fillOpacity; + + /** + * The angle by which to rotate the symbol, expressed clockwise in degrees. + */ + private Double rotation; + + /** + * The amount by which the symbol is scaled in size. + */ + private Double scale; + + /** + * The symbol's stroke color. + */ + private String strokeColor; + + /** + * The symbol's stroke opacity. + */ + private Double strokeOpacity; + + /** + * The symbol's stroke weight. + * + */ + private Double strokeWeight; + + public Symbol(String path, String strokeColor, String fillColor, Double fillOpacity) { + this(path); + this.strokeColor = strokeColor; + this.fillColor = fillColor; + this.fillOpacity = fillOpacity; + } + + @Override + public JsonObject getJson() { + JsonObject js = Json.createObject(); + js.put("path", path); + Optional.ofNullable(getAnchor()).ifPresent(value -> { + js.put("anchor", JsonIconUtils.getPointJson(value)); + }); + Optional.ofNullable(getLabelOrigin()).ifPresent(value -> { + js.put("labelOrigin", JsonIconUtils.getPointJson(value)); + }); + Optional.ofNullable(getFillColor()).ifPresent(value -> js.put("fillColor", value)); + Optional.ofNullable(getFillOpacity()).ifPresent(value -> js.put("fillOpacity", value)); + Optional.ofNullable(getRotation()).ifPresent(value -> js.put("rotation", value)); + Optional.ofNullable(getScale()).ifPresent(value -> js.put("scale", value)); + Optional.ofNullable(getStrokeColor()).ifPresent(value -> js.put("strokeColor", value)); + Optional.ofNullable(getStrokeOpacity()).ifPresent(value -> js.put("strokeOpacity", value)); + Optional.ofNullable(getStrokeWeight()).ifPresent(value -> js.put("strokeWeight", value)); + return js; + } + +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/googlemaps/util/JsonIconUtils.java b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/util/JsonIconUtils.java new file mode 100644 index 0000000..f90c5f3 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/googlemaps/util/JsonIconUtils.java @@ -0,0 +1,35 @@ +/*- + * #%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.util; + +import com.flowingcode.vaadin.addons.googlemaps.GoogleMapPoint; +import elemental.json.Json; +import elemental.json.JsonObject; + +public class JsonIconUtils { + + public static JsonObject getPointJson(GoogleMapPoint point) { + JsonObject pointJs = Json.createObject(); + pointJs.put("x", point.getLongitude()); + pointJs.put("y", point.getLatitude()); + return pointJs; + } +} diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/CustomizedMarkerIconsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/CustomizedMarkerIconsDemo.java new file mode 100644 index 0000000..e6c5ada --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/CustomizedMarkerIconsDemo.java @@ -0,0 +1,67 @@ +/*- + * #%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.router.PageTitle; +import com.vaadin.flow.router.Route; + +@PageTitle("Customized Marker Icons Demo") +@DemoSource +@Route(value = "googlemaps/markericons", layout = GooglemapsDemoView.class) +@SuppressWarnings("serial") +public class CustomizedMarkerIconsDemo extends AbstractGoogleMapsDemo { + + @Override + protected void createGoogleMapsDemo(String apiKey) { + GoogleMap gmaps = new GoogleMap(apiKey, null, null); + gmaps.setMapType(MapType.ROADMAP); + gmaps.setSizeFull(); + gmaps.setCenter(new LatLon(-31.635175, -60.698405)); + gmaps.setZoom(16); + + // marker ONLY using an url for the marker's icon image + gmaps.addMarker("Marker with only an URL as icon", gmaps.getCenter(), false, + "https://www.flowingcode.com/wp-content/uploads/2020/06/FCMarker.png"); + + // marker using a MarkerIcon, url icon image + customization + MarkerIcon markerIcon = new MarkerIcon(Markers.GREEN); + markerIcon.setAnchor(new GoogleMapPoint(15.0, 10.0)); + gmaps.addMarker(new GoogleMapMarker("Marker with MarkerIcon defining url and anchor points", + new LatLon(-31.636027, -60.703253), false, markerIcon)); + + // marker using a Symbol, svg path for the icon's image + customization + Symbol symbol = new Symbol( + "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"); + symbol.setFillColor("purple"); + symbol.setFillOpacity(1.0); + symbol.setAnchor(new GoogleMapPoint(20.0, -0.5)); + symbol.setRotation(180.0); + symbol.setScale(1.5); + gmaps.addMarker(new GoogleMapMarker( + "Marker with Symbol defining path, anchor points, rotation, scale, fill color and fill opacity", + new LatLon(-31.637307, -60.695934), false, symbol)); + + add(gmaps); + } + +} diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapsDemo.java index eeecb3e..87d0778 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapsDemo.java @@ -80,7 +80,9 @@ protected void createGoogleMapsDemo(String apiKey) { new GoogleMapPoint(gmaps.getCenter().getLat() - 1, gmaps.getCenter().getLon()), new GoogleMapPoint(gmaps.getCenter().getLat(), gmaps.getCenter().getLon() + 1))); gmp.setClosed(false); - gmp.setIcons(new Icon("M -2,0 0,-2 2,0 0,2 z", "#F00", "#FF0", 1, 25)); + + gmp.setIcons(new IconSequence(new Symbol("M -2,0 0,-2 2,0 0,2 z", "#F00", "#FF0", 1.0), "25px")); + gmp.addClickListener(e -> Notification.show("Polygon clicked")); // add button to show center coordinates 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 d6c7cf8..9076078 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GooglemapsDemoView.java @@ -45,6 +45,7 @@ public GooglemapsDemoView() { addDemo(TiltAndRotationDemo.class); addDemo(ClusteringWithCustomRendererDemo.class); addDemo(PolylinesDemo.class); + addDemo(CustomizedMarkerIconsDemo.class); setSizeFull(); } }