CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
ekatz
ekatz

Reputation: 1070

Mapbox - sourced vector file unable to add fill color

The code below works without fill-color and renders the imported vectors. However, adding fill-color causes nothing to be rendered. I've tried changing type to fill but I still get nothing rendered with a fill-color. The tileset is composed of geojsons Polygons that were imported into Mapbox studio tilesets.

map.addLayer({ id: 'zip-codes', type: 'line', source: { type: 'vector', url: 'mapbox://<tilesetid>', }, 'source-layer': 'original', layout: { 'line-join': 'round', 'line-cap': 'round', }, paint: { 'line-color': 'green', 'line-width': 10, 'fill-color': 'red', }, });

Upvotes: 0

Views: 1234

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126295

A polygon layer in Mapbox-GL-JS is either a fill or a line, not both. If it's fill it only contains fill-* properties. If it's line, it only contains line- properties.

So if you want filled polygons, you probably want something like:

map.addLayer({
    id: 'zip-codes',
    type: 'fill',
    source: {
      type: 'vector',
      url: 'mapbox://<tilesetid>',
    },
    'source-layer': 'original',
    paint: {
      'fill-color': 'red',
    },
  });

If you want to control both fill and border, you need two separate layers: one with type fill and one with type line.

Upvotes: 4

Related Questions