Create markers with SVG icon

main.js

var map = new cercaliagl.Map({
  target: 'map',
  center: new cercaliagl.LonLat(2.169727855, 41.401868642),
  zoom: 11
});
window.map = map;

function paintSvgToCanvas(svg) {
  var img = new Image(24, 24);
  var base64 = btoa(svg);
  var imgSource = "data:image/svg+xml;base64,".concat(base64);
  img.setAttribute('src', imgSource);
  return img;
}

map.whenReady(function () {
  var linestring = new cercaliagl.Feature({
    wkt: 'LINESTRING (2.186571267 41.412635584, 2.187218054 41.423617094, 2.183651742 41.428863756)',
    simpleLabel: new cercaliagl.SimpleLabel({
      text: 'LineString Demo'
    }),
    draggable: true,
    editable: true,
    visible: true,
    onClick: function onClick() {
      linestring.setEditable(true);
    }
  });
  var svgFillColor = '#0000ff';
  var svg = "<svg id=\"svgicon\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path fill=\"".concat(svgFillColor, "\" d=\"M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z\"></path>\n  </svg>");
  var elem = paintSvgToCanvas(svg);
  document.querySelector('body').appendChild(elem);
  var marker = new cercaliagl.Marker({
    position: new cercaliagl.LonLat(2.169727855, 41.401868642),
    icon: new cercaliagl.Icon({
      svg: svg,
      size: [24, 24]
    })
  });
  map.addMarker(marker);
  map.centerToMarkers([marker], {
    changeZoom: true
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Create markers with SVG icon</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>