HTMLcopy
x
1
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
2
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-map.min.js"></script>
3
<script src="https://cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
4
5
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
7
8
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
28
1
anychart.onDocumentReady(function () {
2
anychart.data.loadJsonFile( 'https://gist.githubusercontent.com/shacheeswadia/47b28a4d061e415555f01f5ce48e9ae3/raw/0f7592a8048872db7b77ccd2df8907e61952a806/shippingDataInverted.json',
3
function (data) {
4
5
// set the map chart
6
var map = anychart.map();
7
8
// set the global geodata
9
map.geoData('anychart.maps.world');
10
11
// set the map title
12
map.title( 'Shipping ports across the globe');
13
14
// set a marker series for the ports
15
var series = map.marker(anychart.data.set(data));
16
17
// disable labels to not show latitude and longitude for each point
18
series.labels(false);
19
20
// set the container
21
map.container('container');
22
23
// draw the map
24
map.draw();
25
26
}
27
);
28
});