html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set

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

​

  // create map chart

  var map = anychart.map();

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

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

  map.padding(0);

​

  var regionData;

  // create map title

  map

    .title()

    .enabled(true)

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

    .text(

      'Coordinates and the region name\nby moving the cursor over the map of France'

    );

​

  var label = map.label();

  var labelFormat =

    '<span style=\'color: #545f69; font-size: 14px\'><b>lat</b>: %s;<br/><b>long</b>: %s;<br/><b>region</b>: %s</span>';

  label

    .enabled(true)

    .useHtml(true)

    .padding(10)

    .hAlign('left')

    .position('right-top')

    .anchor('right-top')

    .offsetY(80)

    .offsetX(20)

    .width(280)

    .text(anychart.format.subs(labelFormat, '', '', ''));

  label

    .background()

    .fill('#FCFCFC')

    .stroke('#E1E1E1')

    .corners(3)

    .cornerType('ROUND');

​

  // create choropleth series

  var series = map.choropleth(dataSet);

  series

    .tooltip()

    .title(false)

    .separator(false)

    .format(function () {

      return (

        '<span>' +

        this.name +

        '</span><br/>' +

        '<span style="font-size: 14px; color: #E1E1E1">id: ' +

        this.id +

        '</span>'

      );

    });

  series

    .selectionMode('none')

    .labels(false)

    .fill('#F7F7F7')

    .stroke('#B9B9B9')

    .tooltip()

    .useHtml(true)

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

    .fontSize(16);

​

  series.hovered().fill('#64b5f6');

​

  // set series geo id field settings

  series.geoIdField('id');

​

  // add pointsHover listener to get hovered region

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

    if (evt.seriesStatus[0].points[0]) {

      regionData = evt.seriesStatus[0].points[0].properties.name;

    } else regionData = undefined;

  });

​

  // add mouseMove listener to calc lat/long

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

    var localCord = map.globalToLocal(evt.clientX, evt.clientY);

    var latLong = map.inverseTransform(localCord.x, localCord.y);

    if (regionData) {

      label.text(

        anychart.format.subs(

          labelFormat,

          latLong.lat,

          latLong.long,

          regionData

        )

      );

    } else {

      label.text(

        anychart.format.subs(labelFormat, latLong.lat, latLong.long, '')

      );

    }

  });

​

  // set container id for the chart

  map.container('container');

​

  // initiate chart drawing

  map.draw();

});

​

function getData() {

  return [

    { id: 'FR.ARA' },

    { id: 'FR.BFC' },

    { id: 'FR.BRE' },

    { id: 'FR.COR' },

    { id: 'FR.CVL' },

    { id: 'FR.GES' },

    { id: 'FR.GF' },

    { id: 'FR.GUA' },

    { id: 'FR.HDF' },

    { id: 'FR.IDF' },

    { id: 'FR.LRE' },

    { id: 'FR.MAY' },

    { id: 'FR.MQ' },

    { id: 'FR.NAQ' },

    { id: 'FR.NOR' },

    { id: 'FR.OCC' },

    { id: 'FR.PAC' },

    { id: 'FR.PDL' }

  ];

}