highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
12.01k stars 3.62k forks source link

Add Javascript TopoJSON to map collection #19021

Open FusionSnowball opened 1 year ago

FusionSnowball commented 1 year ago

Description of the feature

The map collection (https://code.highcharts.com/mapdata/) includes a Javascript file for each map which uses the GeoJSON format. Add a similar Javascript file for each map using TopoJSON.

This will allow systems that have made use of the Javascript map data files to switch to the preferred TopoJSON format more easily.

Library related to the feature

Highcharts Map


You can vote for this feature by adding a thumbs-up reaction to this post.

KacperMadej commented 1 year ago

Hi @FusionSnowball

Thank you for submitting the feature request.

The Javascript files are redundant with GeoJSON files as the only difference is the GeoJSON's JSON object being wrapped like so:

Highcharts.maps[{{map_name}}] = {{JSON}};

Getting the same structure is as simple as this: After fetching the TopoJSON file register it on the Highcharts.maps object with a name that later is used in the chart configuration. Relevant code:

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/africa.topo.json'
    ).then(response => response.json());

    Highcharts.maps['custom/africa'] = topology;

    ...

        // Create the chart
    Highcharts.mapChart('container', {
        chart: {
            map: 'custom/africa'
        },

This gives an option to use the TopoJSON file as the map source and load in the chart/map configuration via string in chart.map.

Live demo: https://jsfiddle.net/BlackLabel/qcypz0ug/

This will allow systems that have made use of the Javascript map data files to switch to the preferred TopoJSON format more easily.

My answer covers only the main usage. Could you elaborate on your needs if they are any different?