html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // This sample uses 3rd party proj4 component

    // that makes it possible to set coordinates

    // for the points and labels on the map and

    // required for custom projections and grid labels formatting.

    // See https://docs.anychart.com/Maps/Map_Projections

​

    // create the dataset of points that are defined by latitude and longtitude values

    var dataSet_lat_long = [

{lat: -25.75, long: 122.18, name: "ACME Corp. branch No. 1", value: 321},

{lat: -18.50, long: 135.24, name: "ACME Corp. branch No. 2", value: 293},

{lat: -23.12, long: 148.62, name: "ACME Corp. branch No. 3", value: 312},

{lat: -17.89, long: 145.09, name: "ACME Corp. branch No. 4", value: 198},

{lat: -33.28, long: 135.58, name: "ACME Corp. branch No. 5", value: 309},

{lat: -31.21, long: 116.44, name: "ACME Corp. branch No. 6", value: 215},

{lat: -32.26, long: 151.44, name: "ACME Corp. branch No. 7", value: 219},

{lat: -25.63, long: 152.37, name: "ACME Corp. branch No. 8", value: 179}

    ];

​

    // create the dataset of points that are defined by the region id

    var dataSet_id = [

{id: "AU.NS", farms: 240},

{id: "AU.NT", farms: 202},

{id: "AU.WA", farms: 193},

{id: "AU.SA", farms: 196},

{id: "AU.VI", farms: 48},

{id: "AU.TS", farms: 13},

{id: "AU.QL", farms: 136}

    ];

​

    var map = anychart.map();

    map.geoData(anychart.maps.australia);

​

    // Creates the marker series

    var series_lat_long = map.marker(dataSet_lat_long);

    var series_id = map.marker(dataSet_id);

​

    // format the tooltips of the lat_long series    

    series_lat_long.tooltip().titleFormat("{%name}");

    series_lat_long.tooltip().format("Yearly profit: ${%value}m");

​

    // format the tooltips of the id-defined series    

    series_id.tooltip().titleFormat("{%name}");

    series_id.tooltip().format("Sheep farms: {%farms}");

​

    //format the labels of the id-defined series

    series_id.labels().format("{%name}");

​

    // format the labels of the series defined by latitude and longitude

    series_lat_long.labels(false);

​

    // turn off the labels of the second series for creating less chaos in a map

    series_lat_long.hovered().labels(false);

    series_lat_long.selected().labels(false);

​

    // hovered and selected labels

    series_id.hovered().labels().fontColor("black");

    series_id.selected().labels().fontColor("red");

​

    // change the color of the lat-long series

    series_lat_long.stroke("green");

    series_lat_long.fill("gold");   

​

    // make the markers of the series with id bigger

    series_id.size(10);

    series_id.hovered().size(10);

​

    map.title("Series of both types on one map");

​

    map.container("container");

    map.draw();

});