Q: how to add "fade in" transition effect for Mapbox circle layer

You are on the right track with the paint properties. I think what you need is the circle-opacity-transition.

Follow these steps:

  1. Add the points with 'circle-opacity': 0 as default opacity value
  2. Set the 'circle-opacity-transition' as you wish

  3. After the map is loaded change the layers 'circle-opacity' to 1 and your layer will be faded in.

    map.addLayer({
  "id": "point",
  "source": "point",
  "type": "circle",
  "paint": {
    "circle-radius": 20,
      // here we define defaut opacity is zero
      "circle-opacity": 0,
      "circle-opacity-transition": {duration: 2000},
      "circle-color": 'red'
      }
});

You can check out this solution here: codepen


Joel's answer was perfect but the timeout has to be places inside the map load function else the circle layer will not be loaded if the map takes more time to load

Checkout the below code snippet

mapboxgl.accessToken = 'pk.eyJ1Ijoiam9lbHN0dWVkbGUiLCJhIjoiY2ltbmI1OWNpMDAxNnV1bWFtMnpqYWJndyJ9.uDWVjgzU7EVS63OuVWSRuQ';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  center: [7.445683, 46.945966], // starting position
  zoom: 9 // starting zoom
});

// the data we'll add as 'points'
var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "timestamp": "0",
      "location-name": "Bern"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [7.445683, 46.945966]
    }
  }]
}

// so if the map loads do the following
map.on('load', function() {

  // add the data source with the information for the point
  map.addSource('point', {
    "type": "geojson",
    "data": data
  });


  map.addLayer({
    "id": "point",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-radius": 20,
      // here we define defaut opacity is zero
      "circle-opacity": 0,
      "circle-opacity-transition": {
        duration: 1500
      },
      "circle-color": 'red'
    }
  });
  //Timeout shoud be within the map load function
  setTimeout(function() {
    map.setPaintProperty('point', 'circle-opacity', 1);
  }, 1);
});
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title></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.36.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.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>

</body>

</html>

Tags:

Mapbox

Mapbox Gl Js

Mapbox Gl

Recent Posts