html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

#custom-tooltip {

  position: absolute;

  display: none;

  z-index: 10000;

  border-radius: 3px;

  padding: 5px 10px;

  background-color: rgba(33, 33, 33, 0.7);

  border: none;

  box-sizing: border-box;

  letter-spacing: normal;

  color: #fff;

  font-family: Verdana, Helvetica, Arial, 'sans-serif';

  font-size: 12px;

  margin: 3px 0px 3px 3px;

}

anychart.onDocumentReady(function () {

​

  var path;

  var coordinates = [];

  var tooltip = document.getElementById('custom-tooltip');

  var stage = anychart.graphics.create("container");

​

  // create the dataset of points that are defined by latitude and longtitude values

  var data = [

    {lat: -18.50, long: 135.24, name: "Office #1", value: 293},

    {lat: -17.89, long: 145.09, name: "Office #2", value: 198},

    {lat: -32.26, long: 151.44, name: "Office #3", value: 219},

    {lat: -33.28, long: 135.58, name: "Office #4", value: 309}

  ];

​

  var map = anychart.map();

  map.geoData(anychart.maps.australia);

​

  // Creates the bubble series

  var series = map.bubble(data);

​

  map.container(stage).draw();

​

  // execute custom interactivity when selection finished

  map.listen('selectMarqueeFinish', function(e) {

    // setTimeout is required to enqueue the task

    setTimeout(function() {

      selectionFinish();

    }, 0);

  });

​

  map.listen('selectMarqueeChange', function(e) {

    selectionChange(e);

  });

​

  map.listen('selectMarqueeStart', function(e) {

    // drop current polygon is exists

    if (path)

      path.remove();

​

    selectionChange(e);

  });

​

  function selectionChange(e) {

    // collect selection polygon coordinates

    coordinates.push({x: e.offsetX, y: e.offsetY});

  }

​

  function selectionFinish() {

    // get points coordinates and related names from data

    var points = map.getSelectedPoints().map(function(point) {

      return point.get('name');

    });

​

    // check if there are selected points

    if (!points.length) return;

​

    // draw polygon and apply fill settings

    path = stage.path();

​

    path.moveTo(coordinates[0].x, coordinates[0].y);

    for (var i = 0; i < coordinates.length; i++) {

      path.lineTo(coordinates[i].x, coordinates[i].y);

    }

    path.close();

    path.fill('#cecece 0.3');

    path.zIndex(100);

​

    // clear coordinates

    coordinates.length = 0;

​

    // compose cutom tooltip content

    var tooltipStr = ''

    for (i = 0; i < points.length; i++) {

      if (i > 0) {

        tooltipStr += '<br>';

      }

      tooltipStr += points[i];

    }

    tooltip.innerHTML = tooltipStr;

​

    // add listeners for for the custom tooltip

    path.listen('mouseover', function() {

      tooltip.style.display = "block";

    });

​

    path.listen('mouseout', function() {

      tooltip.style.display = "none";

    });

​

    // update tooltip position on mousemove

    path.listen('mousemove', function(e) {

      var clientX = e.offsetX;

      var clientY = e.offsetY;

      tooltip.style.left = clientX + 20 + "px";

      tooltip.style.top = clientY + 10 + "px";

    });

  }

});