html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#custom-tooltip, #icon-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;

}

​

​

#tooltip-content {

  height: 80%;

  width: 100%;

  margin: 0;

  padding: 0;

}

​

#paginator {

  height: 20%;

  width: 100%;

  margin: 0;

  padding: 0;

}

​

.pagination {

  display: inline-block;

}

​

.pagination span {

  float: left;

  padding: 8px 16px;

  text-decoration: none;

}

​

.pagination a {

  color: white;

  float: left;

  padding: 8px 6px;

  text-decoration: none;

}

anychart.onDocumentReady(function () {

​

  var path;

  var coordinates = [];

  var points;

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

  var contentHtml = document.getElementById('tooltip-content');

  var leftPage = document.getElementById('leftPage');

  var rightPage = document.getElementById('rightPage');

  var paginatorLabel = document.getElementById('paginator-label');

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

  var timeout;

  var tooltipPages = [];

  var currentPage = 0;

​

​

​

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

​

  // create SVG button for selection

  var svgButton = stage.rect(10, 10, 50, 50);

  svgButton.fill({src: 'https://static.anychart.com/cdn/ts/icons/anymap.svg'});

  svgButton.listen('click', function() {

    map.startSelectPolygonMarquee();

  });

​

  var iconTooltip = document.getElementById('icon-tooltip');

  iconTooltip.innerHTML = 'Icon tooltip text';

​

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

    iconTooltip.style.display = "block";

  });

​

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

    iconTooltip.style.display = "none";

  });

​

  // update tooltip position on mousemove

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

    var clientX = e.offsetX;

    var clientY = e.offsetY;

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

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

  });

​

​

​

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

  });

​

  tooltip.addEventListener("mouseout", function( event ) {   

    // hide the tooltip div

    customTooltipMouseOut();

  });

​

  tooltip.addEventListener("mouseover", function( event ) {   

    clearTimeout(timeout);

  });

​

  leftPage.addEventListener('click', function() {

    if (currentPage > 0) {

      currentPage--;

      updateTooltipContent(currentPage);

    }

  });

​

  rightPage.addEventListener('click', function() {

    if (currentPage < points.length - 1) {

      currentPage++;

      updateTooltipContent(currentPage);

    }

  });

​

  function updateTooltipContent(currentPage) {

    contentHtml.innerHTML = points[currentPage];

    paginatorLabel.innerHTML = currentPage + 1 + ' of ' + points.length;

  }

​

  function customTooltipMouseOut() {

    timeout = setTimeout(function(){

      // hide the tooltip div

      tooltip.style.display = "none";

    }, 100)

  }

​

  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

    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;

    tooltipPages.length = 0;

​

    // compose cutom tooltip content

    currentPage = 0;

    updateTooltipContent(currentPage);

​

    // add listeners for for the custom tooltip

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

      clearTimeout(timeout);

      tooltip.style.display = "block";

      var clientX = e.offsetX;

      var clientY = e.offsetY;

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

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

    });

​

    path.listen('mouseout', customTooltipMouseOut);

  }

});