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:

JsFiddle Playground

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:

JsFiddle Playground

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:

JsFiddle Playground

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"}
	]);

JsFiddle Playground

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.

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);

JsFiddle Playground

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}
    ]);

JsFiddle Playground

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);

JsFiddle Playground

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");

JsFiddle Playground

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");

JsFiddle Playground

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

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 .textFormatter() method. To know more about labels and methods of adjusting then look up the Labels tutorial.

Tooltips have similar methods of adjusting. Use .textFormatter() to change the content of the tooltip body and .titleFormatter() to change the content of the tooltip title content. Its position and anchor are being set using the {api:}.position(){api} and {api:}.anchor(){api} 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.textFormatter("To {%to}");

	// tooltip adjusting
	series.tooltip().textFormatter("A flight from {%from} to {%to} takes at least {%time}");

JsFiddle Playground

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.

JsFiddle Playground

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.

JsFiddle Playground

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.

JsFiddle Playground

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.0.1 version to see the up to date information.