​

// Variables to use in this sample

var imageLink = 'https://cdn.anychart.com/images/italy/';

​

anychart.onDocumentReady(function () {

  // Cities data for the sample

  var citiesData = getCitiesData(); // eslint-disable-line no-undef

​

  // Sights data for the Sample

  var sightsData = getSightsData(); // eslint-disable-line no-undef

​

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

  container.innerHTML =

    '<h1>Top 30 Places to Visit in Italy<br/><span class="text">According to ' +

    '<a target="_blank" href="https://www.tripadvisor.com/Attractions-g187768-Activities-Italy.html">Tripadvisor.com</a><br/>' +

    '(Pictures and description were taken from <a target="_blank" href="https://wikipedia.org">Wikipedia.org</a>)</span></h1>' +

    '<div class="line"><div id="map-container"></div></div>';

​

  // helper function - puts data about the sigh to the div

  var showSightData = function (index, seriesIndex) {

    var itemData = sightsData[seriesIndex].sights[index];

    if (itemData) {

      document

        .getElementById('tooltip-image')

        .setAttribute('src', imageLink + itemData.id + '.jpg');

      document

        .getElementById('tooltip-image')

        .setAttribute('alt', itemData.name);

      document.getElementById('tooltip-title').innerText = itemData.name;

      document.getElementById('tooltip-number').innerText = itemData.id;

      document.getElementById('tooltip-rating').innerText =

        itemData.rating;

      document.getElementById('tooltip-reviews').innerText =

        itemData.reviews;

      document.getElementById('tooltip-description').innerText =

        itemData.desc;

    }

  };

​

  // create map chart

  var map = anychart.map();

  map.padding(10, 0, 20, 0);

  // set geodata using https://cdn.anychart.com/geodata/latest/countries/italy/italy.js

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

  map.scale().gap(0.05);

​

  map.unboundRegions().enabled(true).fill('#E1E1E1').stroke('#D2D2D2');

​

  // helper function - creates point series for different type of sights

  var createSightSeries = function (data, type, name) {

    map

      .marker()

      .data(anychart.data.set(data))

      .name(name)

      .size(5)

      .type(type)

      .legendItem({

        iconType: type

      });

  };

​

  map.labels(false);

​

  // disable tooltip's title and separator

  map.tooltip().title(false).separator(false);

​

  // setup formatters for the tooltip using HTML

  map

    .tooltip()

    .useHtml(true)

    .format(function () {

      return '';

    });

​

  // create point series for sights

  createSightSeries(

    sightsData[0].sights,

    'star5',

    'City Architecture',

    0

  );

  createSightSeries(

    sightsData[1].sights,

    'triangle-up',

    'Parks and landscapes',

    1

  );

  createSightSeries(

    sightsData[2].sights,

    'star4',

    'Museums and Galleries',

    2

  );

  createSightSeries(

    sightsData[3].sights,

    'diamond',

    'Religious sites',

    3

  );

​

  // create marker series for cities

  var cities = map.marker(anychart.data.set(citiesData));

  cities.name('Cities');

  cities

    .labels()

    .enabled(true)

    .anchor('left-center')

    .position('right')

    .offsetX(5)

    .format(function () {

      return this.getData('name');

    });

​

  // hide markers for this series and this series from legend, leave only labels on map

  cities.size(0).selectionMode('none').tooltip(false).legendItem(false);

​

  cities.hovered().size(0);

​

  map.legend().enabled(true).padding(0, 0, 20, 0);

​

  // render tooltip content on 'pointsHover' event

  map.listen('pointsHover', function (evt) {

    if (!evt.currentPoint.hovered) return;

    if (evt.currentPoint.series !== cities) {

      showSightData(

        evt.currentPoint.index,

        evt.currentPoint.series.getIndex()

      );

    }

  });

​

  // append tooltip content on title changed

  map.tooltip().onTitleChanged(function () {

    this.contentElement.innerHTML = document.querySelector(

      '.hidden-container'

    ).innerHTML;

  });

​

  // create zoom controls

  var zoomController = anychart.ui.zoom();

  zoomController.render(map);

​

  map.getSeries(0).select(0);

​

  // set container id for the chart

  map.container('map-container');

  // initiate chart drawing

  map.draw();

});