Search code examples
javascripthighchartshighmaps

Zoom in not working on Highmaps


I took a Highmaps example from the demo section and zooming in was working fine. Then I replaced the data object with my own data and changed the world map with my own GeoJSON data.

Now the zoom doesn't work anymore.

Please see this JSFiddle.

I managed to simplify the code up to this point:

var geoJson = { ... }
var data = [...]

// Initiate the chart
$('#container').highcharts('Map', {

    mapNavigation: {
        enabled: true,
        navigationButtons: true
    },

    colorAxis: {
        min: 1,
        max: 1000,
        type: 'logarithmic'
    },

    series: [{
        data: data,
        mapData: geoJson,
        joinBy: ['name', 'name'],

    }]
});

What can I do to make the zoom work?


Solution

  • This must be a bug, it works if you change your coordinate data. jsFiddle:

    var geoJson = {
        "type": "FeatureCollection",
            "features": [{
            "type": "Feature",
            "properties": {
                "name": "a"
            },
                "geometry": {
                "type": "Polygon",
                    "coordinates": [
                    [
                        [3125, 6250],
                        [5625, 6250],
                        [5624, 8750],
                        [3125, 8750],
                        [3125, 6250]
                    ]
                ]
            }
        }, {
            "type": "Feature",
                "properties": {
                "name": "b"
            },
                "geometry": {
                "type": "Polygon",
                    "coordinates": [
                    [
                        [6875, 6250],
                        [9375, 6250],
                        [9375, 8750],
                        [6875, 8750],
                        [6875, 6250]
                    ]
                ]
            }
        }]
    };
    
    // Initiate the chart
    $('#container').highcharts('Map', {
    
        mapNavigation: {
            enabled: true,
        },
    
        series: [{
            mapData: geoJson
        }]
    });
    

    I suggest filing an issue on GitHub, and we'll look into it in detail.