AnyChart sample

by andypotanin

HTML

<script src="https://cdn.anychart.com/js/7.13.0/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.0/anychart-bundle.min.js"></script>
<script src="//cdn.anychart.com/geodata/1.2.0/countries/italy/italy.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.0/anychart-ui.min.css" /><div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

anychart.onDocumentReady(function () {

  anychart.onDocumentReady(function() {
        dataSet1 = [
            {name: "Rome",      lat: 41.897964, long: 12.493373},
            {name: "Milan",     lat: 45.28,     long: 9.11},
            {name: "Venice",    lat: 45.2615,   long: 12.2019},
            {name: "Matera",    lat: 40.40,     long: 16.36},
            {name: "Florence",  lat: 43.47,     long: 11.15},
            {name: "Assisi",    lat: 43.0433,   long: 12.3703},
            {name: "Siena",     lat: 43.1907,   long: 11.1950},
            {name: "Naples",    lat: 40.846314, long: 14.252618},
            {name: "Lampedusa", lat: 35.514131, long: 12.588630},
            {name: "Ravenna",   lat: 44.25,     long: 12.12},
            {name: "Trieste",   lat: 45.642741, long: 13.778463},
            {name: "Monreale",  lat: 34.0454,   long: 13.1720},
            {name: "Syracuse",  lat: 37.05,     long: 15.17}
        ];
        dataSet2 = [
            {name: "Rome",      lat: 41.897964, long: 12.493373},
            {name: "Milan",     lat: 45.28,     long: 9.11},
            {name: "Venice",    lat: 45.2615,   long: 12.2019},
            {name: "Matera",    lat: 40.40,     long: 16.36},
            {name: "Florence",  lat: 43.47,     long: 11.15},
            {name: "Assisi",    lat: 43.0433,   long: 12.3703},
            {name: "Siena",     lat: 43.1907,   long: 11.1950},
            {name: "Naples",    lat: 40.846314, long: 14.252618},
            {name: "Lampedusa", lat: 35.514131, long: 12.588630},
            {name: "Ravenna",   lat: 44.25,     long: 12.12},
            {name: "Trieste",   lat: 45.642741, long: 13.778463},
            {name: "Monreale",  lat: 34.0454,   long: 13.1720},
            {name: "Syracuse",  lat: 37.05,     long: 15.17}
        ];

        chart = anychart.map();
        chart.geoData('anychart.maps.italy');
        firstSeries = chart.marker(dataSet1);
        secondSeries = chart.marker(dataSet2).type('star').size(10);
   ...