CODEWITHSUNDEEP
mapbox-gl-js
astrojams1
astrojams1

Reputation: 1591

Modify layer colors of mapbox style using setPaintProperty

I am using Mapbox's outdoor v10 as my base map style. I am trying to update colors of specific layers but am running into errors.

I would expect this to update the roads to be red...

var map = new mapboxgl.Map({
  container: this.mapContainer,
  center: homePoint.geometry.coordinates,
  style: 'mapbox://styles/mapbox/outdoors-v10',
  interactive: false,
});    

map.on('load', function () {
  map.setPaintProperty('road-primary','fill-color', 'rgb(255,0,0)')
}

But then I get this error:

enter image description here

Upvotes: 1

Views: 2773

Answers (1)

Scarysize
Scarysize

Reputation: 4291

The road-primary layer included in the outdoor style is of type line. So your setPaintProperty call should modify the line-color instead of the fill-color:

map.setPaintProperty('road-primary', 'line-color', 'rgb(255, 0, 0)');

See the documentation here: https://www.mapbox.com/mapbox-gl-js/style-spec#paint-line-line-color

Upvotes: 2

Related Questions