CODEWITHSUNDEEP
highcharts
Johannes Christ
Johannes Christ

Reputation: 109

Highcharts Highmaps How to add mappoint to custom map

I built a custom map with Highmaps: see fiddle

Now I want to add a series with map points:

{
        type: 'mappoint',
        name: 'Cities',
        zIndex: 100,
        color: '#000000',
        data: [{
            name: 'Birmingham',
            lat: 52,
            lon: 1.8
            }]
    }

But I do not know how to use fromLatLonToPoint in this case. How can I do this?

Upvotes: 0

Views: 370

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can directly use lat and lon properties, but your mappoint series is overwritten with parsed series from data property. As a soulution, use the addSeries method after the main data is loaded, for example:

 parsed: function() {
   var chart = this.chart,
     center = chart.fromLatLonToPoint({
       lat: 50,
       lon: 10
     });

   setTimeout(function() {
     chart.mapZoom(.15, center.x, center.y);

     chart.addSeries({
       type: 'mappoint',
       name: 'Cities',
       zIndex: 100,
       color: '#000000',
       data: [{
         name: 'Birmingham',
         lat: 52,
         lon: 1.8
       }]
     });
   }, 500)
 }

Live demo: https://jsfiddle.net/BlackLabel/vw1p4jtr/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/highmaps/series.mappoint.data.lat

Upvotes: 1

Related Questions