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-bubble/bubble-earthquakes-map/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/maps-bubble/bubble-earthquakes-map/data.json',

    function (data) {

      // Creates data set

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

​

      // Creates Map Chart

      var map = anychart.map();

​

      // Sets geodata using https://cdn.anychart.com/geodata/latest/custom/world/world.js

      map.geoData('anychart.maps.world');

​

      map

        .credits()

        .enabled(true)

        .url('https://en.wikipedia.org/wiki/Lists_of_earthquakes')

        .text(

          'Data source: https://en.wikipedia.org/wiki/Lists_of_earthquakes'

        )

        .logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico');

​

      // Sets Chart Title

      map

        .title()

        .enabled(true)

        .text('Strongest Earthquakes by Country')

        .padding([0, 0, 20, 0]);

​

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

​

      // Sets bubble max size settings

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

​

      // Creates bubble series

      map

        .bubble()

        .data(dataSet)

        // Sets series settings

        .geoIdField('iso_a2')

        .fill('#ff8f00 0.6')

        .stroke('1 #ff6f00 0.9');

      map.hovered().fill('#78909c').stroke('1 #546e7a 1');

​

      map

        .tooltip()

        .useHtml(true)

        .title({ fontColor: '#7c868e' })

        .padding([8, 13, 10, 13])

        .format(function () {

          var value =

            '<span style="color: #545f69; font-size: 12px; font-weight: bold">';

          var date =

            '<br/><span style="color: #7c868e; font-size: 11px">';

          var description =

            '<br/><span style="color: #7c868e; font-size: 12px; font-style: italic">"';

          if (this.getData('description') !== '') {

            return (

              value +

              this.size +

              'M </span></strong>' +

              description +

              this.getData('description') +

              '"</span>' +

              date +

              this.getData('date') +

              '</span>'

            );

          }

          return (

            value +

            this.size +

            'M </span></strong>' +

            date +

            this.getData('date') +

            '</span>'

          );

        });

​

      map

        .tooltip()

        .background()

        .enabled(true)

        .fill('#fff')

        .stroke('#c1c1c1')

        .corners(3)

        .cornerType('round');

​

      // 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();

    }

  );

});