Fix handling of iconSize

Fixes #246

See also Leaflet/Leaflet#4238

Author: AB-xdev

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## 3.0.1
+* Fixed ``divIcon`` being displayed incorrectly [due to a default ``iconSize`` of ``12px``](https://github.com/Leaflet/Leaflet/issues/4238) #246
 * Updated dependencies
   * Updated leaflet to [``1.9.4``](https://github.com/Leaflet/Leaflet/blob/b6b56f6e707142c177fad2f67827a5007e56736a/CHANGELOG.md#194-2023-05-18) #247
 

vaadin-maps-leaflet-flow/src/main/java/software/xdev/vaadin/maps/leaflet/flow/data/LDivIcon.java

@@ -30,13 +30,13 @@ public LDivIcon()
 
 	/**
 	 * <b>Ensure that you escape the html properly so that you don't accidentally introduce Serverside XSS</b>
-	 *
-	 * @param html
 	 */
 	public LDivIcon(final String html)
 	{
 		this.setHtml(html);
 		this.setIconAnchor(0, 0);
+		// https://github.com/Leaflet/Leaflet/issues/4238
+		this.setIconSize(null);
 	}
 
 	public String getClassName()
@@ -46,8 +46,6 @@ public String getClassName()
 
 	/**
 	 * Sets a className for CSS formating.
-	 *
-	 * @param className
 	 */
 	public void setClassName(final String className)
 	{
@@ -63,8 +61,6 @@ public String getHtml()
 	 * Custom HTML code to put inside the div element, empty by default. Alternatively, an instance of HTMLElement.
 	 * <br/>
 	 * <b>Ensure that you escape the html properly so that you don't accidentally introduce Serverside XSS</b>
-	 *
-	 * @param html
 	 */
 	public void setHtml(final String html)
 	{

vaadin-maps-leaflet-flow/src/main/java/software/xdev/vaadin/maps/leaflet/flow/data/LIcon.java

@@ -18,7 +18,9 @@
 
 
 import java.util.ArrayList;
+import java.util.Collection;
 import java.util.List;
+import java.util.Optional;
 
 import com.fasterxml.jackson.annotation.JsonInclude;
 import com.fasterxml.jackson.annotation.JsonInclude.Include;
@@ -28,8 +30,8 @@ public class LIcon
 {
 	private String iconUrl;
 
-	@JsonInclude(Include.NON_EMPTY)
-	private final List<Integer> iconSize = new ArrayList<>();
+	@JsonInclude(value = Include.CUSTOM, valueFilter = IconSizeFilter.class)
+	private List<Integer> iconSize = new ArrayList<>();
 	private final List<Integer> iconAnchor = new ArrayList<>();
 	private final List<Integer> popupAnchor = new ArrayList<>();
 	private String shadowUrl;
@@ -68,8 +70,6 @@ public String getIconUrl()
 
 	/**
 	 * Sets a icon url.
-	 *
-	 * @param iconUrl
 	 */
 	public void setIconUrl(final String iconUrl)
 	{
@@ -83,15 +83,15 @@ public List<Integer> getIconSize()
 
 	/**
 	 * Icon size with x, y in px
-	 *
-	 * @param x
-	 * @param y
 	 */
 	public void setIconSize(final int x, final int y)
 	{
-		this.iconSize.clear();
-		this.iconSize.add(x);
-		this.iconSize.add(y);
+		this.setIconSize(new ArrayList<>(List.of(x, y)));
+	}
+	
+	public void setIconSize(final List<Integer> iconSize)
+	{
+		this.iconSize = iconSize;
 	}
 
 	public List<Integer> getIconAnchor()
@@ -101,9 +101,6 @@ public List<Integer> getIconAnchor()
 
 	/**
 	 * Anchor point of the icon in x, y px.
-	 *
-	 * @param x
-	 * @param y
 	 */
 	public void setIconAnchor(final int x, final int y)
 	{
@@ -119,9 +116,6 @@ public List<Integer> getPopupAnchor()
 
 	/**
 	 * Anchor point of the Pop-up message in x,y px.
-	 *
-	 * @param x
-	 * @param y
 	 */
 	public void setPopupAnchor(final int x, final int y)
 	{
@@ -164,4 +158,28 @@ public void setShadowAnchor(final int x, final int y)
 		this.shadowAnchor.add(x);
 		this.shadowAnchor.add(y);
 	}
+	
+	public static class IconSizeFilter
+	{
+		@SuppressWarnings("java:S1206") // Filter only uses equals
+		@Override
+		public boolean equals(final Object obj)
+		{
+			// true = filter out; false = keep
+			
+			// Null is allowed
+			if(obj == null)
+			{
+				return false;
+			}
+			
+			// Filter out empty collection
+			return Optional.of(obj)
+				.filter(Collection.class::isInstance)
+				.map(Collection.class::cast)
+				.map(Collection::isEmpty)
+				// Wrong type (not a collection)
+				.orElse(true);
+		}
+	}
 }

vaadin-maps-leaflet-flow/src/main/resources/META-INF/resources/frontend/leaflet/leaflet-custom.css

@@ -1,8 +1,6 @@
 .div-icon {
     background: #fff;
     border: 1px solid #666;
-    height: auto;
-    width: auto;
     padding-left: 5px;
     padding-right: 5px;
     white-space: nowrap;