How to implement mapbubble in highmaps using custom maps json generated using qgis?

Question

I need to implement mapbubble using highmaps. I have generated a custom geojson file using qgis for maps.

I refered this example but I am not getting the bubbles on the map. Even I do not have any errors in the console except this:

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>

<script src='./data/custom-world.js'></script>

<script>
$.getJSON('./data/data.json', function (data) {


        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: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['ISO_A2', 'name'],
                data: data,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.deposited}: [BTC]'
                }
            }]
        });
    });

</script>
</body>
</html>

data.json

[
  {
    "name" : "GB",
    "deposited" : "5"
  },
  {
    "name" : "RU",
    "deposited" : "10"
  },
  {
  "name" : "CH",
  "deposited" : "3"
  },
  {
    "name" : "IN",
    "deposited" : "50"
  }
]

custom-world.js

Please download this file from here

Now the problem is, I am getting custom map but not the map bubbles.

Any help will be appreciated as these highchart/maps are bit confusing for me.

Wojciech Chmiel Wojciech Chmiel · Accepted Answer · 2019-02-08T11:26:37

The code looks perfectly fine. However, the problem seems to be related to your data.json file. You don't define the size of the bubble (z - property). Check docs: https://api.highcharts.com/highmaps/series.mapbubble.data.z. That's why bubbles are not visible.

Example data.json:

[
  {
    "name" : "GB",
    "deposited" : "5",
    "z": 1000
  },
  {
    "name" : "RU",
    "deposited" : "10",
    "z": 1350
  }
  ...
]

How to implement mapbubble in highmaps using custom maps json generated using qgis?

1 Answers