jamesgray_2000
Posts: 6
Joined: Thu Nov 19, 2020 3:23 pm

Render a sea in Global Projections

Fri Sep 29, 2023 9:53 am

In the older globe maps, you could render a circle filled with a radial gradient behind the globe in order to make it appear as though there was sea around the continents.

This looked great, example here:

https://www.highcharts.com/blog/code-ex ... net-earth/

In the newer version there are some nice additional projections, but you can't just use the same trick of renering a blue globe under the continents as the projections are of various shapes.

https://www.highcharts.com/demo/maps/pr ... n-explorer

Is it possible to still render the sea somehow with a nice blue gradient in order to help make the maps look natural and therefore help with user interpretation of the data?

Waht I'm trying to do is apply a blue sea gradient to this type of chart (whereby each projection retains the sea colouring): https://jsfiddle.net/jjjjssssfidd/th69k8zg/15/

Thanks,

jamesgray_2000
Posts: 6
Joined: Thu Nov 19, 2020 3:23 pm

Re: Render a sea in Global Projections

Fri Sep 29, 2023 4:44 pm

Just to claify, it's possible to add a sea (as per the older versions) to the Orthopgraphic view (see fiddle linked below), but it would be nice to be able to colour between the graticule/ the background in such a way that it simply changes with the projection.

https://jsfiddle.net/jjjjssssfidd/th69k8zg/97/

jedrzej.r
Posts: 515
Joined: Tue Jan 24, 2023 11:21 am

Re: Render a sea in Global Projections

Tue Oct 03, 2023 10:01 am

Hi!

Thanks for reaching out to us with your question!

When it comes to WebMercator and Miller projections, you can utilize the SVGRenderer possibilites to create a rectangle with gradient like in Ortographic projection, so that the result will look smooth when switching between projections. As for Equal Earth projection, it would require rendering a path based on the outer path of the projection, which isn't as simple as with rendering rectangle or circle.

Demo: https://jsfiddle.net/BlackLabel/euybrgax/

API: https://api.highcharts.com/class-refere ... derer#rect

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer

jamesgray_2000
Posts: 6
Joined: Thu Nov 19, 2020 3:23 pm

Re: Render a sea in Global Projections

Wed Oct 18, 2023 9:13 am

Thank you.

Yes, this is actually the solution that I used.

I had hoped that there was a smoother built in alternative, but this is fine and serves my purpose for now.

Return to “Highcharts Maps”