From 6fa30755618765c152b3b210e063f38514b24bb4 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 21 Sep 2023 12:46:23 -0300 Subject: [PATCH] feat(demo): add example demo for custom renderer --- .../ClusteringWithCustomRendererDemo.java | 72 ++++++++++++++ .../addons/googlemaps/GooglemapsDemoView.java | 1 + .../src/clustering-custom-renderer-example.js | 95 +++++++++++++++++++ 3 files changed, 168 insertions(+) create mode 100644 src/test/java/com/flowingcode/vaadin/addons/googlemaps/ClusteringWithCustomRendererDemo.java create mode 100644 src/test/resources/META-INF/resources/frontend/src/clustering-custom-renderer-example.js diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/ClusteringWithCustomRendererDemo.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/ClusteringWithCustomRendererDemo.java new file mode 100644 index 0000000..5032219 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/ClusteringWithCustomRendererDemo.java @@ -0,0 +1,72 @@ +/*- + * #%L + * Google Maps Addon + * %% + * Copyright (C) 2020 - 2023 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.dependency.JsModule; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@PageTitle("Clustering With Custom Renderer Demo") +@DemoSource +@Route(value = "googlemaps/clustering-custom-renderer", layout = GooglemapsDemoView.class) +@JsModule("./src/clustering-custom-renderer-example.js") +@SuppressWarnings("serial") +public class ClusteringWithCustomRendererDemo extends AbstractGoogleMapsDemo { + + @Override + protected void createGoogleMapsDemo(String apiKey) { + GoogleMap gmaps = new GoogleMap(apiKey, null, null); + gmaps.setMapType(MapType.ROADMAP); + gmaps.setSizeFull(); + gmaps.setZoom(5); + gmaps.setCenter(new LatLon(-31.636036, -60.7055271)); + + gmaps.addMarker("Marker 1", new LatLon(-31.646036, -58.7055290), true, Markers.PURPLE); + gmaps.addMarker("Marker 2", new LatLon(-31.562346, -58.6176364), true, Markers.PURPLE); + gmaps.addMarker("Marker 3", new LatLon(-31.531917, -58.8456027), true, Markers.PURPLE); + gmaps.addMarker("Marker 4", new LatLon(-31.651667, -58.9555557), true, Markers.PURPLE); + + gmaps.addMarker("Marker 5", new LatLon(-30.997815, -68.60542944), false, Markers.BLUE); + gmaps.addMarker("Marker 6", new LatLon(-31.298693, -68.50630836), false, Markers.BLUE); + gmaps.addMarker("Marker 7", new LatLon(-31.878914, -68.28658178), false, Markers.BLUE); + + gmaps.addMarker("Marker 8", new LatLon(-35.138889, -65.95699194), false, Markers.GREEN); + gmaps.addMarker("Marker 9", new LatLon(-35.322683, -65.12203100), false, Markers.GREEN); + gmaps.addMarker("Marker 10", new LatLon(-35.652538, -65.737265381), false, Markers.GREEN); + gmaps.addMarker("Marker 11", new LatLon(-35.512548, -65.565465771), false, Markers.GREEN); + gmaps.addMarker("Marker 12", new LatLon(-35.650638, -65.707366381), false, Markers.YELLOW); + gmaps.addMarker("Marker 13", new LatLon(-35.550638, -65.703360000), false, Markers.YELLOW); + + // enable clustering + gmaps.enableMarkersClustering(); + + /* + * set custom renderer for clustering (see + * /google-maps/src/test/resources/META-INF/resources/frontend/src/clustering-custom-renderer- + * example.js for definition) + */ + gmaps.setClusteringRenderer("customRenderer"); + + add(gmaps); + } + +} 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 716384b..717584a 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(MarkerClusteringDemo.class); addDemo(TiltAndRotationDemo.class); addDemo(RightClickOnMarkersDemo.class); + addDemo(ClusteringWithCustomRendererDemo.class); setSizeFull(); } } diff --git a/src/test/resources/META-INF/resources/frontend/src/clustering-custom-renderer-example.js b/src/test/resources/META-INF/resources/frontend/src/clustering-custom-renderer-example.js new file mode 100644 index 0000000..9e6a53e --- /dev/null +++ b/src/test/resources/META-INF/resources/frontend/src/clustering-custom-renderer-example.js @@ -0,0 +1,95 @@ +/*- + * #%L + * Google Maps Addon + * %% + * Copyright (C) 2020 - 2023 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% + */ +const markerscolors = new Map([ + ["green", "#00e64d"], + ["yellow", "#fdf569"], + ["purple", "#8e67fd"], + ["blue", "#6991fd"] +]); + +window.customRenderer = { + + /* + * Function that contains the custom renderer implementation. + * The function name needs to be "render". + */ + render: function(cluster) { + + // get markers count within cluster + const count = cluster.count; + + // get color to applied to cluster + const color = this._getClusterColor(cluster); + + // create svg url with fill color + const svg = window.btoa(` + + + `); + + // get cluster position + const position = cluster.position; + + // create marker for cluster + return new google.maps.Marker({ + position, + // set icon using defined svg and set size + icon: { + url: `data:image/svg+xml;base64,${svg}`, + scaledSize: new google.maps.Size(75, 75), + }, + // set text, color, and font-size for cluster label + label: { + text: String(count), + color: "rgba(255,255,255,0.9)", + fontSize: "14px", + }, + // adjust zIndex to be above other markers + zIndex: 1000 + count, + }); + }, + + /* + * Returns the color to be applied to thecluster. + * The color is derived from the color of the markers that are part of the cluster. + * The color with more occurrences within the cluster will be the one to be applied. + */ + _getClusterColor(cluster) { + let markersIconsColors = []; + cluster.markers.forEach(m => { + const markerIcon = m.__data.icon; + const startIdx = markerIcon.lastIndexOf('/'); + const endIdx = markerIcon.indexOf('.png'); + const markerColor = markerIcon.substring(startIdx + 1, endIdx); + markersIconsColors.push(markerColor); + }); + + const maxColor = markersIconsColors.reduce((previous, current, _, arr) => { + if (arr.filter((item) => item === previous).length > + arr.filter((item) => item === current).length) { + return previous; + } else { + return current; + } + }); + + return markerscolors.get(maxColor); + } +}