Feature with direction arrows

main.js

var map = new cercaliagl.Map({
  target: 'map',
  controls: []
});
map.whenReady(function () {
  var linestring = new cercaliagl.Feature({
    wkt: 'LINESTRING (2.186571267 41.412635584, 2.187218054 41.423617094, 2.183651742 41.428863756)',
    draggable: true,
    showDirection: true,
    editable: true
  });
  map.addFeature(linestring);
  var multilinestring = new cercaliagl.Feature({
    wkt: 'MULTILINESTRING((2.1533875001742695 41.384334700461636,2.1574389021056484 41.381303659602565,2.1666825663792384 41.38824507412576,2.1668173136718565 41.3885156794538,2.1669610441173153 41.38863745148123,2.1680569887639414 41.38944249410298,2.168586994781572 41.38967250443585,2.170859732450394 41.3913840261626,2.171210075411201 41.39155314639814,2.171326856398136 41.39174256053576,2.173285183717517 41.39320373662076,2.1664040886411615 41.39843258176904,2.1640864352081333 41.400103287701114,2.161894545914881 41.39845963808028),(2.161894545914881 41.39845963808028,2.1426256830705177 41.382277938259676))',
    draggable: true,
    showDirection: true,
    editable: true
  });
  map.addFeature(multilinestring);
  map.centerToFeatures([linestring, multilinestring]);
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Feature with direction arrows</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>