Custom Lines on a Map
Overview
AnyChart allows you to add any number of custom lines to a map, using them you can show routes, roads, rivers or custom borders.
The lines are almost the same object as connectors, the only difference is that connector behaves as a single object and line is a series of points/markers connected with a line.
Use connectors if you want to draw a river or a road, use line if you want to show some way with stops (stations), for example transportation plan where each point is an intermediate warehouse.
Note, that you can define actions to be performed on marker click (just the same way as for chart elements ) or handle events in JavaScript and get the moment when point is selected.
Lines can be drawn by points latitude and longitude coordinates or by the regions centers of the given map. Please refer to Points/Markers Positioning for detailed description of setting point coordinates.
Adding line
In the sample below we will show a map of the world and add line that will show the first voyage of Christopher Columbus: line will connect Spain and Dominican Republic through Canary Island,
markers at the stops will contain an information about this stops. Marker labels will only name the stops and tooltips show some additional data.
To add line to a map we need to create <series> of the Line type to <data> section, just like that:
03 |
<point name="Palos de la Frontera" y="37.233333" x="-6.9" /> |
04 |
<point name="La Gomera" y="28.116667" x="-17.233333" /> |
05 |
<point name="San Salvador" link="BS" /> |
As you can see we've just added three points - two by latitude and longitude, and one - by binding it to the Bahamas,
in our case it is important to put the first point to the Palos de la Frontera - the port on the coast of Spain,
and second to La Gomera the second smallest island of the Canary Island, where
Columbus became romantically involved (according to some sources) with Beatriz de Bobadilla and stayed for a month.
You can learn why the last point is placed to the Bahamas and not to some certain island, if you launch the live sample and hover the last point of Columbus journey.
To add some information about the stops we will add custom data attribute to them and later use
this attribute value in tooltips. Sample point can look like that:
01 |
<point name="Palos de la Frontera" y="37.233333" x="-6.9"> |
03 |
<attribute name="info"><![CDATA[%cbeginOn the evening of <b>August 3, 1492</b>, Columbus<br> |
04 |
departed from Palos with three ships; one larger carrack,<br> |
05 |
<i>Santa Maria</i>, and two smaller caravels, <i>Pinta</i> and <i>Santa Clara</i>.%cend]]></attribute> |
In the same way we can add description to other points and then just configure labels and tooltips
in <line_series>:
02 |
<label_settings enabled="true"> |
03 |
<format><![CDATA[{%Name}]]></format> |
05 |
<tooltip_settings enabled="true"> |
06 |
<font render_as_html="true" /> |
08 |
<font size="12" face="Verdana"><![CDATA[{%info}]]></font> |
Now we are ready - add line configuration and line series to the map data plot with world map amap
file set as map source and enjoy:
Live Sample: Sample Flash Map of First Columbus Voyage
