sgratzl / chartjs-chart-geo

Chart.js Choropleth and Bubble Maps
https://www.sgratzl.com/chartjs-chart-geo/
MIT License
351 stars 40 forks source link

Rotation of orthographic view #268

Closed TomasKulhanek closed 13 hours ago

TomasKulhanek commented 1 day ago

It would be great if you suggest or provide some example, how to rotate the orthographic view, in order to have e.g. Asia in the center of map. Currently Africa is in the center.

E.g. the option to rotate like in the following codepen example: https://codepen.io/TomasKulhanek/pen/emONPPg

User story I'm creating some interactive maps in different projection. In orthographic projection, I need to rotate the globe in order to focus on Asia, or on Americas based on user interaction. Currently I do not know how to achieve it.

Workaround is not to use orthographic projection and use e.g. equalEarth and use Scale and Offset. Which in some context is OK. As seen in the following example (working in progress Nov 2024 https://vito-health.github.io/scientific-visuals/geochart.html)

Additional context Anyway thanks for great visualisation simplification.

sgratzl commented 1 day ago

try setting a custom projection object, e.g.

{
  projection: ChartGeo.geoOrthographic().rotate([-90, 0, 0])
}
TomasKulhanek commented 13 hours ago

Thanks. That works. So if other will be interested, full example using ES imports:


import { geoOrthographic, ... } from "chartjs-chart-geo";
...
    this.chart = new Chart(ctx, {
        type: 'choropleth',
        ...
        options: {
            ...
            scale: {
                projection: {
                    axis: 'x',
                    projection: geoOrthographic().rotate([0,0,0])
               }
           }
        }
    });
...
    rotate2Asia() {
        this.chart.scales.projection.projection.rotate([-90,0,0]);
        this.update();
    }
...