Routes
A round-the-world itinerary as one route along great circles (stops, arrows, total distance in the tooltip) and a dashed shipping lane through named waypoints.
Open the chart without page chrome ↗Drawing width at least 900 px. Scroll within the chart on smaller screens.
const options = {
chart: {
height: 480,
toolbar: {
show: false
},
type: "map"
},
series: [
{
name: "Itinerary",
type: "route",
labels: true,
data: [
{
name: "Round the world",
path: [
{
name: "Berlin",
lon: 13.4,
lat: 52.52
},
{
name: "Dubai",
lon: 55.27,
lat: 25.2
},
{
name: "Singapore",
lon: 103.82,
lat: 1.35
},
{
name: "Sydney",
lon: 151.21,
lat: -33.87
},
{
name: "Los Angeles",
lon: -118.24,
lat: 34.05
},
{
name: "New York",
lon: -74,
lat: 40.7
},
{
name: "Berlin",
lon: 13.4,
lat: 52.52
}
]
}
]
},
{
name: "Shipping",
type: "route",
dash: "7 5",
width: 2,
data: [
{
name: "Shanghai → Rotterdam",
geodesic: false,
path: [
{
name: "Shanghai",
lon: 121.5,
lat: 31.2
},
{
name: "Singapore",
lon: 103.8,
lat: 1.3
},
{
name: "Colombo",
lon: 79.9,
lat: 6.9
},
{
name: "Gulf of Aden",
lon: 48,
lat: 12.5
},
{
name: "Suez",
lon: 32.5,
lat: 30
},
{
name: "Gibraltar",
lon: -5.6,
lat: 36
},
{
name: "Rotterdam",
lon: 4.5,
lat: 51.9
}
]
}
]
}
],
plotOptions: {
map: {
fit: "map",
legend: {
show: false
}
}
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
import 'west-coast-charts/maps/world' // registers the map shapes
WestCoastCharts.use(types).use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
chart: {
height: 480,
toolbar: {
show: false
},
type: "map"
},
series: [
{
name: "Itinerary",
type: "route",
labels: true,
data: [
{
name: "Round the world",
path: [
{
name: "Berlin",
lon: 13.4,
lat: 52.52
},
{
name: "Dubai",
lon: 55.27,
lat: 25.2
},
{
name: "Singapore",
lon: 103.82,
lat: 1.35
},
{
name: "Sydney",
lon: 151.21,
lat: -33.87
},
{
name: "Los Angeles",
lon: -118.24,
lat: 34.05
},
{
name: "New York",
lon: -74,
lat: 40.7
},
{
name: "Berlin",
lon: 13.4,
lat: 52.52
}
]
}
]
},
{
name: "Shipping",
type: "route",
dash: "7 5",
width: 2,
data: [
{
name: "Shanghai → Rotterdam",
geodesic: false,
path: [
{
name: "Shanghai",
lon: 121.5,
lat: 31.2
},
{
name: "Singapore",
lon: 103.8,
lat: 1.3
},
{
name: "Colombo",
lon: 79.9,
lat: 6.9
},
{
name: "Gulf of Aden",
lon: 48,
lat: 12.5
},
{
name: "Suez",
lon: 32.5,
lat: 30
},
{
name: "Gibraltar",
lon: -5.6,
lat: 36
},
{
name: "Rotterdam",
lon: 4.5,
lat: 51.9
}
]
}
]
}
],
plotOptions: {
map: {
fit: "map",
legend: {
show: false
}
}
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export maps-routes.json --out maps-routes.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/maps/routes/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?