feat(demo): add example demo for custom renderer

Author: paodb

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);    
+  }
+
+}

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();
   }
 }

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(`
+	    <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+    		<circle cx="120" cy="120" opacity=".9" r="70" />    
+  		</svg>`);
+
+		// 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);
+	}
+}