Highmaps Flight Routes add arrows

user_14235342 0
Viewed 60

I'm using Highmaps and new topojson file to create a map with visualization of flight routes. It's working well, see demo here : https://jsfiddle.net/vegaelce/L2ogczjh/ Now I need to add arrows on the maplines to indicate the way (city from -> city to). This arrow should be in the middle of the line (or just before the arrival mappoint).

I tried to use the following snippet seen in an post without success :

events: {
      load: function () {
        this.renderer
          .definition({
            tagName: 'marker',
            id: 'markerArrow',
            refY: 5,
            refX: 9,
            markerWidth: 11,
            markerHeight: 11,
            orient: 'auto',
            children: [{
              tagName: 'path',
              d: 'M 0 0 L 10 5 L 0 10 Z',
              fill: Highcharts.getOptions().colors[3],
              'stroke-width': 1,
              stroke: '#000000'
            }]
          });
      }
    }

Can you help me to do that please ?

highcharts arrows routes
1 Answers

Inside the series you can implement a new type with a drawn arrow. Possible two approaches, write an arrow in the path, or draw a line and inside the CSS style add marker-start: url(#tail);.

      {
        type: 'mapline',
        colorAxis: false,
        name: 'Lines',
        color: 'black',
        data: [{
          name: 'line1',
          //path: 'M 0 0 L 10 5 L 0 10 Z',
                    path: 'M 10 10 L 30 10',
          lineWidth: 3,
                    color: 'black'
        }]
      }
user_121716730
Related