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

Question

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?

Answer 1

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