JavsScript SDK: Style Layer Line-Width Not Working

Here is my function that generates a layer:

const buildLayer = (layerId, coordinates) => {
  const layer = {
    id: layerId,
    type: "fill",
    layout: {
      visibility: "visible",
    },
    paint: {
      "line-width": 3,
      "fill-color": "#35FF7C",
      "fill-opacity": 0.35,
      "fill-outline-color": "#000000",
    },
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: coordinates,
        },
      },
    },
  };
  return layer;
};

It failes on this line:
“line-width”: 3,

index.js:1446 Error: layers._8546.paint.line-width: unknown property “line-width”
at Object.Ln [as emitValidationErrors] (maps.min.js:6939)
at De (maps.min.js:20348)
at r._validate (maps.min.js:21104)
at r.addLayer (maps.min.js:20820)
at i.addLayer (maps.min.js:24984)
at t.addLayer (maps.min.js:34745)
at _callee5$ (App.js:359)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:288)
at Generator.prototype. [as next] (runtime.js:114)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)

What I’m trying to do: May the region boundary line thicker. If this is the wrong way to do it, please show me the correct way.

Thanks!

Okay. I just figured out that the “line-width” works if the TYPE is “line” instead of “fill”.

My next step is to create two layers. One for the fill and one for the line.

Question: Is there an easier way to thicken the fill boundary line?

Hi.

I think that you can check our latest Traffic tutorial. It will be published very soon. The source code is already available on GitHub: https://github.com/tomtom-international/traffic-tutorial-web-sdk. One of it’s features is drawing a rectangle so it might be helpful for you.

Regards,
Mateusz

1 Like

Thanks for the assist. For now, I’m going with this solution:

/* #region buildLayer  */
const buildFillLayer = (layerId, coordinates) => {
  const layer = {
    id: layerId,
    type: "fill",
    layout: {
      visibility: "visible",
    },
    paint: {
      "fill-color": "#35FF7C",
      "fill-opacity": 0.35,
      "fill-outline-color": "#000000",
    },
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: coordinates,
        },
      },
    },
  };
  return layer;
};

const buildLineLayer = (layerId, coordinates) => {
  const layer = {
    id: layerId,
    type: "line",
    layout: {
      visibility: "visible",
    },
    paint: {
      "line-width": 1,
      "line-color": "#000000",
    },
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: coordinates,
        },
      },
    },
  };
  return layer;
};
/* #endregion buildLayer  */

In the main, I call my API to get the polygons, then I build the layers and add them to the map. I need to keep track of the layer IDs because this application needs to remove them if another location is selected.

Results

Looks OK.
One tip - you could extract source, as it is common for both.

1 Like