HighMap chart with lat long data

Question

I am looking at the highmap from highcharts for angular 2 and looking at this demo:

http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview

Here, the series is like:

series : [{
    name: 'UTC',
    data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
        return { code: code };
    })
}, {
    name: 'UTC + 1',
    data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU','SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
        return { code: code };
    })
}, {
    name: 'UTC + 2',
    data: ['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'].map(function (code) {
        return { code: code };
    })
}, {
    name: 'UTC + 3',
    data: ['RU'].map(function (code) {
        return { code: code };
    })
}]

However, I want to provide coordindates (lat long) to plot the points. Is it possible to do this? If yes, how? Please note that I am looking for a solution specific to Angular 2

score 0 · Answer 1 · answered Apr 17 '18 at 19:16

If you can get your data in terms of latitudes and longitudes, it can be plotted on the map using the library proj4js. This library has to be included to work internally with Highmaps, need not do anything explicitly.

Your data has to be converted to latitude/longitude like you see here : http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/

Check my other angular post here for a full working example in angular2+ versions: Highmaps chart is empty in Angular 5

HighMap chart with lat long data

1 Answers1