title: How to implement mapbubble in highmaps using custom maps json generated using qgis?
body: <p>I need to implement mapbubble using highmaps. I have generated a custom geojson file using qgis for maps.</p>
  
  <p>I refered <a href="https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-bubble/" rel="nofollow noreferrer">this</a> example but I am not getting the bubbles on the map. Even I do not have any errors in the console except this:</p>
  
  <pre><code>[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
  </code></pre>
  
  <p><strong><em>Index.html</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Custom Highmap&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/highmaps.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/modules/offline-exporting.js"&gt;&lt;/script&gt;
  
  &lt;script src='./data/custom-world.js'&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $.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]'
                  }
              }]
          });
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p><strong><em>data.json</em></strong></p>
  
  <pre><code>[
    {
      "name" : "GB",
      "deposited" : "5"
    },
    {
      "name" : "RU",
      "deposited" : "10"
    },
    {
    "name" : "CH",
    "deposited" : "3"
    },
    {
      "name" : "IN",
      "deposited" : "50"
    }
  ]
  </code></pre>
  
  <p><strong><em>custom-world.js</em></strong></p>
  
  <p>Please download this file from <a href="https://drive.google.com/file/d/1ENy0dyiFyqihb14zFPNJCH5Nsd0j1Hds/view?usp=sharing" rel="nofollow noreferrer">here</a></p>
  
  <p>Now the problem is, I am getting custom map but not the map bubbles.</p>
  
  <p>Any help will be appreciated as these highchart/maps are bit confusing for me. </p>