Add Marker's Label

Add an option to display a marker label.

Author: AlexRoig

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
     <artifactId>google-maps</artifactId>
-    <version>2.2.4-SNAPSHOT</version>
+    <version>2.2.5-SNAPSHOT</version>
     <name>Google Maps Addon</name>
     <description>Integration of google-map for Vaadin platform</description>
 

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

@@ -196,6 +196,15 @@ public void setIcon(GoogleMapIcon icon) {
     this.getElement().setPropertyJson("icon", icon.getJson());
   }
 
+    /**
+     * Sets the label of the marker
+     * In order to set the label's position use MarkerIcon::setLabelOrigin property.
+     * @param label the new marker's label.
+     */
+  public void setLabel(MarkerLabel label) {
+    this.getElement().setPropertyJson("label", label.getJson());
+  }
+
   /**
    * Checks if marker animation is enabled.
    *

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

@@ -0,0 +1,78 @@
+package com.flowingcode.vaadin.addons.googlemaps;
+
+import elemental.json.Json;
+import elemental.json.JsonObject;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.Optional;
+
+/**
+ * Class representing a marker label.
+ */
+@Getter
+@Setter
+public class MarkerLabel {
+    /**
+     * The text to be displayed in the label.
+     */
+    private String text;
+
+    /**
+     * Optional. The color of the label text.
+     * Defaults to: <code>'black'</code>
+     */
+    private String color;
+
+    /**
+     * Optional. The font family of the label text (equivalent to the CSS font-family
+     * property).
+     */
+    private String fontFamily;
+
+    /**
+     * Optional. The font size of the label text (equivalent to the CSS font-size
+     * property).
+     * Defaults to: <code>'14px'</code>
+     */
+    private String fontSize;
+
+    /**
+     * Optional. The font weight of the label text (equivalent to the CSS font-weight
+     * property).
+     */
+    private String fontWeight;
+
+    /**
+     The className property of the label's element (equivalent to the
+     element's class attribute). Multiple space-separated CSS classes can
+     be added. The font color, size, weight, and family can only be set via
+     the other properties of <code>MarkerLabel</code>. CSS classes should not
+     be used to change the position nor orientation of the label (e.g. using
+     translations and rotations) if also using <a
+     href="https://developers.google.com/maps/documentation/javascript/examples/marker-collision-management">marker
+     collision management</a>.     */
+    private String className;
+
+
+    public MarkerLabel(String text) {
+        this.text = text;
+    }
+
+    public MarkerLabel(String text, String color, String fontSize) {
+        this.text = text;
+        this.color = color;
+        this.fontSize = fontSize;
+    }
+
+    protected JsonObject getJson() {
+        JsonObject js = Json.createObject();
+        Optional.ofNullable(getText()).ifPresent(value -> js.put("text", value));
+        Optional.ofNullable(getColor()).ifPresent(value -> js.put("color", value));
+        Optional.ofNullable(getFontFamily()).ifPresent(value -> js.put("fontFamily", value));
+        Optional.ofNullable(getFontSize()).ifPresent(value -> js.put("fontSize", value));
+        Optional.ofNullable(getFontWeight()).ifPresent(value -> js.put("fontWeight", value));
+        Optional.ofNullable(getClassName()).ifPresent(value -> js.put("className", value));
+        return js;
+    }
+}

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

@@ -7,9 +7,9 @@
  * 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.
@@ -45,9 +45,18 @@ protected void createGoogleMapsDemo(String apiKey) {
 
     // 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));
+    markerIcon.setAnchor(new GoogleMapPoint(0.0, 0.0));
+    markerIcon.setLabelOrigin(new GoogleMapPoint(0.0, 10.0));
+
+   MarkerLabel label = new MarkerLabel("Flowing Code");
+   label.setColor("blue");
+   label.setFontSize("16px");
+   label.setFontWeight("bold");
+
+   GoogleMapMarker marker = new GoogleMapMarker("Marker with MarkerIcon defining url and anchor points",
+       new LatLon(-31.636027, -60.703253), false, markerIcon);
+    marker.setLabel(label);
+    gmaps.addMarker(marker);
 
     // marker using a Symbol, svg path for the icon's image + customization
     Symbol symbol = new Symbol(
@@ -63,5 +72,5 @@ protected void createGoogleMapsDemo(String apiKey) {
 
     add(gmaps);
   }
-  
+
 }