html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // This sample uses 3rd party Proj4js JavaScript library to transform coordinates

    // See https://docs.anychart.com/Maps/Map_Projections to learn more.

​

    var dataSet = anychart.data.set([

        {id: "FR.A", title: "Strasbourg", value: 928},

        {id: "FR.B", title: "Bordeaux", value: 192},

        {id: "FR.C", title: "Clermont-Ferrand", value: 963},

        {id: "FR.P", title: "Caen", value: 266},

        {id: "FR.D", title: "Dijon", value: 518},

        {id: "FR.E", title: "Rennes", value: 324}

    ]);

    dataSet.mapAs({id: "id"});

​

    var franceMap = anychart.map();

    franceMap.geoData(anychart.maps.france);

​

    var series = franceMap.choropleth(dataSet);

​

    franceMap.container("container");

    franceMap.draw();

​

    franceMap.listen("pointClick", function (e) {

        // Gets point properties.

        var properties = e.point.getFeatureProp();

​

        franceMap.title("Point name (capital): " + properties.nom_cl);

        // Click on point.

    });

});