Text field of GeoJSON symbol layer not visible

[mschefer]

If you add a symbol layer with a "text-field" to the map immediately after the load event is fired, the text field is not visible if the language parameter is set on the map. The issue may be some kind of race condition, because if the layer is added with a short delay (~50ms) after the load event, the text field is visible. If the language parameter is undefined the issue does not occur.

The following example can be used to reproduce the issue:

const map = new Map({
  apiKey: "my-key",
  center: [8.539, 47.36],
  zoom: 15,
  container: "my-container",
  style: "bright-v2",
  language: "name:en",
});

map.on("load", () => {
  map.addSource("my-source", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [8.539, 47.36],
      },
    },
  });

  map.addLayer({
    id: "example-text",
    type: "symbol",
    source: "my-source",
    layout: {
      "text-field": "Hello, World",
      "text-font": ["Open Sans Semibold"],
    },
  });
});

[jonathanlurie]

Hello @mschefer thanks for pointing out this issue, I'll look into it and let you know.

[jonathanlurie]

Hello again @mschefer , as I was investigating it, I found the issue, but it is not solved yet. In the meantime, I can suggest a temporary workaround that consists in moving the language setting from the constructor to the beginning of the load callback:

const map = new Map({
  apiKey: "my-key",
  center: [8.539, 47.36],
  zoom: 15,
  container: "my-container",
  style: "bright-v2",
});

map.on("load", () => {
  map.setLanguage("name:en");

  // You can also use the language enum:
  // map.setLanguage(maptilersdk.Language.ENGLISH);

  map.addSource("my-source", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [8.539, 47.36],
      },
    },
  });

  map.addLayer({
    id: "example-text",
    type: "symbol",
    source: "my-source",
    layout: {
      "text-field": "Hello, World",
      "text-font": ["Open Sans Semibold"],
    },
  });
});

I will try to come up with a more elegant solution for our next release, this week or the next.

[mschefer]

Ok, thank you.

[jonathanlurie]

Hello @mschefer , the version 2 of the SDK is now published and contains the fix. Be aware that this version is also an update with MapLibre v4 that is a major update with many callback logic replaced by async/await so it may impact your app.