Layer data rendered in wrong position until map is panned or zoomed #5505

jeffmacinnes · 2021-02-19T05:07:22Z

jeffmacinnes
Feb 19, 2021

Hi there! Hoping to get some insight/advice on an issue with layer data rendering in the wrong locations on the base map (initially, at least). When the page first loads, the layer is rendered in the wrong location. Once I interact with the map (via panning or zooming), the layers update to the correct location. Here's a minimal example where I'm just showing a single arc from the US to Australia

import React from 'react';
import DeckGL from '@deck.gl/react';
import { ArcLayer } from '@deck.gl/layers';
import { StaticMap } from 'react-map-gl';

// --- Map settings
const INITIAL_VIEW_STATE = {
  longitude: 15.98,
  latitude: 44.9,
  zoom: 0,
  pitch: 20
};

const data = [
  {
    src: {
      lng: -99.94, // US
      lat: 40.43
    },
    dst: {
      lng: 133.75, // Australia
      lat: -25.27
    }
  }
];

const TestMap = (props) => {
  const layers = [
    new ArcLayer({
      data,
      id: 'arc-layer',
      getWidth: 4,
      getSourcePosition: (d) => [d.src.lng, d.src.lat],
      getTargetPosition: (d) => [d.dst.lng, d.dst.lat],
      getSourceColor: [255, 0, 0, 50],
      getTargetColor: [255, 0, 0, 50]
    })
  ];

  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
    >
      <StaticMap reuseMaps mapboxApiAccessToken={process.env.MAPBOX_TOKEN} />
    </DeckGL>
  );
};

export default TestMap

When the site first loads, the arc is positioned as

Only once I zoom or pan the map does it update to the correct location:

The same problem occurs with other layer types (tested with ColumnLayer as well) and across multiple browsers (Chrome, Firefox, Safari). And it's independent of the StaticMap component (commenting the StaticMap out produces the same behavior, just no underlying map).

Going in circles trying to figure out what I'm missing. Embarrassed to admit I even tried programmatically simulating mouse events to get the map to update, but no luck 🙃. Any help would be immensely appreciated, thanks!

Using [email protected]