tcg15
Posts: 6
Joined: Mon Mar 21, 2022 8:37 am

A global map with all the UTC timezones.

Hello. I am writing here as a last hope about the problem i have because i got lost in the API docs. I need to make a global map with each country having its UTC Timezones (Some countries have more than 1 timezone, that i know). I looked at the categorized example about the EU's example and added it to the global map. However, i noticed that each timezone with its appropriate countries are added manually. Is there a full fledged global example on how to implement it better (if there is such way). This is what i am doing right now, and i don't know if it is correct. In short what i am doing, take all countries, show them then show another layer on top of them with the color and utc zone.

Code: Select all

  
  series: [
      /* Main map */
      {
        keys: ['hc-key', 'value', 'color'],

        type: 'map',
        name: 'Other zones',
        dataLabels: {
          enabled: false,
          format: '{point.name}',
        },
        allAreas: false,
        data: data.map((x: any) => {
          x.push('white');
          return x;
        }),
      },
      /* UTC */
      {
        keys: ['hc-key', 'color'],
        color: 'rgb(240,128,128)',
        type: 'map',
        name: 'UTC',

        data: [['IE'], ['IS'], ['GB'], ['PT']].map((x: any) => {
          x[0] = x[0].toLowerCase();
          x.push('rgb(240,128,128)');
          return x;
        }),
      },
      /* UTC + 1 */
      {
        keys: ['hc-key', 'color'],
        color: 'rgb(220,20,60)',
        type: 'map',
        name: 'UTC + 1',
        data: [
          ['NO'],
          ['SE'],
...
          ['MK'],
        ].map((x: any) => {
          x[0] = x[0].toLowerCase();
          x.push('rgb(220,20,60)');
          return x;
        }),
      },
      /* UTC + 2 */
      {
        keys: ['hc-key', 'color'],
        color: 'rgb(178,34,34)',
        type: 'map',
        name: 'UTC + 2',

        data: [
          ['FI'],
          ['EE'],
          ['LV'],
...
        ].map((x: any) => {
          x[0] = x[0].toLowerCase();
          x.push('rgb(178,34,34)');
          return x;
        }),
      },
      /* UTC + 3 */
      {
        keys: ['hc-key', 'color'],
        color: 'rgb(139,0,0)',
        type: 'map',
        name: 'UTC + 3',

        data: [
            ['RU'],
            ['BR'],
...
          ,
        ].map((x: any) => {
          console.log(x[0])
          x[0] = x[0].toLowerCase();
          x.push('rgb(139,0,0)');
          return x;
        }),
      },
      {
        keys: ['hc-key', 'color'],
        color: 'rgb(119,0,0)',
        type: 'map',
        name: 'UTC + 4',

        data: [
            
        ].map((x: any) => {
          console.log(x[0])
          x[0] = x[0].toLowerCase();
          x.push('rgb(139,0,0)');
          return x;
        }),
      },
    ],
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: A global map with all the UTC timezones.

Hi,

Welcome to our forum and thanks for contacting us with your question!

Setting Timezones manually is currently the only option. We don't have an official example for the global map., but I think you can simplify your approach. Here is an example demo: https://jsfiddle.net/BlackLabel/28hcgfzx/

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
tcg15
Posts: 6
Joined: Mon Mar 21, 2022 8:37 am

Re: A global map with all the UTC timezones.

Hello, the approach you suggested is indeed easier, however i am trying to use it with Angular and its appropriate packages (angular-highcharts). However, the problem i get is

Code: Select all

type '[string]' is not assignable to type 'number | SeriesMapDataOptions | [string, number]'.
  Type '[string]' is not assignable to type '[string, number]'.
    Source has 1 element(s) but target requires 2.
In Series array, each object with data array expects [string ,number]. Is there a way to not add a number?
Your example does not provide numers, so i thought i might be doing something wrong.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: A global map with all the UTC timezones.

Hi,

May I ask what version of Highcharts do you use in your project? Try to change series.keys to ['iso-a2', 'code'] in your code and let me know if it helped.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
tcg15
Posts: 6
Joined: Mon Mar 21, 2022 8:37 am

