samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Issue in loading highmap with [email protected]

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;
Attachments
map.JPG
map.JPG (18.03 KiB) Viewed 1967 times
dom.JPG
dom.JPG (119.72 KiB) Viewed 1967 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Issue in loading highmap with [email protected]

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!
Kamil Musiałowski
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

Thanks for help. Due to wrong imports it is not getting loaded. Now working fine.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Issue in loading highmap with [email protected]

Great to hear that!

In case of any other questions, feel free to contact us,
Best regards!
Kamil Musiałowski
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

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
                        }
                    ]
         }
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Issue in loading highmap with [email protected]

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!
Kamil Musiałowski
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

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
                        }
                    ]
         }
Attachments
loca.JPG
loca.JPG (33.65 KiB) Viewed 1920 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Issue in loading highmap with [email protected]

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!
Kamil Musiałowski
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

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.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Issue in loading highmap with [email protected]

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
Kamil Musiałowski
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

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.
Attachments
temp12.JPG
temp12.JPG (15.58 KiB) Viewed 1820 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Issue in loading highmap with [email protected]

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!
Hubert Kozik
Highcharts Developer
samadhan17
Posts: 25
Joined: Mon Mar 09, 2020 9:37 am

Re: Issue in loading highmap with [email protected]

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);
    }
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Issue in loading highmap with [email protected]

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!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”