StyleImageInterface

• data is a Uint8Array of RGBA pixels sized width times height times four.
• render() returning true schedules a texture update for that frame.
• onAdd and onRemove handle setup and teardown of the icon.

var SIZE = 48;

var pulse = {
  width: SIZE,
  height: SIZE,
  data: new Uint8Array(SIZE * SIZE * 4),

  onAdd: function (map) {
    this.map = map;
    this.start = performance.now();
  },

  render: function () {
    var t = (performance.now() - this.start) / 1000;
    var alpha = 0.35 + 0.35 * Math.sin(t * 2.4);
    var r = SIZE / 2 - 2;

    for (var y = 0; y < SIZE; y++) {
      for (var x = 0; x < SIZE; x++) {
        var dx = x - SIZE / 2;
        var dy = y - SIZE / 2;
        var inside = dx * dx + dy * dy <= r * r;
        var i = (y * SIZE + x) * 4;

        this.data[i] = 31;
        this.data[i + 1] = 95;
        this.data[i + 2] = 208;
        this.data[i + 3] = inside ? Math.round(alpha * 255) : 0;
      }
    }

    this.map.triggerRepaint();
    return true;
  },

  onRemove: function () {
    this.map = null;
  }
};

map.addImage('pulse', pulse);

map.addLayer({
  id: 'pulse-layer',
  type: 'symbol',
  source: 'poi',
  layout: {
    'icon-image': 'pulse',
    'icon-size': 0.6,
    'icon-allow-overlap': true
  }
});

• Returning true every frame re-uploads pixels needlessly and hurts performance.
• A data length that disagrees with width and height corrupts the upload.