Re: A global map with all the UTC timezones.

I use the following

Code: Select all

   "highcharts": "^10.0.0"
    "highcharts-angular": "^3.0.0"
I have fixed my issue, however the legend now is bugged and overlaps.
The config is from Categorized Areas example
Highchart map legend overlap
Highchart map legend overlap
image_2022-04-03_174916.png (73.7 KiB) Viewed 1602 times
I will provide the full config

Code: Select all

  chartOptions: Highcharts.Options = {
    chart: {
      map: worldMap,
    },
    plotOptions: {
      map: {
        allAreas: false,
      },
    },
    title: {
      text: '',
    },
    subtitle: {
      /*  text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>', */
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        alignTo: 'spacingBox',
      },
    },
    legend: {
      margin: 10,
      padding: 10,
      enabled: true,
    },

    credits: {
      enabled: false,
    },
    series: [...]
    	}
    }
    responsive: {},
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: A global map with all the UTC timezones.

Hi,

Happy to hear you found the solution.

I don't see anything particular in your config, that could affect this legend behaviour. I was trying to reproduce your problem, but in my case everything is working correctly.

Could you please provide an example demo of your chart with series data?

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
tcg15
Posts: 6
Joined: Mon Mar 21, 2022 8:37 am

Re: A global map with all the UTC timezones.

I just eliminated the legends because it would come too crowded. What i have is another way of doing it but it's not working.
In short, I want to visualize white map, get the User's current location (in that case me), and update the map by coloring the country where the User is from. I still have

Code: Select all

series: [{ ... }, { ... }, { ... },{ ... } ....]   
with multiple objects and upon Api's response, i update the chartOptions by the current method

Code: Select all

