Search code examples
highchartshighmaps

How to draw mapline with highcharts?

I have a highcharts map with two mappoints. You can see it at http://jsfiddle.net/na85bqqp/1/.

The follwoing data format doesn't seem to work for maplines.

        data: [{
          name: 'London',
          lat: 42.4072,
          lon: -71.3824,
        }, 
        {
          name: 'Wisconsin',
          lat: 43.7844,
          lon: -88.7879,
        }]

I want these two points connected. How can I achieve this? Highcharts documentation for mapline isn't proper, so I can't figure out how I can join the mappoints by mapline.

This is the final map with points selected by lines. http://jsfiddle.net/na85bqqp/2/

Solution

  • Add mapline in the series 

     {
  type: 'mapline',
  name: 'Lines',
  color: 'green',
  data: [{
    name: 'line',
    path: 'M 5900 -7860 L 9230 -8090', /*first pair(5900 -7860) is point for Wisconsin and second(9230 -8090) is for London */
    lineWidth: 3
  }]
}

    Fiddle link