It is currently Wed Oct 17, 2018 9:24 pm Advanced search

Add markers to a drilldown map

Technical support, bug reports and more.

Add markers to a drilldown map

Postby 500internalerrors » Wed Oct 10, 2018 6:23 pm

Hello,

starting from the drilldown example (https://www.highcharts.com/maps/demo/map-drilldown), I tried to implement a mappoint series.
However I can't make it run. The idea is, that people see first a choropleth map (according to the marker number in the states) and then, if they click on one specific state, they see the markers on the detailed map.

My naive approach was to call the function chart.addSeriesAsDrilldown a second time with the series like in the example for markers (https://www.highcharts.com/maps/demo/mappoint-latlon)
(I changed the drilldown example in a way that the big map is the world and the drilldown works for the single countries)

Code: Select all
    chart.addSeriesAsDrilldown(e.point, {
                            name: e.point.name,
                            data: data,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        });                   
    chart.addSeriesAsDrilldown(e.point, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        data: [{
            name: 'London',
            lat: 51.507222,
            lon: -0.1275
        }, {
            name: 'Birmingham',
            lat: 52.483056,
            lon: -1.893611
        }]
    });


This results in a Type Error: c is null thrown out from drilldown.src.js:389:10. However the British map is shown correctly, only the markers are missing.

My second approach was to give the function chart.addSeriesAsDrilldown a list of series which failed as well. This time without any error and without the British map showing.

So my question is:
How can I make this work? How can I have a choropleth map as a basis and a map with markers after the drilldown?
500internalerrors
 
Posts: 1
Joined: Wed Oct 10, 2018 12:47 pm

Re: Add markers to a drilldown map

Postby rafalS » Thu Oct 11, 2018 12:50 pm

Hi, 500internalerrors!

For some reason, Highcharts.geojson() is causing a problem. To show mappoint series, you need to add our main series with mapData property:

Code: Select all
series: [{
    mapData: Highcharts.maps['countries/us/us-all'],
    data: data,
    name: 'USA',
    dataLabels: {
      enabled: true,
      format: '{point.properties.postal-code}'
    }
  }],


change our method to addSingleSeriesAsDrilldown:

Code: Select all
chart.addSingleSeriesAsDrilldown(e.point, {
              name: e.point.name,
              data: data,
              dataLabels: {
                enabled: true,
                format: '{point.name}'
              }
            });
            chart.addSingleSeriesAsDrilldown(e.point, {
              type: 'mappoint',
              name: 'Cities',
              color: 'red',
              data: [{
                name: 'London',
                lat: 40,
                lon: -120
              }, {
                name: 'Birmingham',
                lat: 35,
                lon: -118
              }]
            });

            chart.applyDrilldown();


And import this module:

Code: Select all
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>


jsFiddle: https://jsfiddle.net/BlackLabel/7m3cutk6/

Kind regards!
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests