Features with direction arrows.

Copy

var map;

document.addEventListener('cercalia-ready', initMap);

function initMap() {

var map = new cercalia.Map({
    target: 'map',
    controls: []
  });

//Marker
  var marker1 = new cercalia.Marker({position: new cercalia.LonLat(2.165222308679409, 41.39918270572167)});
  var marker2 = new cercalia.Marker({position: new cercalia.LonLat(2.166885278268643, 41.38828490866749)});
  var marker3 = new cercalia.Marker({position: new cercalia.LonLat(2.1522618747194477, 41.39029719483551)});
  map.addMarkers([marker1, marker2, marker3]);

//Linestring
  var wktLinestring =	'LINESTRING(2.1387898768073272 41.39520603528783,2.140110400274983 41.39671448276599,2.1405146421528367 41.396924174465994,2.140649389445455 41.397208271810996,2.141403974284115 41.39770882123173,2.14099074925342 41.39805379222028,2.1422843232625524 41.398425817689485,2.1428502618915473 41.39867608816152,2.146515388250755 41.40094200634792,2.147665231814428 41.401158448099295,2.148168288373535 41.400752619219645,2.150512891265087 41.39919691819304,2.150782385850323 41.39892635766256,2.1513573076321593 41.398128197485846,2.151896296802631 41.39760059465908,2.1580138238874853 41.401462818083246,2.1581575543329445 41.40140870796884,2.159163667451158 41.400576759245496,2.1603314773205136 41.40143576303177,2.1602775784034662 41.40148987312344)';
  var linestringFeature = new cercalia.Feature({wkt: wktLinestring, showDirection: true});
  map.addFeature(linestringFeature);

//MultiLineString
  var wktMultiLinestring = '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))';
  var multiLinestringFeature = new cercalia.Feature({wkt: wktMultiLinestring, showDirection: true});
  map.addFeature(multiLinestringFeature);
  map.fitBounds(multiLinestringFeature.getBounds());
}

<!DOCTYPE html>
<html>
  <head>
    <title>Features with direction arrows.</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;

      document.addEventListener('cercalia-ready', initMap);

      function initMap() {

        var map = new cercalia.Map({
          target: 'map',
          controls: []
        });

        //Marker
        var marker1 = new cercalia.Marker({position: new cercalia.LonLat(2.165222308679409, 41.39918270572167)});
        var marker2 = new cercalia.Marker({position: new cercalia.LonLat(2.166885278268643, 41.38828490866749)});
        var marker3 = new cercalia.Marker({position: new cercalia.LonLat(2.1522618747194477, 41.39029719483551)});
        map.addMarkers([marker1, marker2, marker3]);

        //Linestring
        var wktLinestring =	'LINESTRING(2.1387898768073272 41.39520603528783,2.140110400274983 41.39671448276599,2.1405146421528367 41.396924174465994,2.140649389445455 41.397208271810996,2.141403974284115 41.39770882123173,2.14099074925342 41.39805379222028,2.1422843232625524 41.398425817689485,2.1428502618915473 41.39867608816152,2.146515388250755 41.40094200634792,2.147665231814428 41.401158448099295,2.148168288373535 41.400752619219645,2.150512891265087 41.39919691819304,2.150782385850323 41.39892635766256,2.1513573076321593 41.398128197485846,2.151896296802631 41.39760059465908,2.1580138238874853 41.401462818083246,2.1581575543329445 41.40140870796884,2.159163667451158 41.400576759245496,2.1603314773205136 41.40143576303177,2.1602775784034662 41.40148987312344)';
        var linestringFeature = new cercalia.Feature({wkt: wktLinestring, showDirection: true});
        map.addFeature(linestringFeature);

        //MultiLineString
        var wktMultiLinestring = '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))';
        var multiLinestringFeature = new cercalia.Feature({wkt: wktMultiLinestring, showDirection: true});
        map.addFeature(multiLinestringFeature);
        map.fitBounds(multiLinestringFeature.getBounds());
      }
    </script>
  </body>
</html>