CODEWITHSUNDEEP
reactjshighcharts
Alex
Alex

Reputation: 195

Highmaps caribbean map

I am trying to display points(lat/long) with highmaps. I have successfully done that for US because there is a finished map for that. Now I am trying to display points in the caribbean. I found the following link to create a map for the caribbean: Demo

The problem is with this option I can only set values for the whole country. But I need to set specific points in the different countries with values. Example is California Map.enter image description here

I tried to update the sample code to:

import mapDataUSWithoutCentral from "@highcharts/map-collection/custom/north-america-no-central.geo.json"

    var dataCaribbean = [{
    'hc-key': 'cu', //Cuba
    value: 0
},{
    'hc-key': 'bs', //Bahamas
    value: 0
},{
  'hc-key': 'tc', //Turks and Caicos Islands
  value: 0
},{
  'hc-key': 'ky', //Cayman Islands
  value: 0
},{
  'hc-key': 'ht', //Haiti
  value: 0
},{
  'hc-key': 'do', //Dominican Republic
  value: 0
},{
  'hc-key': 'jm', //Jamaica
  value: 0
},{
  'hc-key': 'pr', //Puerto Rico
  value: 0
},
{ z: 10, keyword: "demo", lat: 23.113592, lon: -82.366592, color: '#ff0000' }
];

  const mapOptionsCaribbean = {
    chart: {
      map: mapDataUSWithoutCentral
    },
    title: {
      text: 'Caribbean'
    },
    mapNavigation: {
      enabled: true,
  },
    series: [{
      data: dataCaribbean,
      mapData: mapDataUSWithoutCentral,
      joinBy: 'hc-key',
      allAreas: false,
      name: 'Random data',
      states: {
          hover: {
              color: '#a4edba'
          }
      },
      dataLabels: {
          enabled: true,
          format: '{point.name}'
      }
  }]
  }

But the result is only this: enter image description here The last point in the data array is not displayed.

Upvotes: 0

Views: 115

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to create another series with mapbubble type and add proj4 library:

series: [...,
  {
    type: "mapbubble",
    data: [...]
  }
]

Live demo: https://codesandbox.io/s/highcharts-react-demo-o5roi

API Reference: https://api.highcharts.com/highmaps/series.mapbubble.data

Upvotes: 1

Related Questions