Marker label className property not applying styles #159

Activity

1. paodb

   added this to Flowing Code Addonson Aug 21, 2025
2. github-project-automation

   moved this to Inbox (needs triage) in Flowing Code Addonson Aug 21, 2025
3. javier-godoy commented on Aug 25, 2025

   

   javier-godoy

   on Aug 25, 2025

   Contributor

   More actions

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

   👍React with 👍1Reacted by Paola De Bartolo
4. javier-godoy

   moved this from Inbox (needs triage) to To Do in Flowing Code Addonson Aug 25, 2025
5. paodb

   self-assigned this

   on Aug 25, 2025
6. paodb commented on Aug 25, 2025

   

   paodb

   on Aug 25, 2025

   MemberAuthor

   More actions

   I've created FlowingCode/google-map#38 in order to address the themable upgrade in the web-component.
7. paodb commented on Sep 23, 2025

   

   paodb

   on Sep 23, 2025

   Last edited by paodb

   MemberAuthor

   More actions

   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.

   👍React with 👍1Reacted by Javier Godoy
8. paodb

   moved this from To Do to Under consideration in Flowing Code Addonson Sep 23, 2025