wilblack
Posts: 6
Joined: Thu Jun 12, 2014 10:41 pm

Map rotation question

I am making a map of California using the US Mainland custom map. http://code.highcharts.com/mapdata/coun ... ainland.js

Since I am only focused on California, the client wants California to be oriented vertically like in this example http://jsfiddle.net/gh/get/jquery/1.11. ... /us-ca-all.

So I tried rotating the us--all-mainland data set with QGIS. It displays it rotated correctly in QGIS but the change does not take effect in HighMaps. Is there a way to rotate maps in HighMaps? Is this the proper way to go about this?

Is it possible to re-project the us-mainland data set to the projection used in the us-ca-all? I tried that in QGIS and the export failed so I can't test it.

The orientation I have
https://drive.google.com/file/d/0B40ZHI ... sp=sharing

The orientation I want
https://drive.google.com/file/d/0B40ZHI ... sp=sharing


UPDATE
I was able to load the us-mianland dataset into QGIS and re-project it using the CRS EPSG:102243. This oriented California vertically like I wanted, but the rest of the USA was skewed to the NE. Unfortunately doing so also broke the rendering of the data I am trying to plot over the map using "mapbubble" so no data showed up. Highmaps did not give an error but when trying to center on a point in California using fromLatLonToPoint() I got the following error:
"Highcharts error #22: www.highcharts.com/errors/22" Following the link it appear that custom maps don't have lat/lon capabilities? My mapbubble locations are defined through lat/lon. So I am not sure how to remedy that. Also even if that is fixed, I am still have trouble centering this map and the coordinates are extremely large, in the 1 to 4 million range. Any help?
stpoa

Re: Map rotation question

Hi,

I think the easiest solution would be using CSS transform property with rotate function.

Code:

Code: Select all

.highcharts-series-group .highcharts-series-0 {
  transform: rotate(10deg);
}

.highcharts-data-labels {
  transform: rotate(10deg);
}
Live example:
http://jsfiddle.net/dvx1wdvc/

Regards.
wilblack
Posts: 6
Joined: Thu Jun 12, 2014 10:41 pm

Re: Map rotation question

That does work if the map was static but when you try to scroll or zoom it doesn't look good.
wilblack
Posts: 6
Joined: Thu Jun 12, 2014 10:41 pm

Re: Map rotation question

Here's my progress so far. I took the us-mainland-all map and re-projected it to urn:ogc:def:crs:EPSG::102243 because I need the northern border of California to be horizontal (as per clients request). I have a list of points that I need to make map bubbles for. They are defined with lat, lon, z, name. They no longer show up when I use the re-projected map. I have tried using proj4js to transform them to points. No luck. I have tried using chart.fromLatLonToPoint. No luck. With both methods I get new coords but they do not show up on the map.

I put together a jsfiddle to try to show the behavior. In this example the points show up but you can't see the map. If you remove the code that adds the two points the map renders fine.

http://jsfiddle.net/wilblack/c3f13eLc/5/

I'm stuck.
stpoa

Re: Map rotation question

wilblack wrote:That does work if the map was static but when you try to scroll or zoom it doesn't look good.
Data labels behaves exactly the same as without css transforms (without rotation).

It seems to be a problem with your mapData, since, when using https://code.highcharts.com/mapdata/cou ... /gb-all.js points display correctly.

Live example:
http://jsfiddle.net/hhmpaur3/

Regards.
afermin13
Posts: 1
Joined: Sat Apr 30, 2022 5:23 pm

Re: Map rotation question

If you see the map at an angle, tilt, or rotate try this:


mapView: {
projection
projection: {
name: 'WebMercator'
},
zoom: 4,
center: [6.5, 61]
},


https://jsfiddle.net/gh/get/library/pur ... n-explorer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Map rotation question

Hi afermin13,

Welcome to our forum!

Thanks for sharing that part of config and bringing up Highcharts Projection Explorer demo.

In case of any questions feel free to reach us anytime.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”