html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/maps-projections/bubble-map-with-bonne-projection/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/maps-projections/bubble-map-with-bonne-projection/data.json',

    function (data) {

      var map = anychart.map();

​

      map

        .crs('bonne')

        .geoData('anychart.maps.world_source')

        .background(false);

​

      map

        .title()

        .enabled(true)

        .useHtml(true)

        .fontSize(18)

        .text('Starbucks Distribution by Country');

​

      map

        .credits()

        .enabled(true)

        .url(

          'https://opendata.socrata.com/Business/All-Starbucks-Locations-in-the-World/xy4y-c4mk'

        )

        .text('Data source: https://opendata.socrata.com')

        .logoSrc(

          'https://opendata.socrata.com/stylesheets/images/common/favicon.ico'

        );

​

      map.interactivity().selectionMode('none');

​

      // Sets bubble max size settings

      map.minBubbleSize('0.5%').maxBubbleSize('5%');

​

      var dataSet = anychart.data.set(data);

      var series = map

        .bubble(dataSet)

        .fill('#9b301c')

        .stroke('1.5 #482311');

      series.tooltip().format(function () {

        return (

          'Number of Starbucks: ' +

          anychart.format.number(this.size, { groupsSeparator: ',' })

        );

      });

​

      // create zoom controls

      var zoomController = anychart.ui.zoom();

      zoomController.render(map);

​

      // Sets container id for the chart

      map.container('container');

      // Initiates chart drawing

      map.draw();

    }

  );

});