HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// This sample uses 3rd party proj4 component
4
// that makes it possible to set coordinates
5
// for the points and labels on the map and
6
// required for custom projections and grid labels formatting.
7
// See https://docs.anychart.com/7.14.3/Maps/Map_Projections
8
9
// create the dataset of points that are defined by latitude and longtitude values
10
var dataSet_ACME = anychart.data.set([
11
{lat: 33.75, long: -112.18, name: "Stepford ACME Corp. branch", value: 321},
12
{lat: 33.79, long: -101.52, name: "Metropolis ACME Corp. branch", value: 293},
13
{lat: 26.12, long: -113.62, name: "Haddonfield ACME Corp. branch", value: 312},
14
{lat: 37.89, long: -105.09, name: "Marlberry ACME Corp. branch", value: 198},
15
{lat: 40.20, long: -84.28, name: "Sunnydale ACME Corp. branch", value: 309},
16
{lat: 39.44, long: -116.04, name: "Landmark ACME Corp. branch", value: 215},
17
{lat: 46.31, long: -99.88, name: "Springfield ACME Corp. branch", value: 219},
18
{lat: 27.63, long: -82.37, name: "Vice City ACME Corp. branch", value: 179}
19
]);
20
21
var dataSet_CITRUS = anychart.data.set([
22
{lat: 45.75, long: -88.18, name: "Bas CITRUS Corp. branch", value: 221},
23
{lat: 43.44, long: -70.85, name: "Hillwood CITRUS Corp. branch", value: 203},
24
{lat: 41.46, long: -99.61, name: "Shermer CITRUS Corp. branch", value: 162},
25
{lat: 38.14, long: -90.40, name: "Venusville CITRUS Corp. branch", value: 98},
26
{lat: 29.28, long: -100.58, name: "South Park CITRUS Corp. branch", value: 109},
27
{lat: 47.38, long: -120.06, name: "Heavensent CITRUS Corp. branch", value: 215},
28
{lat: 44.50, long: -106.8, name: "Wellsville CITRUS Corp. branch", value: 201},
29
{lat: 44.63, long: -122.37, name: "Whoville CITRUS Corp. branch", value: 138},
30
{lat: 30.66, long: -88.15, name: "Bedrock CITRUS Corp. branch", value: 210},
31
{lat: 35.21, long: -116.44, name: "Bluffington CITRUS Corp. branch", value: 195},
32
{lat: 24.76, long: -151.44, name: "Primwille CITRUS Corp. branch", value: 112},
33
{lat: 34.51, long: -96.65, name: "Hillywood CITRUS Corp. branch", value: 89}
34
]);
35
36
var usaMap = anychart.map();
37
usaMap.geoData(anychart.maps.united_states_of_america);
38
39
// Creates the marker series
40
var series_acme = usaMap.marker(dataSet_ACME);
41
var series_citrus = usaMap.marker(dataSet_CITRUS);
42
43
// format the tooltips
44
series_acme.tooltip({title: false, separator: false});
45
series_acme.tooltip().format("Yearly profit: ${%value}m");
46
series_citrus.tooltip({title: false, separator: false});
47
series_citrus.tooltip().format("Yearly profit: ${%value}m");
48
49
// turn off labels
50
series_acme.labels(false);
51
series_citrus.labels(false);
52
53
// change the color of the ACME series
54
series_citrus.stroke("green");
55
series_citrus.fill("gold");
56
series_acme.stroke(null);
57
58
// make the markers of the CITRUS series of smaller size than default
59
series_citrus.size(10);
60
series_citrus.hoverSize(10);
61
series_citrus.selectSize(10);
62
series_acme.size(14);
63
series_acme.hoverSize(14);
64
series_acme.selectSize(14);
65
66
// creating a custom marker for the CITRUS company series using a function
67
series_citrus.type(customMarkerType);
68
series_citrus.hoverType(customMarkerType);
69
70
// set the link for the directory with images
71
var image_link = 'https://static.anychart.com/images/acme.jpg';
72
73
// set the images for our series defined in normal state
74
series_acme.fill(customImageMarker(1));
75
// set the images for dots of the ACME series in hovered state
76
series_acme.hoverFill(customImageMarker(0.5));
77
78
usaMap.title("Creating custom markers");
79
usaMap.interactivity().zoomOnMouseWheel(false);
80
usaMap.container("container");
81
usaMap.draw();
82
});
83
84
85
function customMarkerType(path, x, y, size) {
86
var numericSize = +size;
87
var point1 = {x: x + 1.3 * numericSize, y: y - 0.4 * numericSize};
88
var point2 = {x: x - 0.4 * numericSize, y: y - 0.5 * numericSize};
89
path.moveTo(point1.x, point1.y)
90
.arcToByEndPoint(point2.x, point2.y, numericSize, numericSize, true, true)
91
.arcToByEndPoint(point1.x, point1.y, numericSize / 3, numericSize / 3, false, false)
92
.moveTo(point1.x, point1.y)
93
.close();
94
return path;
95
}
96
97
function customImageMarker(op){
98
var image_link = 'https://static.anychart.com/images/acme.jpg';
99
return {
100
src: image_link,
101
mode: 'fitMax',
102
opacity: op
103
}
104
}