I try moving my mapbox code into the react framework. But when I use the setPaintProperty()
, I got the error Error: layers.state-2d.paint.fill-color: color expected, array found
. Here is my code.
{
"name": "basic",
"version": "0.0.0",
"scripts": {
"start": "react-scripts start"
},
"devDependencies": {
"react-scripts": "^1.0.17"
},
"dependencies": {
"mapbox-gl": "^1.3.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css' rel='stylesheet'>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='app'></div>
<script src='https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js'></script>
</body>
</html>
componentDidMount() {
this.map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/dark-v9',
center: [5, 34],
zoom: 1.5
});
this.map.on('load', () => {
this.map.addSource("state-population", {
'type': 'vector',
'url': sourceMatch["state-population"]
});
this.map.addLayer({
'id': "state-2d",
'source': "state-population",
'source-layer': 'states',
'maxzoom': zoomThreshold[0],
'type': 'fill',
'layout': {
'visibility': 'visible'
},
'paint': {"fill-opacity":0.8 }
}, 'waterway-label');
});
this.addColor();
}
addColor = () => {
let fillstyle = ["match", ['get', 'KeyIndex'], 32, "#DA6436", 33, "#C22E00", 34, "#B2DCDF", 35, "#F8C0AA", "#636363"];
this.map.on("moveend",() => {
this.map.setPaintProperty("state-2d", "fill-color", fillstyle ); // not working
this.map.setPaintProperty("state-2d", "fill-color", "#DA6436" ); // working
});
}