Icons and fonts

• Point the root sprite path at a JSON index without the .json suffix so MapLibre appends .json and .png.
• Pass { sdf: true } to addImage when icon-color or icon-halo-color must tint the icon.
• Match text-font exactly to the fontstack served by glyphs, such as Noto Sans Regular.

{
  "version": 8,
  "sprite": "https://example.com/styles/basic/sprite",
  "glyphs": "https://example.com/fonts/{fontstack}/{range}.pbf",
  "sources": { /* ... */ },
  "layers": [
    {
      "id": "poi-label",
      "type": "symbol",
      "source": "poi",
      "layout": {
        "icon-image": ["get", "kind"],
        "icon-size": 0.8,
        "text-field": ["get", "name"],
        "text-font": ["Noto Sans Regular"],
        "text-size": 12,
        "text-offset": [0, 1.2]
      }
    }
  ]
}

function makeDot(color) {
  var size = 48;
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  var ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2 - 4, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.lineWidth = 4;
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();

  return ctx.getImageData(0, 0, size, size);
}

map.on('load', function () {
  for (var i = 0; i < 5; i++) {
    map.addImage('dot-' + i, makeDot('#17694a'), { pixelRatio: 2 });
  }

  map.addLayer({
    id: 'dots',
    type: 'symbol',
    source: 'sites',
    layout: {
      'icon-image': ['concat', 'dot-', ['to-string', ['get', 'level']]],
      'icon-size': 0.5,
      'icon-allow-overlap': true
    }
  });
});

• Images added with addImage disappear after setStyle and must be added again.
• Icon names in the sprite are case-sensitive, so one typo silently drops the symbol.