ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Adding pin markers to Highcharts maps

Hello,

I don't see it as a demo example or in any of the documentation but I was wondering if it's possible to add pin markers to the highcharts map. I would like to add to only a handful of countries on the world map demo https://jsfiddle.net/gh/get/library/pur ... ass-ranges


Image

WIll I able to do this with Highcharts?

Thank you
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Adding pin markers to Highcharts maps

Hello ktstyle,

Thanks for contacting us with your question.

Of course you are able to do such things with Highcharts. To achieve similar result, you can add mappoint series, and change marker to one that you want.
Here's a simple demo showing how to do that: https://jsfiddle.net/BlackLabel/h8ts39cv/
API reference: https://api.highcharts.com/highmaps/series.mappoint

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Re: Adding pin markers to Highcharts maps

Hello mateusz.b,

Thank you for your help. I'm still a bit confused on how to achieve the red map marker. Will I simply just replace the

marker: {
symbol: "url(http://c.tadst.com/gfx/n/icon/icon-map-pin.png)"
},

to a symbol that achieves the look? or will I see the series.mappoint that you mentioned?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Adding pin markers to Highcharts maps

Hi ktstyle,

Exactly as you've said, simply replace the url. I've used marker.symbol, to set the custom marker shape. You cannot achieve purely from the API a symbol of a shape that you wanted, so I thought that the best solution in this case, would be to pass the url to the desired symbol.

Also, if you want to modify the markers only a bit, there are few API properties that can be used to change things like marker fill color, basic marker shapes etc.
More informations about it you can find here: https://api.highcharts.com/highmaps/ser ... int.marker

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”