Page 1 of 1

Issue in loading highmap with [email protected]

Posted: Sun Aug 07, 2022 2:48 pm
by samadhan17
Hi,
I am facing issue while getting chart display, no error coming in console.
I am using a [email protected] version and [email protected].
I am using geojson file, please help.
In DOM getting labels and axis for highmap but map is not getting displayed.
Image
Image

Code: Select all

import HighMaps from 'highcharts/highmaps';
import * as worldMap from '@highcharts/map-collection/custom/world-highres.geo.json';


    public mapHighcharts = HighMaps;
    public mapHighchartOptions: HighMaps.Options = {};
    public mapChangeUpdateFlag: boolean = false;

this.mapHighchartOptions = {
            chart: {
                //@ts-ignore
                map: <any>worldMap
            },
            title: {
                text: undefined
            },
            credits: {
                enabled: false
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    alignTo: "spacingBox"
                }
            },
            legend: {
                enabled: true
            },
            colorAxis: {
                min: 0
            },
            series: [
                {
                    type: 'map',
                    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]],
                    name: 'Orders For',
                    states: {
                        hover: {
                            color: '#BADA55'
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    },
                    allAreas: false
                }
            ],
        };

        this.mapChangeUpdateFlag = true;

Re: Issue in loading highmap with [email protected]

Posted: Mon Aug 08, 2022 2:28 pm
by kamil.m
Hi there,

I think that not all of your images have loaded into your post.
Since Highcharts version 7 is already 2 years old, we always recommend our clients to update to the newest version.

If that won't help, or for some reason, you don't want to do that, please recreate your issue in an online editor with Angular (i.e Stackblitz or Codesanbox) so that I can take a look at your config and work on the solution.

In the meantime, please take a look at the demo below and compare it with your local one. This is a basic Highmaps demo with Angular included.
https://stackblitz.com/edit/highcharts- ... mponent.ts

Waiting for your reply,
Best regards!

Re: Issue in loading highmap with [email protected]

Posted: Mon Aug 08, 2022 4:25 pm
by samadhan17
Thanks for help. Due to wrong imports it is not getting loaded. Now working fine.

Re: Issue in loading highmap with [email protected]

Posted: Mon Aug 08, 2022 7:38 pm
by kamil.m
Great to hear that!

In case of any other questions, feel free to contact us,
Best regards!

Re: Issue in loading highmap with [email protected]

Posted: Tue Aug 09, 2022 5:40 am
by samadhan17
Hi, In same above example https://stackblitz.com/edit/highcharts ... mponent.ts,
After adding mappoints with lat and long, it is not getting placed properly in map view.
Since mumbai and pune are part of India, but in map getting it displayed somewhere else.
How to get is correctly located on map with lat and long. I have used pro4j library as well to support lat and long.

Code: Select all

import proj4 from 'proj4';
(HighMaps as any).win = (HighMaps as any).win || {};
(HighMaps as any).win.proj4 = proj4;
	 
	 {
                    type: "mappoint",
                    name: "cities",
                    marker: {
                        radius: 5,
                        fillColor: "tomato"
                    },
                    data: [
                        {

                            name: "Mumbai",
                            lat: 19.09,
                            lon: 72.03
                        },
                        {
                            name: "Pune",
                            lat: 18.58,
                            lon: 73.68
                        }
                    ]
         }

Re: Issue in loading highmap with [email protected]

Posted: Tue Aug 09, 2022 7:48 am
by kamil.m
Hi there,

We already have answered a similar question, please take a look at the link below:
https://support.highcharts.com/support/ ... arts-maps-

Regards!

Re: Issue in loading highmap with [email protected]

Posted: Tue Aug 09, 2022 11:07 am
by samadhan17
Hi I tried with addition of pro4j but my points are wrong placed.
In map view position of map points are not at right location.
Points are getting placed in wrong location.

Can you please help to place points at right location.
My lat and lon are correct but on map there are not pointing correctly.
And on zoom in-out these points shift to other area in map.

Code: Select all

import proj4 from 'proj4';
(HighMaps as any).win = (HighMaps as any).win || {};
(HighMaps as any).win.proj4 = proj4;
	 
	 {
                    type: "mappoint",
                    name: "cities",
                    marker: {
                        radius: 5,
                        fillColor: "tomato"
                    },
                    data: [
                        {

                            name: "Mumbai",
                            lat: 19.09,
                            lon: 72.03
                        },
                        {
                            name: "Pune",
                            lat: 18.58,
                            lon: 73.68
                        }
                    ]
         }

Re: Issue in loading highmap with [email protected]

Posted: Tue Aug 09, 2022 1:09 pm
by kamil.m
Could you please reproduce that issue in an online editor with Angular? It can be Codesandbox or Stackblitz. Once you do that, I can work on a solution for your use case.

I need to take a look at your whole project, not only a small piece of code.

Best regards!

Re: Issue in loading highmap with [email protected]

Posted: Wed Aug 10, 2022 1:13 pm
by samadhan17
Hi, Please help with this https://stackblitz.com/edit/angular-ivy ... mponent.ts.

I need help to add pro4j library support and to show map point at right location in map view.

Re: Issue in loading highmap with [email protected]

Posted: Thu Aug 11, 2022 12:35 pm
by kamil.m
Unfortunately, your demo doesn't work.

I have prepared a very basic working Angular demo for you, with Mumbai and Pune marked on a map using GeoJSON and proj4 library. As I said before, updating your Highcharts version to the latest one can fix a lot of problems.

Feel free to adapt it and use in your project.
DEMO: https://stackblitz.com/edit/highcharts- ... ckage.json

Best regards

Re: Issue in loading highmap with [email protected]

Posted: Sat Aug 20, 2022 12:19 pm
by samadhan17
Thanks for help. I am not getting option to add custom markers in map chart.
Can you please help to add markers with information like shared in image.

Re: Issue in loading highmap with [email protected]

Posted: Mon Aug 22, 2022 7:48 am
by hubert.k
Hi samadhan17!
You can add your custom symbol as an image to marker.symbol property. To show the box above the marker you can use dataLabels and set it to be shown as a box. You can check a simple demo below to see an example.

Demo: https://stackblitz.com/edit/highcharts- ... map-i9ckv1

Regards!

Re: Issue in loading highmap with [email protected]

Posted: Wed Aug 24, 2022 11:15 am
by samadhan17
Hi, Thanks for help.

Now I am facing issues to zoom india graph. In old version of highchart, it is working with below call back function but same not working with version 10.

Code: Select all

public chartCallback: Highcharts.ChartCallbackFunction = chart => {
     	const pos =   chart.fromLatLonToPoint({ lat: 19.07, lon: 72.87 });

        chart.mapZoom(1.72182781654e-05, pos.x, pos.y || 0);
    }

Re: Issue in loading highmap with [email protected]

Posted: Thu Aug 25, 2022 7:08 am
by hubert.k
samadhan17,
It is probably not working, because chart.mapZoom is a deprecated method. You can read it in the documentation here: https://api.highcharts.com/class-refere ... rt#mapZoom

It is better to use zoomBy method (docs: https://api.highcharts.com/class-refere ... iew#zoomBy). You can find a working example in this demo: https://stackblitz.com/edit/highcharts- ... map-dag2hh

Let me know if you have any further questions.
Regards!