How to combine multiple maps in highcharts

Question

I'm working on a map highcharts graph, the idea is to have a world map in the background and some custom polygons "in the front" that user can click on and select. The problem is that for some reason, i cannot get the "background" map to stay in the background, but rather it keeps showing itself at the front, so the custom map doesn't display at all. As soon as i remove the background serie, it works.

I have tried to change zIndex and other settings, but it doesn't seem to have any effect.

Demonstration fiddle: https://jsfiddle.net/dLju3z6s/1/

(async () => {
  const geo = await fetch(
    'https://code.highcharts.com/mapdata/custom/world-continents.geo.json'
  ).then(response => response.json());
  const europe = await fetch(
    'https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson').then(response => response.json());

  // Initialize the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Multiple map'
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    plotOptions: {
      map: {
      }
    },
    series: [{
      name: 'globe',
      mapData: geo,joinBy: ['NAME', 'code'],
      data: []
    }, {
      name: 'UTC',
      data: ['Azerbaijan', 'Albania', 'Austria'].map(code => ({code})),
      mapData: europe,
      joinBy: ['NAME', 'code']
    }]
  });
})();

Is there a way of making it work with multiple overlapping maps, or is it perhaps possible just to put a static image that is properly resized?

Answer 1

It looks like multiple map sources can be combined in the same Highcharts map only with TopoJSON, according to this tutorial. Since your background map is in GeoJSON format, you could probably convert it to TopoJSON by using something like geo2topo. But I'm not really sure whether this will work, since that map projection is Miller cylindrical, while your Europe map has Lambert Conformal Conic projection. They also have different layouts. What seems to be much easier is simply finding a similar background map in TopoJSON format:

(async () => {

  const geo = await fetch(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
  ).then(response => response.json());

  const europe = await fetch(
    'https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson').then(response => response.json());

  // Initialize the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Multiple map'
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },

    series: [{
      name: 'globe',
      mapData: geo,
      joinBy: null,
      data: []
    }, {
      name: 'UTC',
      data: ['Azerbaijan', 'Albania', 'Austria'].map(code => ({code})),
      mapData: europe,
      joinBy: ['NAME', 'code']
    }]
  });
})();

The result: