How to replicate mapbox-gl-sync-move?

[jcsho]

Hello, looking for general pointers on porting the concept of syncing 2 map's movement together but got stuck tapping into the 'move' event handler.

My attempt was to set the viewport based on a unique id but it makes both maps inactive instead

A little stuck on which part of the MapController I should be overriding to replicate this line

// App.js from the `maplibre` example
import React from 'react';
import {useState} from 'react';
import {render} from 'react-dom';
import MapGL from 'react-map-gl';

const OSM_MAP = {
  version: 8,
  sources: {
    osm: {
      type: 'raster',
      tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256,
      attribution: '© OpenStreetMap Contributors',
      maxzoom: 19
    }
  },
  layers: [
    {
      id: 'osm',
      type: 'raster',
      source: 'osm'
    }
  ]
};

export default function App() {
  const LEFT_MAP_ID = 'leftMap';
  const RIGHT_MAP_ID = 'rightMap';
  const [viewport, setViewport] = useState({
    latitude: 40,
    longitude: -100,
    zoom: 3.5,
    bearing: 0,
    pitch: 0
  });

  const [currentMapId, setCurrentMapId] = useState(null);

  const handleViewportChange = (mapId) => (viewState) => {
    if (currentMapId === mapId) setViewport(viewState);
  };

  return (
    <>
      <MapGL
        {...viewport}
        width="50%"
        height="100%"
        mapStyle={OSM_MAP}
        onMouseEnter={setCurrentMapId(LEFT_MAP_ID)}
        onMouseLeave={setCurrentMapId(null)}
        onViewportChange={handleViewportChange(LEFT_MAP_ID)}
      />
      <MapGL
        {...viewport}
        width="50%"
        height="100%"
        mapStyle={OSM_MAP}
        onMouseEnter={setCurrentMapId(RIGHT_MAP_ID)}
        onMouseLeave={setCurrentMapId(null)}
        onViewportChange={handleViewportChange(RIGHT_MAP_ID)}
      />
    </>
  );
}

export function renderToDom(container) {
  render(<App />, container);
}