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_lat_long = anychart.data.set([
11
{lat: 33.75, long: -112.18, name: "Stepford branch", value: 321},
12
{lat: 37.50, long: -101.52, name: "Metropolis branch", value: 293},
13
{lat: 43.12, long: -108.62, name: "Haddonfield branch", value: 312},
14
{lat: 28.89, long: -100.09, name: "Marlberry branch", value: 198},
15
{lat: 33.28, long: -84.28, name: "Sunnydale branch", value: 309},
16
{lat: 39.21, long: -116.44, name: "Landmark branch", value: 215},
17
{lat: 32.26, long: -99.88, name: "Springfield branch", value: 219},
18
{lat: 43.63, long: -90.37, name: "Vice City branch", value: 179}
19
]);
20
21
var usaMap = anychart.map();
22
usaMap.geoData(anychart.maps.united_states_of_america);
23
24
// Creates the marker series
25
var series_acme = usaMap.marker(dataSet_lat_long);
26
27
// format the tooltips
28
series_acme.tooltip().titleFormat("{%name} of ACME Corp.");
29
series_acme.tooltip().format("Yearly profit: ${%value}m");
30
31
// format the labels
32
series_acme.labels().format(function(){
33
return this.getData("name");
34
});
35
series_acme.labels().fontSize(14);
36
series_acme.labels().fontColor("#000");
37
series_acme.labels().fontFamily("Georgia");
38
39
// hovered and selected labels
40
series_acme.hoverLabels().fontSize(12);
41
series_acme.hoverLabels().fontColor("#660000");
42
series_acme.selectLabels().fontSize(12);
43
series_acme.selectLabels().fontColor("#660000");
44
45
usaMap.title("Formatting the labels and tooltips in hovered state");
46
usaMap.interactivity().zoomOnMouseWheel(false);
47
usaMap.container("container");
48
usaMap.draw();
49
});