CODEWITHSUNDEEP
mapboxgeojsonmapbox-gl-js
David
David

Reputation: 825

Mapbox GL JS : Changing polygon border width

I have a simple polygon on a map and I would just like to adjust the border color width. (geoJSON is external) I was unable to find this in the API manual.

This is a link to my example (and source).

Currently my code for styling the polygon is:

'paint': {
'fill-color': 'rgba(60, 120, 40, 0.4)',
'fill-outline-color': 'rgba(20, 100, 25, 1)'
}

What should I add to give the border more width? Are there other style options for simple polygons that I am missing? (Since I can't find the documentation on this.)

I am posting an image below of my issue - basically the border is well defined in the left side of the image, but if the user changes the view angle it becomes hard to see because the width is too small.

geoJSON border issue image

Upvotes: 12

Views: 11210

Answers (1)

stdob--
stdob--

Reputation: 29172

Due to technical reasons for the fill style, you can not specify a border width greater than 1. Use the additional layer with the line style:

  map.addLayer({
    'id': 'states-layer-outline',
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': 'test.js'
    },
    'paint': {
      'line-color': 'rgba(255, 0, 0, 1)',
      'line-width': 4
    }
  });

[ https://jsfiddle.net/tny37kbu/ ]

Upvotes: 22

Related Questions