Highmaps display correctly mappoints but not maplines

user_14235342 0
Viewed 110

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 ?

highcharts
2 Answers

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: <a href="http://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json">Île-de-France</a>'
    },



    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

user_25883680
user_105228420
Related