Vector Layer Style Not Applying on Mobile (But Works on Desktop)

[Mabuela Ngulube]

Hi all,

I'm running into a styling issue with vector layers in MapStore and would appreciate some help.

I'm dynamically adding a vector layer with a geostyler style using code (see snippet below). On desktop, the custom style (red fill and outline) is correctly applied. However, on mobile devices, the vector initially appears with the default blue styling, and then disappears from the map — even though it still shows:

• In the Table of Contents (TOC)

• In the layer legend

• In the Redux store's layers state

Here is the code I’m using:Here is the code I’m using:

useEffect(() => {
  habsArea &&
    dispatch(
      addLayer({
        id: uuid(),
        title: habsAreaTitle,
        type: "vector",
        features: habsArea.features,
        visibility: true,
        style: {
          format: "geostyler",
          body: {
            name: "Blue Polygon Style",
            rules: [
              {
                name: "Polygon Rule",
                symbolizers: [
                  {
                    kind: "Fill",
                    color: "#FF0000",
                    opacity: 0.4,
                    outlineColor: "#FF0000",
                    outlineWidth: 2,
                  },
                ],
              },
            ],
          },
        },
      })
    );
}, [habsArea]);

Has anyone encountered something similar? Could this be a rendering or parser issue specific to mobile (Leaflet)?
I'm attaching a video example that shows the behavior in action. At 00:01, the vector appears for a moment, then disappears.

Thanks in advance!

[Mabuela Ngulube]

Hi again,

I wanted to follow up on an issue I posted a few weeks ago regarding vector layer styling not working properly on mobile in MapStore.

After more investigation, I've discovered that:

• When I add a vector layer using either new.json or programmatically via addLayer, the custom GeoStyler-based styling works perfectly on desktop.

• On mobile devices, however, the vector layer does not render at all—despite being visible in the TOC, legend, and Redux state.

• Oddly, if I intentionally use an invalid or malformed style, the vector does show on mobile, but with the default fallback styling (e.g., blue).

• Vector layers coming from GeoServer (e.g., WFS with SLD styling) render fine on mobile, so this issue seems specific to client-side vector layers with GeoStyler styles.

Here's an example of the valid style that renders on desktop but not on mobile:

{
  "type": "vector",
  "features": [],

  "style": {
    "format": "geostyler",
    "body": {

      "name": "My Style",
      "rules": [
        {
          "name": "My Rule",
          "symbolizers": [
            {
              "kind": "Line",
              "color": "#3075e9",
              "opacity": 1,
              "width": 2
            }
          ]
        }
      ]
    }
  }
}

This makes me wonder if there’s a limitation or bug in the GeoStyler parser or rendering logic on mobile (possibly with Leaflet).

Has anyone else experienced this? I’d really appreciate any confirmation or workarounds.