Marker label className property not applying styles

[paodb]

Describe the bug

This issue is related to the recently merged feature that introduced support for marker labels.

Currently, the new className property on labels does not work as expected. Even if a className is set, styles defined in the theme or external CSS are not applied because the label element is rendered inside the shadow DOM and is not exposed for styling (see #157 for more details).

Expected behavior

Styles defined for the className should apply to the marker label.

Minimal reproducible example

Steps to reproduce the issue:
1 - Add a marker with a label and set a className for it

GoogleMapMarker marker = new GoogleMapMarker("New Marker", gmaps.getCenter(), true, Markers.PURPLE);
MarkerLabel label = new MarkerLabel(labelText.getValue());
label.setColor("white");
label.setClassName("my-label-class-name");
marker.setLabel(label);
gmaps.addMarker(marker);

2 - Define styles in your theme for that class or main stylesheet. For example:

.my-label-class-name {
  background-color: blue;
}

3 - Observe that styles are not applied to the label.

Add-on Version

2.3.0-SNAPSHOT

Vaadin Version

24.8.x

Additional information

When tested in the JSFiddle example given in the documentation, the feature works as expected.

[javier-godoy]

Web component is not themable https://github.com/FlowingCode/google-map/blob/1d860d53cde0a42247168c8ae300e98fcd47f838/google-map.js#L62

[paodb]

I've created FlowingCode/google-map#38 in order to address the themable upgrade in the web-component.

[paodb]

As explained in FlowingCode/google-map#38, making the Google Maps web component themable via ThemableMixin would require a non-trivial upgrade to a specific Vaadin version. Because of this, providing a direct fix for the marker label clasname issue is not a simple task and further investigation would be needed, However, we can suggest alternative workarounds to address the issue in the meantime.

For example, given a marker defined like this:

GoogleMapMarker myMarker = new GoogleMapMarker("My marker", new LatLon(-31.620173186615883, -60.67964404821396), true);
    MarkerLabel label = new MarkerLabel("A");
    label.setColor("white");
    label.setFontWeight("bold");
    label.setClassName("my-label-classname");
    myMarker.setLabel(label);
    gmaps.addMarker(myMarker);

Option 1: Inject styles directly through JavaScript

gmaps.getElement().executeJs("const labelStyle = document.createElement('style'); labelStyle.innerHTML='.' + $0 + '{text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000, 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;}'; this.shadowRoot.appendChild(labelStyle);", label.getClassName());

This approach injects the CSS directly into the shadow root at runtime. It's quick to implement and works well for dynamic styling, but the style is not reusable.

Option 2: Using a CSS file

1 - Define the style rule in a CSS file (e.g., src/main/resources/META-INF/resources/marker-label-styles.css):

.my-label-classname {
  text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000, 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
}

2 - Inject it into the shadow root via Java code:

gmaps.getElement().executeJs(
      "fetch($1)" +
      "  .then(r => r.text())" +
      "  .then(css => {" +
      "    const style = document.createElement('style');" +
      "    style.textContent = css;" +
      "    this.shadowRoot.appendChild(style);" +
      "  });",
      gmaps,
      "marker-label-styles.css" // the name of my css file containing the styling rule
  );

This approach keeps the styles in a separate CSS file, making them reusable and easier to maintain. It's slightly more setup than Option 1, but it's better if you have multiple markers or need consistent styling across your project.