Back

Driving time between cities on the map

Map chart that connects nodes with links and display estimated driving time between the locations in the label. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

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.drivingTime;
                    },
                "node": {
                    "fillColor": "#6f52b8",
                    "lineColor": "#eab404",
                    "lineWidth": 3
                },
                "nodeLabel": {
                    "backgroundStyle": {
                        "fillColor": "#6f52b8",
                        "lineColor": "#6f52b8"
                    },
                    "textStyle": {
                        "fillColor": "#eab404"
                    }
                },
                "linkLabel": {
                    "backgroundStyle": {
                        "fillColor": "#b0dc0b",
                        "lineColor": "#b0dc0b"
                    },
                    "textStyle": {
                        "fillColor": "#1c7cd5"
                    }
                }
            }
        }
    ],
    "navigation": {
        "initialLat": 35.04409,
        "initialLng": -90.246213,
        "initialZoom": 4,
        "minZoom": 4
    },
    "advanced": {
        "pointer": {
            "noClickOnDoubleClick": false
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/driving-time.json",
            "perBoundsData": false
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
{
    "nodes": [
        {
            "id": "Squaw Valley",
            "coordinates": [
                -119.181449,
                36.707146
            ]
        },
        {
            "id": "Atlanta",
            "coordinates": [
                -84.388846,
                33.752504
            ]
        },
        {
            "id": "New York",
            "coordinates": [
                -73.996705,
                40.74838
            ]
        },
        {
            "id": "Lake Placid",
            "coordinates": [
                -81.364918,
                27.294474
            ]
        }
    ],
    "links": [
        {
            "from": "New York",
            "to": "Atlanta",
            "drivingTime": "1 day 13 hours 3 mins"
        },
        {
            "from": "New York",
            "to": "Squaw Valley",
            "drivingTime": "3 days 18 hours"
        },
        {
            "from": "New York",
            "to": "Lake Placid",
            "drivingTime": "1 day 17 hours 33 mins"
        },
        {
            "from": "Lake Placid",
            "to": "Squaw Valley",
            "drivingTime": "3 days 15 hours"
        },
        {
            "from": "Atlanta",
            "to": "Squaw Valley",
            "drivingTime": "3 days 10 hours"
        }
    ]
}
Download Data