Weather Radar Multi-View Scaling Issues

[DavidLudwig]

I am working on a weather radar visualization whereby one can click on a weather-radar's location on a map, which causes another view to open showing its data zoomed in and orbitable, however I am having trouble getting this functional using Deck.GL 9.x (presently 9.1.12, though I upgrading, or downgrading a little, might be fine). The issues I am running into appear related to the scaling of lines and points, however I am having trouble determining a proper fix.

A screenshot showing my issue (described below) is attached, as well as a shortened code example.

TL;DR

I see an OrbitView rendering lines and points (sourced from a GeoJsonLayer) much larger than their equivalents in a MapView. Both views share a pair of GeoJsonLayers. I have thoughts on what a fix might entail, but am unsure what or how to approach. Screenshot and code attached.

Details

My high-level Deck.GL setup currently looks like the following:

• View count is 2, each displayed on left and right sides of the screen, and ordered as such:
  1. a MapView
     • this is expected to show geography around a few thousand kilometers in displayed width and height
  2. an OrbitView.
     • this is expected to show geography around a few hundred kilometers in displayed width and height
• Layer count is 3, ordered as such:
  1. a SolidPolygonLayer to draw a custom background color
  2. a GeoJsonLayer to show boundaries between countries and coastlines
  3. a GeoJsonLayer to show radar sites on the map, each as points

The lines and points look fine in the MapView, but are greatly distorted within the OrbitView, which displays them much too large. I have been able to work around this somewhat by adjusting line and point scaling factors in the appropriate, multi-view-shared, GeoJsonLayers' properties, however it only ever fixes things in one view, while leaving the other view's equalents looking wrong (sometimes very much so).

Options Being Considered

I am wondering how best to fix this, assuming that it is even possible. Here are some things I'm considering, but am not sure if any are "correct", or if there might be other options.

1. Duplicate the GeoJson layers to be one per view, each with different rendering options for points, lines, etc. I am somewhat hesitant to duplicate code, but maybe this is a case where it's a good option?
2. Adjusting matrices passed into views, and/or parameters used to calculate these matrices, and/or some other view parameter. If so, any suggestions on what properties to consider editing?
3. Writing either a custom view or controller, or some other custom component. If so, suggestions on what to subclass and/or extend are welcomed.
4. Consider this to be a bug, and/or a missing feature, in DeckGL. (If so, I have followup questions, and wonder where might be good to ask them.)

Other suggestions on what I ought to consider or look at are definitely welcomed as well.

Thank you all for your time!

Screenshot

The MapView is on the left, and the OrbitView on the right,

Code

import {
    Deck,
    _GlobeView as GlobeView,
    GlobeViewState,
    MapView,
    OrbitView,
} from '@deck.gl/core';

import {
    GeoJsonLayer,
    SolidPolygonLayer,
} from '@deck.gl/layers';

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const COUNTRIES = '/data/geojson/ne_50m_admin_0_scale_rank.geojson';

// source: custom
const RADAR_SITES = '/data/geojson/KTLX_radar_site.geojson';

const INITIAL_VIEW_STATE = {
    leftView: {     // for MapView
        // KTLX
        latitude: 35.3333,
        longitude: -97.2777,
        zoom: 4
    },
    rightView: {    // for OrbitView
        // KTLX
        latitude: 35.3333,
        longitude: -97.2777,
        rotationX: 90,
        zoom: 5,
        target: [-95, 35, 0],
    },
};

const deckInstance = new Deck({
    views: [
        new MapView({
            id: 'leftView',
            controller: true,
            x: 0,
            y: 0,
            width: '50%',
            height: '100%',
        }),
        new OrbitView({
            id: 'rightView',
            controller: true,
            x: '50%',
            y: 0,
            width: '50%',
            height: '100%',
        }),
    ],
    initialViewState: INITIAL_VIEW_STATE,
    layers: [
        // A GeoJSON polygon that covers the entire earth
        // See /docs/api-reference/globe-view.md#remarks
        new SolidPolygonLayer({
            id: 'background',
            data: [
                // prettier-ignore
                [[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]
            ],
            opacity: 0.5,
            getPolygon: d => d,
            stroked: false,
            filled: true,
            getFillColor: [5, 10, 40]
        }),
        new GeoJsonLayer({
            id: 'base-map',
            data: COUNTRIES,
            stroked: true,
            filled: true,
            getLineColor: [255, 255, 255],
            getFillColor: [15, 40, 80],
            lineWidthMinPixels: 2,  // Ensure lines (for country boundaries) are displayed in the MapView
        }),
        new GeoJsonLayer({
            id: 'radar-sites',
            data: RADAR_SITES,

            // Styles
            filled: true,
            getLineColor: [0, 255, 0],
            getFillColor: [255, 0, 0],

            // Interactive props
            pickable: true,
            autoHighlight: true,
            onClick: info => {
                console.log(info);
                if (info.object) {
                    alert(`${info.object.properties.name}`)
                }
            }
        }),
    ]
});

[grahambates-code]

have you tried first person view/controller? you want a kind a drone style view?