I am facing a problem using the 'fill-opacity-transition' in Mapbox GL JS. Maybe someone has an idea what the mistake could be?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add GeoJSON Flood Polygons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2xrMTg0IiwiYSI6ImNqcWlkcDRzMzBkZmc0OW55eDR4cTM4YXQifQ.zPkBQsqBwXVfMZLlsRq7AQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [7.5, 50.5],
zoom: 5
});
map.on('load', function () {
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
"name": "Flood_2017_GEOJSON",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4030" } },
'features': [
{
'type': 'Feature',
"properties": {
"ID": 4433,
"GlideNumbe": null,
"Country": "Germany",
"OtherCount": null,
"long": 9.583276,
"lat": 54.705274,
"Area": 18991.845394600001,
"Began": "2017-01-02",
"Ended": "2017-01-05",
"Validation": "News",
"Dead": 0,
"Displaced": 0,
"MainCause": "Winter Storm Axel",
"Severity": 1.5
},
'geometry': {
'type': 'MultiPolygon',
'coordinates': [ [ [
[ 13.532608, 54.306792 ],
[ 13.33466, 53.662268 ],
[ 10.414927, 53.415802 ],
[ 9.425187, 54.457616 ],
[ 9.227239, 55.251098 ],
[ 9.524161, 55.994746 ],
[ 9.920057, 55.944961 ],
[ 9.623135, 54.953381 ],
[ 10.019031, 54.407731 ],
[ 10.761336, 54.109839 ],
[ 11.058258, 53.911344 ],
[ 12.493381, 54.009796 ],
[ 13.532608, 54.306792 ]
] ] ]
}
},
{
"type": "Feature",
"properties": {
"ID": 4487,
"GlideNumbe": null,
"Country": "Chile",
"OtherCount": null,
"long": -70.99118,
"lat": -33.418779,
"Area": 71430.431284100006,
"Began": "2017-06-14",
"Ended": "2017-06-20",
"Validation": "News",
"Dead": 4,
"Displaced": 50,
"MainCause": "Heavy Rain",
"Severity": 1.0
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [ [ [
[ -70.248875, -31.187761 ],
[ -70.347849, -30.691847 ],
[ -70.149901, -32.477059 ],
[ -70.050927, -33.766357 ],
[ -70.644771, -36.146209 ],
[ -71.931433, -35.550525 ],
[ -71.733485, -34.360549 ],
[ -71.337589, -30.691349 ],
[ -70.248875, -31.187761 ]
] ] ]
}
},
{
"type": "Feature",
"properties": {
"ID": 4491,
"GlideNumbe": null,
"Country": "France",
"OtherCount": null,
"long": 3.338286,
"lat": 45.485499,
"Area": 45514.498247099997,
"Began": "2017-06-13",
"Ended": "2017-06-15",
"Validation": "News",
"Dead": 1,
"Displaced": 160,
"MainCause": "Torrential Rain",
"Severity": 2.0
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [ [ [
[ 5.070331, 45.137548 ],
[ 2.497008, 44.246285 ],
[ 1.606242, 46.230191 ],
[ 4.278539, 46.724713 ],
[ 5.070331, 45.137548 ]
] ] ]
}
}
]
}
},
'layout': {},
'paint': {
'fill-color': [
'interpolate',
['linear'],
['number', ['get', 'Severity']],
1.0, 'rgb(246, 249, 24)',
1.5, 'rgb(216, 0, 0)',
2.0, 'rgb(229, 0, 206)'
],
'fill-opacity': 0,
'fill-opacity-transition': {duration: 2000}
}
});
});
// so after the map is initialized we call a function which rund as example after 3 seconds and set the opacity value to 0.8
// the circle-opacity-transition is set as 2000, what means that changes to this value takes 2 seconds
setTimeout(function() {
map.setPaintProperty('geojson', 'fill-opacity', 0.8);
},
3000
);
</script>
</body>
</html>
My polygons are not fading in after the defined 2 seconds.
Best Answer
Your example is not working because you need to specify the correct layer for
map.setPaintProperty(maineinstead ofgeojson).Docs: https://www.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty