Page 1 of 1
Repeat map on drag on x and y axis
Posted: Fri Sep 23, 2022 9:36 am
by pranavborole
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/
Re: Repeat map on drag on x and y axis
Posted: Mon Sep 26, 2022 8:54 am
by hubert.k
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!
Re: Repeat map on drag on x and y axis
Posted: Mon Sep 26, 2022 9:07 am
by pranavborole
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
Re: Repeat map on drag on x and y axis
Posted: Mon Sep 26, 2022 9:12 am
by pranavborole
HI Hubert.k,
Thanks for your help, i will try this solution in case of any queries, i will get back to you
Re: Repeat map on drag on x and y axis
Posted: Mon Sep 26, 2022 9:14 am
by hubert.k
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!
Re: Repeat map on drag on x and y axis
Posted: Mon Sep 26, 2022 10:24 am
by pranavborole
Sure i will create one
Re: Repeat map on drag on x and y axis
Posted: Tue Sep 27, 2022 7:23 am
by hubert.k
Thank you for your contribution to Highcharts library!
In case of any other questions, feel free to ask anytime,
Best regards!
Re: Repeat map on drag on x and y axis
Posted: Fri Nov 11, 2022 11:47 am
by pranavborole
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
Re: Repeat map on drag on x and y axis
Posted: Mon Nov 14, 2022 9:56 am
by hubert.k
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!
Re: Repeat map on drag on x and y axis
Posted: Wed Nov 16, 2022 6:03 am
by pranavborole
Thanks, hubert this issue is resolved there is an older version i am using, can you help me with y-axis rotation?
Re: Repeat map on drag on x and y axis
Posted: Thu Nov 17, 2022 10:58 am
by hubert.k
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!
Re: Repeat map on drag on x and y axis
Posted: Fri Nov 18, 2022 7:35 am
by pranavborole
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
Re: Repeat map on drag on x and y axis
Posted: Fri Nov 18, 2022 7:40 am
by hubert.k
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!
Re: Repeat map on drag on x and y axis
Posted: Fri Nov 18, 2022 9:13 am
by pranavborole
Thanks, Hubert.k it's working for me
Thanks & reagards
Re: Repeat map on drag on x and y axis
Posted: Fri Nov 18, 2022 9:15 am
by hubert.k
You're welcome! In case of any further questions, feel free to contact us again.