Connector Maps
Overview
Connector Maps are those used to represent routes, areas and some landscape elements (such as rivers) in a schematic way. They are quite popular in geography, airlines, economics and advertising. Also they suit well for describing places of touristic interest, so they are also rather claimed in touristic companies. Start and end points for connectors in these maps are defined by the latitude and longitude parameters.
Data
It's necessary to set latitude and longitude for the start and end point of each connector. Note that latitude of the point should be defined first and then the longitude for each point. There are two different data notations: the data can be arranged as objects or as arrays.
Object notation
Let's now create a small route map. This dataSet represents the route through the UK that connects several places of touristic interest.
// create data set
var data = anychart.data.set([
{points: [50.8, -3.6, 50.8, -1.6]},
{points: [50.8, -1.6, 51.5, -0.16], to: "New Forest National Park"},
{points: [51.5,-0.16, 51.7, -1.29]},
{points: [51.7, -1.29, 52.2, 0.27]},
{points: [52.2, 0.27, 53.3, -1.5], to: "Cambridge"},
{points: [53.3, -1.5, 54.5,-3.4], to: "Edinburgh"},
{points: [54.5, -3.4, 57.1, -2.19], to: "Aberdeen"}
]);
First two values are the longitude and latitude of the start point and the second pair of values are responsible for the end point coordinates.
That's how a Connector Map with this dataset will look like:
Now let's look how the same data will look in the array notation.
Array notation
When the data is being represented in the array mode, it's not necessary to mention the names of the default adjusted parameters.
var data = anychart.data.set([
[[50.8, -3.6, 50.8, -1.6]],
[[50.8, -1.6, 51.5, -0.16]],
[[51.5,-0.16, 51.7, -1.29]],
[[51.7, -1.29, 52.2, 0.27]],
[[52.2, 0.27, 53.3, -1.5]],
[[53.3, -1.5, 54.5,-3.4]],
[[54.5, -3.4, 57.1, -2.19]]
]);
Nothing has changed in our map appearance:
Settings
There are some parameters of our series and points can be adjusted through the data: for example, colors of the connectors, the point markers and so on. Let's look at the dataSet with some parameters set through it:
var data = anychart.data.set([
{points: [50.8, -3.6, 50.8, -1.6]},
{points: [50.8, -1.6, 51.5, -0.16], stroke:'red', to: "New Forest National Park", marker: {fill: "#9fa8da"}},
{points: [51.5,-0.16, 51.7, -1.29]},
{points: [51.7, -1.29, 52.2, 0.27]},
{points: [52.2, 0.27, 53.3, -1.5], to: "Cambridge"},
{points: [53.3, -1.5, 54.5,-3.4], to: "Edinburgh"},
{points: [54.5, -3.4, 57.1, -2.19], stroke:'green', to: "Aberdeen"}
]);
That's how the appearance of our map has changed after applying some settings through the dataSet:
Segments
One of the Connector Maps features is the ability to create segments: several connectors are connected as one point, creating segments of the route. Look at the code and sample below.
var data = anychart.data.set([
{points: [50.8, -3.6, 50.8, -1.6, 51.5, -0.16], stroke:'red', to: "New Forest National Park", marker: {fill: "#9fa8da"}},
{points: [51.5,-0.16, 51.7, -1.29, 52.2, 0.27, 53.3, -1.5], to: "Cambridge"},
{points: [53.3, -1.5, 54.5,-3.4], to: "Edinburgh"},
{points: [54.5, -3.4, 57.1, -2.19], stroke:'green', to: "Aberdeen"}
]);
There are several connectors created that consist of a number of segments. To create a multi-segmental connector add a pair of values (representing longitude and latitude) to the data of this connector. Watch the number of values: it should stay even in each point (connector) data.
Note: this sample uses third party proj4.js library, to learn how, why and figure out if you need it please see Map Projections article.
Altering Connectors
Connector settings
There are several settings can be adjusted for the series.
Curvature
As you might have noticed, all connectors in the samples above look like curves of the same curvature. Let's adjust this parameter with the .curvature() method. Let's make the connectors series look as straight lines:
// changing the curvature of the series
series.curvature(0);
It's possible to define curvature for each connector separately through the data, like in the sample below:
var data = anychart.data.set([
{points: [50.8, -3.6, 51.1, -2.8, 50.7, -2.4, 50.8, -1.6], stroke:'red', to: "New Forest National Park", marker: {fill: "#9fa8da"}},
{points: [50.8, -1.6, 51.5, -0.16], stroke:'green', to: "Stonehenge", curvature: -0.6},
{points: [51.5,-0.16, 51.7, -1.29], to: "London"},
{points: [51.7, -1.29, 52.2, 0.27, 53.3, -1.5], to: "Cambridge"},
{points: [53.3, -1.5, 53.4, -3.02], to: "Peak District National Park"},
{points: [53.4, -3.02,54.1,-3.29], to: "Liverpool", curvature:-0.2},
{points: [54.1, -3.29,54.4,-3.18, 54.5,-3.4, 55.2, -1.9], to: "Nunnykirk Caravan Club Site"},
{points: [55.2, -1.9, 56.4, -3.5], to: "Edinburgh", curvature: 0.6},
{points: [56.4, -3.5, 57.1, -2.19], stroke:'green', to: "Aberdeen", curvature:1}
]);
Note that curvature may be negative. Negative value make the segment's curve go in the other direction.
Start/end size
Two more features of our map connector series are .startSize() and .endSize(). These methods can make a connector look more like an arrow, tapering or expanding its curve. These settings are also available to be adjusted through the data set. In the next sample we've defined both settings for the series in general.
// changing the startSize and endSize of the connectors
series.startSize(10);
series.endSize(0);
Series colors
As soon as our connectors acquire some width, we can set the filling color for them. There are several method used for changing the default colors: fill() and stroke() methods are used to color connectors in normal state, colors can be also defined through the dataset. It's possible to change colors for hovered and selected states using hoverFill(), hoverStroke(), selectFill() and selectStroke() methods. Note that fill color is used only with start or end size greater than zero. Only stroke color is visible by default.
// setting colors for hovered and selected
series.fill("#FF9966");
series.stroke("#CCCC99");
series.hoverFill("#996633");
series.selectFill("#996633");
series.hoverStroke("#CCCC99");
series.selectStroke("#CCCC99");
Curvature parameter cannot be different for hovered and selected states, as well as the endSize() and startSize() parameters. They stay the same in all states.
Markers
To change the position of a marker on a connector use position() method. It accepts string values like "start", "end", "middle", or ratio from 0 to 1, or a percent value as a parameter. This method manages each marker's position on a connector and can be defined through the dataSet as well.
The anchor of the marker depends on its position and its connector's curvature, though it can be adjusted. Use the anchor() method to set it. You will need to define a string value, chosing one from the Anchor type list Look at the next sample. Anchors are set for the markers, which are transformed to look more like arrows using the type() method. All default marker types can be found on the Marker Type list.
// create data set
var data = anychart.data.set([
{points: [51.5, -3.2, 57.1, -2.19], from: "Cardiff", to: "Aberdeen", time: "2h 20m"},
{points: [55.9, -3.2, 51.45, 0], from: "Edinburgh", to: "London", time: "1h 15m"},
{points: [54.7, -5.9, 57.6,-3.9], from: "Dublin", to: "Iverness", time: "1h 15m"}
]);
// setting the marker position
var markers = series.markers();
markers.position("end");
// setting the marker type
markers.type(anychart.enums.MarkerType.ARROWHEAD);
markers.size(15);
// setting the anchor
markers.anchor("leftCenter");
The size of markers were changed as well using the .size() method.
Another way to emphasize the start and/or end points is to create a Marker series. You can find the instructions in the Map Marker series tutorial.
Labels and Tooltips
Labels and tooltips in Connector Maps are to be adjusted with the labels() and tooltip() methods.
Adjusting the position of labels is similar to adjusting it for the markers. Set "start", "end", "middle", or ratio from 0 to 1, or a percent value for the position() method.
The anchor of the label depends on its position and its connector's curvature, but can be adjusted as well by using the anchor() method.
To change the content of labels use format() method. To know more about labels and methods of adjusting then look up the Labels tutorial.
Tooltips have similar methods of adjusting. Use format() to change the content of the tooltip body and titleFormat() to change the content of the tooltip title content. Its position and anchor are being set using the position() and anchor() methods as well. There are a lot of different tooltip features that can be adjusted. Find more about tooltips in the Tooltip adjusting tutorial.
All label settings can be also defined through the dataSet as well.
// create data set
var data = anychart.data.set([
{points: [51.5, -3.2, 57.1, -2.19], from: "Cardiff", to: "Aberdeen", time: "2h 20m"},
{points: [55.9, -3.2, 51.45, 0], from: "Edinburgh", to: "London", time: "1h 15m", label:{anchor:"leftTop"}},
{points: [54.7, -5.9, 57.6,-3.9], from: "Dublin", to: "Iverness", time: "2h 35m"}
]);
// set the labels
var labels = series.labels();
labels.enabled(true);
labels.position("end");
labels.anchor("leftBottom");
labels.format("To {%to}");
// tooltip adjusting
series.tooltip().format("A flight from {%from} to {%to} takes at least {%time}");
Maps Usage
Let's create three different maps with connectors to understand the specifics of each map type. Here we will use another series together with connectors. You can combine any types of series you need with connectors.
Route Map
This Map type is intended to show some route that can be useful for a traveler or in any other case when we need to give the instructions about getting somewhere.
Let's create a map showing the touristic route through France.
Flight Map
This Map type can be found almost on all airlines' sites as it is used to show customers: 1) how a plane goes over a planet during each flight; 2) which flights to which direcions the airline provides.
Let's create a sample showing 7 most popular flights through Australia.
Areas and Landscape
This Map can be used for showing some borders between countries, landscapes on topographic maps, war borders. Let's create a map representing the border separating the United States and Confederate States in the American Civil War.