Map with custom markers and data-bound colors

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

TypeScript

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
  });
});

JavaScript

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

Open in CodePen