pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Repeat map on drag on x and y axis

Hi there,

I am trying to achieve a rotated 2D map on drag like this sample https://jsfiddle.net/gh/get/library/pur ... projection.
link where I am trying https://jsfiddle.net/uvrhycka/4/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

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

Unfortunately, this is not possible to achieve directly from API options. It would be great if you can create a feature request here: https://github.com/highcharts/highchart ... new/choose and describe it precisely as in this post.

As a workaround, for now, I can suggest you use a custom plugin from the demo below (inside the IIFE function).

Demo: https://jsfiddle.net/BlackLabel/5fea16Ls/

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

Hi there,

I am trying to achieve a rotated 2D map on drag like this sample https://jsfiddle.net/gh/get/library/pur ... projection.
link where I am trying https://jsfiddle.net/uvrhycka/4/

if the user tries to scroll or drag on the extreme right it should be infinitely scrollable and start from the start of the map
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

HI Hubert.k,
Thanks for your help, i will try this solution in case of any queries, i will get back to you
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

pranavborole,
It is already working as you described. It is a custom thing, so there can be some bugs, so it would be the best to create a feature request on GH :)

Regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

Sure i will create one
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

Thank you for your contribution to Highcharts library!

In case of any other questions, feel free to ask anytime,
Best regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

hubert.k wrote: Mon Sep 26, 2022 8:54 am Hi pranavborole!
Welcome to our forum and thanks for contacting us with your question!

Unfortunately, this is not possible to achieve directly from API options. It would be great if you can create a feature request here: https://github.com/highcharts/highchart ... new/choose and describe it precisely as in this post.

As a workaround, for now, I can suggest you use a custom plugin from the demo below (inside the IIFE function).

Demo: https://jsfiddle.net/BlackLabel/5fea16Ls/

Let me know if you have any further questions.
Regards!
HI hubert.k, i tried this approach but MapView.prototype.setUpEvents this line throwing me an error Cannot read properties of undefined (reading 'prototype') i am using React typescript with react highchart library, can You help me with this
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

Hi again pranavborole!
I was trying to reproduce your problem, but in my case, everything is working correctly. You can check the working example in React.js below. Could you reproduce the issue in an online editor that I could work on?

Demo: https://codesandbox.io/s/highcharts-rea ... ked-cfgbgy

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

Thanks, hubert this issue is resolved there is an older version i am using, can you help me with y-axis rotation?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

pranavborole,
I am unsure if I understand your words "y-axis rotation" correctly. If you want to move the map up/down it will change the projection and the continents will be distorted to our eyes, but in reality, it will be correct behaviour. You can check it here in our Projection Explorer: https://jsfiddle.net/gh/get/library/pur ... n-explorer
If you set 'Miller' projection and move 'Phi' slider, which is responsible for moving the map up/down it will change the projection. If you want to do this infinitely, it will act the same as in the demo above. In my opinion, there is no sense in achieving that.

I have updated a little bit my previous demo with infinite left/right panning. Here is a link: https://jsfiddle.net/BlackLabel/Lpjg81n9/

On the other hand, for other users that will face the same issue: the feature request has been created. You can check it here on our GitHub: https://github.com/highcharts/highcharts/issues/17789
This feature is added to our road map and backlog, but without a specific date of implementation. If more users will vote for it (by adding a thumbs up), we will consider adding it earlier.

Regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

Hey Hubert.k,

Thank you so much for your recent solution, It looks good and working well for us.
can you help me with the center of the map? at the movement it moved to the right(shows America at the center), is it possible to have the default center at Europe on the page load?

Regards,
Pranav Borole
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

Pranav Borole,
Sure, all you need to change is rotation in mapView.projection.rotation property. For example, if you set it to zero it will be closer to Europe in Miller's projection of Earth. Feel free to change these values and adjust them to your own preferences.

Demo: https://jsfiddle.net/BlackLabel/bx127n8w/
API Reference: https://api.highcharts.com/highmaps/map ... n.rotation

Kind regards!
Hubert Kozik
Highcharts Developer
pranavborole
Posts: 8
Joined: Fri Sep 23, 2022 9:19 am

Re: Repeat map on drag on x and y axis

Thanks, Hubert.k it's working for me

Thanks & reagards
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Repeat map on drag on x and y axis

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”