Highmaps display correctly mappoints but not maplines - highcharts

Question

I need to use Highmaps to display on a map some information such as points, lines...
Displaying the initial map and some mappoint (with latitude/longitude coordinates) works well.
But when I add a simple mapline (linestring) between 2 points already displayed on the map, the mapline is not drawn.
Here is an example : https://jsfiddle.net/vegaelce/4L928trp/
The 2 mappoints are correctly placed on the map with the following data :
data: [{
name: 'Paris',
geometry: {
type: 'Point',
coordinates: [2.34,48.86]
}
}, {
name: 'Orly',
geometry: {
type: 'Point',
coordinates: [2.40,48.75]
}
}]
But the mapline (named "road") added to link the 2 points is not displayed with the following data :
data: [{
geometry: {
type: 'LineString',
coordinates: [
[2.34,48.86], // Paris
[2.40,48.75] // Orly
]
}
}],
Do I need to add something else ?

Answer 1

If you use the TopoJSON maps, what you are trying to do works. https://jsfiddle.net/blaird/y1Ld6bgs/1/
(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json'
).then(response => response.json());
// Prepare demo data. The data is joined to map using value of 'hc-key'
// property by default. See API docs for 'joinBy' for more info on linking
// data and map.
var data = [
["fr-idf-se", 69699],
["fr-idf-hd", 14200],
["fr-idf-ss", 17301],
["fr-idf-vo", 14350],
["fr-idf-vm", 29728],
["fr-idf-vp", 28610],
["fr-idf-yv", 21667],
["fr-idf-es", 16494]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: 'Highcharts Maps basic demo'
},
subtitle: {
text: 'Source map: Île-de-France'
},
series: [{
mapData: Highcharts.maps["countries/fr/fr-idf-all"],
data: data,
name: "States",
borderColor: "#ffffff",
joinBy: ["hc-key", "CODE_REGION"],
keys: ["CODE_REGION", "value"]
}, {
type: 'mapline',
data: [{
geometry: {
type: 'LineString',
coordinates: [
[2.34, 48.86], // Paris
[2.40, 48.75] // Orly
]
}
}],
showInLegend: true,
lineWidth: 2,
name: "Road",
nullColor: '#f00',
color: '#f00',
enableMouseTracking: false
}, {
type: 'mappoint',
color: '#333',
name: "Towns",
showInLegend: true,
data: [{
name: 'Paris',
geometry: {
type: 'Point',
coordinates: [2.34, 48.86]
}
}, {
name: 'Orly',
geometry: {
type: 'Point',
coordinates: [2.40, 48.75]
}
}],
enableMouseTracking: false
}]
});
})();
In the Adding Points and Lines doc: https://www.highcharts.com/docs/maps/adding-points-and-lines
Prior to v10, the coordinate system used in most of our maps was a
custom one, where both the X and Y values ranged from 0 to some
thousands. This still applies when loading GeoJSON maps rather than
TopoJSON maps from the Map Collection. With the support of the proj4js
library, points could be placed by the lon and lat options. Without
proj4.js, points were added as x, y pairs on the same coordinate
system as the map. Maplines however were given as paths.
It explains that if you don't use the Topo data, you'll have to either convert the coordinates, or use the same coordinate system as the map for lines.
P.S. Not sure why setting color of the line doesn't work, but setting nullColor does. But, that is what I had to do to make the line red

Answer 2

After digging into I think that it is a bug and I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/17086