Sankerdas
Posts: 1
Joined: Wed Jun 22, 2022 6:48 am

Ship route map with directional arrow markers

Wed Jun 22, 2022 7:04 am

I'm trying to create a ship route map by using highcharts



I need to do following things.
1. plot lines though points.
2. change the marker shape into arrow, and this arrow mark should be in the direction of plotted line.
3. add wind direction icon next to the marker ( the wind direction icon should be tilted in the direction of wind as showing in the image ).

anyone can help me to achieve this ?
Attachments
Screenshot 2022-06-22 122404.png
Screenshot 2022-06-22 122404.png (44.71 KiB) Viewed 21 times

hubert.k
Posts: 402
Joined: Mon Apr 11, 2022 11:48 am

Re: Ship route map with directional arrow markers

Thu Jun 23, 2022 9:47 am

Hello Sankerdas!
Welcome to our forum and thanks for contacting us with your question!

There are no official tools in Highcharts Maps to achieve something like you requested. This functionality will be a really custom thing and it is beyond the scope of support on our forum, but I will show you some ways where you can start. You can use a Highcharts SVG Renderer and generate some arrows and wind icons in points x and y coordinates like in this demo: http://jsfiddle.net/BlackLabel/hu6sr7L9/ You can find more information about the renderer in the documentation here: https://api.highcharts.com/class-refere ... VGRenderer and in this article: https://support.highcharts.com/support/ ... -renderer-

If you need help with your implementation, you can try to look for it on the more general forums like StackOverflow or contact the Black Label company that specializes in Highcharts custom projects. See the official Black Label site: https://blacklabel.pl

Furthermore, the development of a similar feature is actually in progress. You can find a GitHub ticket here: https://github.com/highcharts/highcharts/issues/17270 The basic feature won't include the wind icons, only the path with arrows.

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”