Highcharts: only show part of a map

Question

I'm using a map in HighCharts and sometimes I need to just show a section of the map, not the entire map. I think I could manually do this by zooming into a part of the map but ideally I would like to specify a bounding box with lat/lon coordinates for example. I'm sure this must be possible — in the API there is mention of mapTransforms but I don't know how to use it. https://api.highcharts.com/highmaps/chart.mapTransforms

The best in my case would be for HighCharts only to display the parts of the map with data — there is an option in the API to not display all areas ( https://api.highcharts.com/highmaps/series.map.allAreas ) but this is not what I want. That option simply doesn't render the parts of the map with no data and I definitely don't want to do that.

An example of an official JSFiddle is here:

https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/world-continents

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
    ['eu', 0],
    ['oc', 1],
    ['af', 2],
    ['as', 3],
    ['na', 4],
    ['sa', 5]
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world-continents'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.js">World continents</a>'
    },

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

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});

What would I do so that the initial map loads on, for example, mainly Europe?

Thanks to anyone who can help with this!

Answer 1

Take a look at the docs, where you can find the example: https://api.highcharts.com/class-reference/Highcharts.MapView#setView

However I think that for your case you should use zoomBy feature: https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy

Answer 2

You can use zoomTo() to zoom into specific point of your data.

I modified few things

1. mapData = Highcharts.maps["custom/world-continents"].features this is from your data js for the data. This gives the map the relevant data
2. Added a loadto function, you can call it wherever you want, this is just for demo, i tried to call it under chart but didn't work out. so you can use document load or ready or after chart load.
3. chart.get('EU').zoomTo() here chart is the variable and EU "uppercase" is the data point from mapdata. you can use any continent AS AF etc.

Code

var data = [
        ['eu', 0],
        ['oc', 1],
        ['af', 2],
        ['as', 3],
        ['na', 4],
        ['sa', 5]
    ];
var mapData = Highcharts.maps["custom/world-continents"].features
    // Create the chart

var chart = Highcharts.mapChart('container', {
  chart: {
    map: 'custom/world-continents',
  },
  . . .
  series: [{
    data: data,
    mapData: mapData,
    allowPointSelect: true,
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  }]
});


function loadto() {
  chart.get('EU').zoomTo();
}
loadto() 

You can copy these parts it will work in the fiddle.