javascripthighchartshighmaps

How to parse a string in HighMaps (Map Bubble) alongside country code?


I'm building a simple application where people from different countries select their country and occupation. I upload it to Firebase and then visualise it in HighMaps.

I'm using an example from here, but instead of the population number, I want my app to display different occupations of the people in that location.

This is the default data format:

joinBy: ['iso-a2', 'code'],
data: [{"code":"AL","z":500}],

I try to parse something like this:

joinBy: ['iso-a2', 'code'],
data: [{"code":"AL","occupation":"teacher"}],

the whole map breaks and displays nothing.

But is it possible to parse a string there or do Highmaps not allow it?


Solution

  • You have to update the series as

    series: [{
      name: 'Countries',
      color: '#E0E0E0',
      enableMouseTracking: false
    }, {
      type: 'mapbubble',
      name: 'Population 2013',
      joinBy: ['iso-a2', 'code'],
      data: [{
        "code": "AF",
        "z": 30552,
        "occupation":"teacher"
      }, {
        "code": "AL",
        "z": 2897,
        "occupation":"teacher"
      }, {
        "code": "DZ",
        "z": 39208,
        "occupation":"teacher"
      }],
      minSize: 4,
      maxSize: '12%',
      tooltip: {
        pointFormat: '{point.code}: {point.z} thousands<br>Occupation:{point.occupation}'
      }
    }]
    

    Here you have to update tooltip as

    tooltip: {
        pointFormat: '{point.code}: {point.z} thousands<br>Occupation:{point.occupation}'
      }
    

    where point.occupation represents occupation of data object { "code": "AF","z": 30552,"occupation":"teacher" },

    Fiddle demo