CODEWITHSUNDEEP
highcharts
vegaelce
vegaelce

Reputation: 145

Highmaps display correctly mappoints but not maplines

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 ?

Upvotes: 2

Views: 513

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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

Upvotes: 0

Barbara Laird
Barbara Laird

Reputation: 12717

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

Upvotes: 2

Related Questions