Map with custom markers and data-bound colors

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can use Graphics elements with SVG paths as map markers on a MapPointSeries, custom-colored using "template fields".

Related code

var bulletTemplate = am5.Template.new({
  fill: am5.color(0xe6e6e6)
});

pointSeries.bullets.push(function() {
  var pin = am5.Graphics.new(root, {
    width: 24,
    height: 24,
    tooltipY: 0,
    centerX: am5.p50,
    centerY: am5.p100,
    svgPath: "M12,1a9,9,0,0,0-9,9c0,8,9,13,9,13s9-5,9-13A9,9,0,0,0,12,1Zm0,13a4,4,0,1,1,4-4A4,4,0,0,1,12,14Z",
    stroke: am5.color(0xffffff),
    strokeOpacity: 0.5,
    templateField: "bulletSettings",
    tooltipText: "{title}",
    cursorOverStyle: "pointer"
  }, bulletTemplate);

  return am5.Bullet.new(root, {
    sprite: pin
  });
});

var bulletTemplate = am5.Template.new({
  fill: am5.color(0xe6e6e6)
});

pointSeries.bullets.push(function() {
  var pin = am5.Graphics.new(root, {
    width: 24,
    height: 24,
    tooltipY: 0,
    centerX: am5.p50,
    centerY: am5.p100,
    svgPath: "M12,1a9,9,0,0,0-9,9c0,8,9,13,9,13s9-5,9-13A9,9,0,0,0,12,1Zm0,13a4,4,0,1,1,4-4A4,4,0,0,1,12,14Z",
    stroke: am5.color(0xffffff),
    strokeOpacity: 0.5,
    templateField: "bulletSettings",
    tooltipText: "{title}",
    cursorOverStyle: "pointer"
  }, bulletTemplate);

  return am5.Bullet.new(root, {
    sprite: pin
  });
});

Demo

See the Pen Map with custom markers and data-bound colors by amCharts team (@amcharts) on CodePen.