0

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.

0

Your example is not working because you need to specify the correct layer for map.setPaintProperty (maine instead of geojson).

setTimeout(function() {
      map.setPaintProperty('maine', 'fill-opacity', 0.8);
        }, 
        3000
    );

Docs: https://www.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.