Back

Network chart over world map

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS
//No CSS for this example 

JavaScript

JavaScript
chart= new GeoChart({
    "layers": [
        {
            "name": "Points",
            "type": "items",
            "style": {
                "nodeStyleFunction": function (node) {
                        node.label = node.data.id;
                    },
                "linkStyleFunction": function (link) {
                        link.label = link.data.value;
                    },
                "node": {
                    "fillColor": "#2fc32f",
                    "lineColor": "#b0dc0b",
                    "lineWidth": 2
                },
                "nodeLabel": {
                    "backgroundStyle": {
                        "fillColor": "#eab404"
                    },
                    "textStyle": {
                        "fillColor": "#de672c"
                    }
                },
                "linkLabel": {
                    "backgroundStyle": {
                        "fillColor": "#ec2e2e"
                    },
                    "textStyle": {
                        "fillColor": "#56b9f7"
                    }
                }
            }
        }
    ],
    "navigation": {
        "initialLat": 35.04409,
        "initialLng": -90.246213,
        "initialZoom": 2,
        "minZoom": 2
    },
    "background": {
        "enabled": true,
        "type": "tile",
        "url": "https://maps.zoomcharts.com/{z}/{x}/{y}.png",
        "params": {
            "attribution": "\u00a9 <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\"\\>OpenStreetMap</a> contributors"
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/driving-time-world.json",
            "perBoundsData": false
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data
{
    "nodes": [
        {
            "id": "Paris",
            "coordinates": [
                2.2770199,
                48.8588377
            ],
            "value": 100
        },
        {
            "id": "London",
            "coordinates": [
                -0.3817813,
                51.528308
            ],
            "value": 120
        },
        {
            "id": "Atlanta",
            "coordinates": [
                -84.388846,
                33.752504
            ],
            "value": 50
        },
        {
            "id": "New York",
            "coordinates": [
                -73.996705,
                40.74838
            ],
            "value": 230
        },
        {
            "id": "Moscow",
            "coordinates": [
                37.0720851,
                55.748517
            ],
            "value": 65
        },
        {
            "id": "Tokyo",
            "coordinates": [
                139.5703018,
                35.6732619
            ],
            "value": 185
        },
        {
            "id": "Sydney",
            "coordinates": [
                150.6517803,
                -33.847927
            ],
            "value": 44
        },
        {
            "id": "Lake Placid",
            "coordinates": [
                -81.364918,
                27.294474
            ],
            "value": 23
        },
        {
            "id": "Riga",
            "coordinates": [
                23.9890799,
                56.9713962
            ],
            "value": 25
        },
        {
            "id": "Cape Town",
            "coordinates": [
                18.0955842,
                -33.9142687
            ],
            "value": 47
        },
        {
            "id": "Abu Dhabi",
            "coordinates": [
                53.8687803,
                24.4270645
            ],
            "value": 115
        },
        {
            "id": "Rio de Janeiro",
            "coordinates": [
                -43.7261817,
                -22.913885
            ],
            "value": 30
        }
    ],
    "links": [
        {
            "id": "l1",
            "from": "Paris",
            "to": "Tokyo",
            "value": 15
        },
        {
            "id": "l2",
            "from": "Paris",
            "to": "New York",
            "value": 35
        },
        {
            "id": "l3",
            "from": "Paris",
            "to": "Riga",
            "value": 5
        },
        {
            "id": "l4",
            "from": "Abu Dhabi",
            "to": "Cape Town",
            "value": 8
        },
        {
            "id": "l5",
            "from": "Cape Town",
            "to": "Lake Placid",
            "value": 3
        },
        {
            "id": "l6",
            "from": "New York",
            "to": "Atlanta",
            "value": 21
        },
        {
            "id": "l7",
            "from": "New York",
            "to": "London",
            "value": 41
        },
        {
            "id": "l8",
            "from": "London",
            "to": "Moscow",
            "value": 18
        },
        {
            "id": "l9",
            "from": "Sydney",
            "to": "Tokyo",
            "value": 22
        },
        {
            "id": "l10",
            "from": "Moscow",
            "to": "Abu Dhabi",
            "value": 7
        },
        {
            "id": "l11",
            "from": "Lake Placid",
            "to": "New York",
            "value": 14
        },
        {
            "id": "l12",
            "from": "London",
            "to": "Paris",
            "value": 47
        },
        {
            "id": "l13",
            "from": "London",
            "to": "Riga",
            "value": 12
        },
        {
            "id": "l14",
            "from": "Sydney",
            "to": "Riga",
            "value": 3
        },
        {
            "id": "l15",
            "from": "Abu Dhabi",
            "to": "Rio de Janeiro",
            "value": 6
        }
    ]
}
Download Data