// data information (big array with strings)
const data = [
  ['fo', 0],
  ['um', 1],
  ['us', 2],
  ['jp', 3],
  ['sc', 4],
  ['in', 5],
  ['fr', 6],
  ['fm', 7],
  ['cn', 8],
  ['pt', 9],
  ['sw', 10],
  ['sh', 11],
  ['br', 12],
  ['ki', 13],
  ['ph', 14],
  ['mx', 15],
  ['es', 16],
  ['bu', 17],
  ['mv', 18],
  ['sp', 19],
  ['gb', 20],
  ['gr', 21],
  ['as', 22],
  ['dk', 23],
  ['gl', 24],
  ['gu', 25],
  ['mp', 26],
  ['pr', 27],
  ['vi', 28],
  ['ca', 29],
  ['st', 30],
  ['cv', 31],
  ['dm', 32],
  ['nl', 33],
  ['jm', 34],
  ['ws', 35],
  ['om', 36],
  ['vc', 37],
  ['tr', 38],
  ['bd', 39],
  ['lc', 40],
  ['nr', 41],
  ['no', 42],
  ['kn', 43],
  ['bh', 44],
  ['to', 45],
  ['fi', 46],
  ['id', 47],
  ['mu', 48],
  ['se', 49],
  ['tt', 50],
  ['my', 51],
  ['pa', 52],
  ['pw', 53],
  ['tv', 54],
  ['mh', 55],
  ['cl', 56],
  ['th', 57],
  ['gd', 58],
  ['ee', 59],
  ['ag', 60],
  ['tw', 61],
  ['bb', 62],
  ['it', 63],
  ['mt', 64],
  ['vu', 65],
  ['sg', 66],
  ['cy', 67],
  ['lk', 68],
  ['km', 69],
  ['fj', 70],
  ['ru', 71],
  ['va', 72],
  ['sm', 73],
  ['kz', 74],
  ['az', 75],
  ['tj', 76],
  ['ls', 77],
  ['uz', 78],
  ['ma', 79],
  ['co', 80],
  ['tl', 81],
  ['tz', 82],
  ['ar', 83],
  ['sa', 84],
  ['pk', 85],
  ['ye', 86],
  ['ae', 87],
  ['ke', 88],
  ['pe', 89],
  ['do', 90],
  ['ht', 91],
  ['pg', 92],
  ['ao', 93],
  ['kh', 94],
  ['vn', 95],
  ['mz', 96],
  ['cr', 97],
  ['bj', 98],
  ['ng', 99],
  ['ir', 100],
  ['sv', 101],
  ['sl', 102],
  ['gw', 103],
  ['hr', 104],
  ['bz', 105],
  ['za', 106],
  ['cf', 107],
  ['sd', 108],
  ['cd', 109],
  ['kw', 110],
  ['de', 111],
  ['be', 112],
  ['ie', 113],
  ['kp', 114],
  ['kr', 115],
  ['gy', 116],
  ['hn', 117],
  ['mm', 118],
  ['ga', 119],
  ['gq', 120],
  ['ni', 121],
  ['lv', 122],
  ['ug', 123],
  ['mw', 124],
  ['am', 125],
  ['sx', 126],
  ['tm', 127],
  ['zm', 128],
  ['nc', 129],
  ['mr', 130],
  ['dz', 131],
  ['lt', 132],
  ['et', 133],
  ['er', 134],
  ['gh', 135],
  ['si', 136],
  ['gt', 137],
  ['ba', 138],
  ['jo', 139],
  ['sy', 140],
  ['mc', 141],
  ['al', 142],
  ['uy', 143],
  ['cnm', 144],
  ['mn', 145],
  ['rw', 146],
  ['so', 147],
  ['bo', 148],
  ['cm', 149],
  ['cg', 150],
  ['eh', 151],
  ['rs', 152],
  ['me', 153],
  ['tg', 154],
  ['la', 155],
  ['af', 156],
  ['ua', 157],
  ['sk', 158],
  ['jk', 159],
  ['bg', 160],
  ['qa', 161],
  ['li', 162],
  ['at', 163],
  ['sz', 164],
  ['hu', 165],
  ['ro', 166],
  ['ne', 167],
  ['lu', 168],
  ['ad', 169],
  ['ci', 170],
  ['lr', 171],
  ['bn', 172],
  ['iq', 173],
  ['ge', 174],
  ['gm', 175],
  ['ch', 176],
  ['td', 177],
  ['kv', 178],
  ['lb', 179],
  ['dj', 180],
  ['bi', 181],
  ['sr', 182],
  ['il', 183],
  ['ml', 184],
  ['sn', 185],
  ['gn', 186],
  ['zw', 187],
  ['pl', 188],
  ['mk', 189],
  ['py', 190],
  ['by', 191],
  ['cz', 192],
  ['bf', 193],
  ['na', 194],
  ['ly', 195],
  ['tn', 196],
  ['bt', 197],
  ['md', 198],
  ['ss', 199],
  ['bw', 200],
  ['bs', 201],
  ['nz', 202],
  ['cu', 203],
  ['ec', 204],
  ['au', 205],
  ['ve', 206],
  ['sb', 207],
  ['mg', 208],
  ['is', 209],
  ['eg', 210],
  ['kg', 211],
  ['np', 212],
];


// After successfull response
   const code = response.countryCode.toLowerCase();
      data.find((mainArray) => {
        if (mainArray[0] === code) {
          mainArray.push('red');
        }
      });
        this.chartOptions = {
          title: {
            text: 'Updated',
          },
          series: [
            {
              type: 'map',
              data: data.map((x: any) => x),
            },
          ],
        };
The country i am from is not colored, however the title updates.(The API works fine, i am using

Code: Select all

http://ip-api.com/json
) I've come to a some kind of solution where it would color the correct country but the labels won't contain the "name" property in each series object.
What would be the way to do it?
My final idea is: All the countries to have labels: Name - UTC (1,2,3....) and not lose their labels by being colored.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: A global map with all the UTC timezones.

Hi,

To sum up, you don't need a different colour for each UTC zone, just one colour pushed to the fetched country, right? In that case you can use load event, where you will update point.color after checking if point.code is the same as country code from API.

Check the following approach and let me know if that was what you were looking for:
http://jsfiddle.net/BlackLabel/r94m3vbu/

API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... int#update

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Maps”