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
57
// make the markers of the CITRUS series of smaller size than default
58
series_citrus.size(8);
59
series_citrus.hoverSize(10);
60
61
// change the markers type
62
series_acme.type("square");
63
series_citrus.type("cross");
64
65
66
usaMap.title("Formatting the marker types");
67
usaMap.interactivity().zoomOnMouseWheel(false);
68
usaMap.container("container");
69
usaMap.draw();
70
});