sort of highchart's map by parameters

Question

I built a map using the library highcharts

    $('#container').highcharts('Map', {

        series : [
            {
                mapData:        Highcharts.maps['custom/world'],
                joinBy:         ['iso-a2', 'code'],     
            },
            {
                type:           'mapbubble',
                color:          '#ff0000',
                minSize:        4,
                maxSize:        '1.5%',
                data:           dateObjects,
            },
        ]
    });

The data that is displayed on the map has the form

    var dateObjects = [
        {
            lat:            3.583333,
            lon:            36.116667,
            z:              1,

            myplace:        1,
        },
        {
            lat:            -3.2249088,
            lon:            35.1895657,
            z:              1,

            myplace:        2,
        },
        {
            lat:            45.4693488,
            lon:            10.2636496,
            z:              1,

            myplace:        3,
        },
];

Tell me how to dynamically display only those data that satisfy the myplace parameter?

For example, at one point I want to show only those points on the map with myplace = 1, and then (for example, the user clicked the button on the page) those points on the map, for which myplace = 1, myplace = 3

Answer 1

Using Series.setData , I am updating the series data.

Fiddle demo

JS

var dateObjects = [
        {
            lat:            3.583333,
            lon:            36.116667,
            z:              1,

            myplace:        1,
        },
        {
            lat:            -3.2249088,
            lon:            35.1895657,
            z:              1,

            myplace:        2,
        },
        {
            lat:            45.4693488,
            lon:            10.2636496,
            z:              1,

            myplace:        3,
        },
];

var mapChart=new Highcharts.mapChart('container', {
        chart: {
            borderWidth: 1,
            map: 'custom/world'
        },

        title: {
            text: 'World population 2013 by country'
        },

        subtitle: {
            text: 'Demo of Highcharts map with bubbles'
        },

        legend: {
            enabled: false
        },

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

        series : [
            {
                mapData:        Highcharts.maps['custom/world'],
                joinBy:         ['iso-a2', 'code'],     
            },
            {
                type:           'mapbubble',
                color:          '#ff0000',
                minSize:        4,
                maxSize:        '1.5%',
                data:           dateObjects,
            },
        ]
    });
$('button').click(function () {
var places=$(this).attr('mplace')
var result = dateObjects.filter(function( obj ) {
  return obj.myplace == places;
});
    mapChart.series[1].setData(result);
});

Html

<button id="button1" class="autocompare" mplace="1">My Place 
1</button>
<button id="button2" class="autocompare" mplace="2">My Place 2</button>
<button id="button3" class="autocompare" mplace="3">My Place 3</button>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>