html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/maps-choropleth/dealership-locator/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/maps-choropleth/dealership-locator/data.json',

    function (data) {

      var baseLink = 'https://en.wikipedia.org/wiki/';

      // create map chart

      var map = anychart.map();

      // The data used in this sample can be obtained from the CDN

      // https://cdn.anychart.com/samples/maps-choropleth/dealership-locator/data.js

      var dealershipData = data;

​

      // settings for map chart

      map

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

        .geoData('anychart.maps.united_states_of_america')

        .interactivity({ selectionMode: 'none' });

​

      map

        .title()

        .enabled(true)

        .useHtml(true)

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

        .text(

          'ACME Dealership Locator by State<br/>' +

          '<span style="color:#929292; font-size: 12px;">' +

          '(Numbers on map - amount of ACME dealerships for each state)</span>'

        );

​

      // create choropleth series for map chart

      var mapSeries = map.choropleth(anychart.data.set(dealershipData));

      mapSeries

        .geoIdField('code_hasc')

        .colorScale(

          anychart.scales.linearColor('#f2f2f2', '#42a5f5', '#1976d2')

        );

​

      mapSeries

        .hovered()

        .fill(mapSeries.fill())

        .stroke(mapSeries.stroke());

​

      // custom text in tooltips for choropleth series for map chart

      mapSeries

        .tooltip()

        .useHtml(true)

        .titleFormat('{%Id}')

        .format(function () {

          var amount =

            '<span style="color: #d9d9d9;">ACME has no dealerships in ' +

            this.getData('name');

          if (this.value > 0 && this.value === 1) {

            amount =

              '<span style="color: #d9d9d9;">' +

              'ACME has <strong><span style="color: #fff;">' +

              this.value +

              ' </span></strong>dealership in ' +

              this.getData('name') +

              '</span><br/>Click to see more.';

          } else if (this.value > 1) {

            amount =

              '<span style="color: #d9d9d9;">' +

              'ACME has <strong><span style="color: #fff;">' +

              this.value +

              ' </span></strong>dealerships in ' +

              this.getData('name') +

              '</span><br/>Click to see more.';

          }

          return amount;

        });

​

      // onclick function for points - redirecting client (based on baseLink variable)

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

        window.open(

          baseLink + dealershipData[e.pointIndex].name,

          '_blank'

        );

      });

​

      // set container id for the chart

      map.container('container');

      // initiate chart drawing

      map.draw();

    }

  );

});