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 data_ACME = [

{lat: 33.75, long: -112.18, name: "Stepford", value: 321},

{lat: 33.79, long: -101.52, name: "Metropolis", value: 293},

{lat: 26.12, long: -113.62, name: "Haddonfield", value: 312},

{lat: 37.89, long: -105.09, name: "Marlberry", value: 198},

{lat: 40.20, long: -84.28, name: "Sunnydale", value: 309},

{lat: 39.44, long: -116.04, name: "Landmark", value: 215},

{lat: 46.31, long: -99.88, name: "Springfield", value: 219},

{lat: 27.63, long: -82.37, name: "Vice City", value: 179}

    ];

​

    var data_CITRUS = [

{lat: 45.75, long: -88.18, name: "Bas", value: 221},

{lat: 43.44, long: -70.85, name: "Hillwood", value: 203},

{lat: 41.46, long: -99.61, name: "Shermer", value: 162},

{lat: 38.14, long: -90.40, name: "Venusville", value: 98},

{lat: 29.28, long: -100.58, name: "South Park", value: 109},

{lat: 47.38, long: -120.06, name: "Heavensent", value: 215},

{lat: 44.50, long: -106.8, name: "Wellsville", value: 201},

{lat: 44.63, long: -122.37, name: "Whoville", value: 138},

{lat: 30.66, long: -88.15, name: "Bedrock", value: 210},

{lat: 35.21, long: -116.44, name: "Bluffington", value: 195},

{lat: 24.76, long: -151.44, name: "Primwille", value: 112},

{lat: 34.51, long: -96.65, name: "Hillywood", value: 89}

    ];

​

    var map = anychart.map();

    map.geoData(anychart.maps.united_states_of_america);

​

    // Creates the marker series

    var series_acme = map.marker(data_ACME);

    series_acme.name("ACME Corp.");

    var series_citrus = map.marker(data_CITRUS);

    series_citrus.name("CITRUS Corp. branch");

​

    // format the tooltips

    map.tooltip().titleFormat(" {%seriesName}");

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

    // set the colors of the ACME and CITRUS series

    series_citrus.stroke("green");

    series_citrus.fill("gold");

    series_acme.normal().stroke(null);

    series_acme.hovered().stroke(null);

    series_acme.selected().stroke(null);

​

    // set the size of CITRUS markers

    series_citrus.normal().size(8);

    series_citrus.hovered().size(10);

    series_citrus.selected().size(10);

​

    // set the size of ACME markers

    series_acme.normal().size(14);

    series_acme.hovered().size(18);

    series_acme.selected().size(18);

​

    // create a custom marker for the CITRUS series using a function

    series_citrus.type(customMarkerType);

    series_citrus.hovered().type(customMarkerType);

​

    // set the link for the directory with images

    var image_link = 'https://static.anychart.com/images/acme.jpg';

    // set the images for the ACME series

    series_acme.normal().fill(customImageMarker(1));

    series_acme.hovered().fill(customImageMarker(0.5));

    series_acme.selected().fill(customImageMarker(1));

​

    map.title("Creating custom markers");

​

    map.container("container");

    map.draw();

});

​

​

function customMarkerType(path, x, y, size) {

    var numericSize = +size;

    var point1 = {x: x + 1.3 * numericSize, y: y - 0.4 * numericSize};

    var point2 = {x: x - 0.4 * numericSize, y: y - 0.5 * numericSize};

    path.moveTo(point1.x, point1.y)

    .arcToByEndPoint(point2.x, point2.y, numericSize, numericSize, true, true)

    .arcToByEndPoint(point1.x, point1.y, numericSize / 3, numericSize / 3, false, false)

    .moveTo(point1.x, point1.y)

    .close();

    return path;

}

​

function customImageMarker(op){

    var image_link = 'https://static.anychart.com/images/acme.jpg';

      return {

  src: image_link,

    mode: 'fit',

    opacity: op

}  

}