Stacking map objects

[iskandari]

I am experimenting with react-three-map and find the functionality very useful. My goal is to create a stack of two separate, flat interactive maps in 3D space with some arbitrary height h between them (along the z-dimension). Something like either of the two images below.

I've managed to stack two maps (see code) directly on top of each other and tie their interactivity together using an example from react-map-gl docs (note how you can see through the transparent layers of the top map to the bottom map), but I am unable to define or create space in between them. It is not straightforward as Map components are not textures; I also was not able to stack canvases. Would I need to use multiple scenes? I would be grateful for any advice or strategy on how to achieve this effect with react-three-map., ideally where some height h could be used to determine the space in between.

import {useState, useCallback } from "react";
import { Canvas } from "react-three-map";
import Map from 'react-map-gl';
import Mapbox from "mapbox-gl";
import 'mapbox-gl/dist/mapbox-gl.css';
import { useControls } from "leva";
export default { title: 'Canvas' }

export function  BasicExample() {

  const { mapboxToken } = useControls({
    mapboxToken: {
      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
      label: 'mapbox token',
    }
  })

  Mapbox.accessToken = mapboxToken;

  const [viewState, setViewState] = useState({
    latitude: 42.3383,
    longitude: -70.9597,
    zoom: 13,
    pitch: 60,
    bearing: 0
  });

  const [activeMap, setActiveMap] = useState<'top' | 'bottom'>('top');

  const onTopMoveStart = useCallback(() => setActiveMap('top'), []);
  const onBottomMoveStart = useCallback(() => setActiveMap('bottom'), []);
  const onMove = useCallback(evt => setViewState(evt.viewState), []);

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      {mapboxToken && (
        <Map
          id="bottom"
          {...viewState}
          mapStyle="mapbox://styles/mapbox/streets-v12" 
          onMoveStart={onBottomMoveStart}
          onMove={activeMap === 'bottom' && onMove}
          // Disable map interactions
          interactive={false} 
          scrollZoom={false} 
          dragPan={false} 
          dragRotate={false} 
          doubleClickZoom={false} /
          touchZoomRotate={false} 
        >
          <Canvas latitude={51} longitude={0}>
            <hemisphereLight args={["#ffffff", "#60666C"]} position={[1, 4.5, 3]} />
          </Canvas>

          <div style={{ position: 'absolute', top: 0, height: '100%', width: '100%', opacity: 1 }}>

          <Map
            id="top"
            {...viewState}
            mapStyle="mapbox://styles/iskandarblue/clsmqye4z004g01qwez1p1y30" 
            style={{ position: 'absolute', top: 0, height: '100%' }}
            onMoveStart={onTopMoveStart}
            onMove={activeMap === 'top' && onMove}
          >
            <Canvas latitude={51} longitude={0}>
              <hemisphereLight args={["#ffffff", "#60666C"]} position={[1, 4.5, 103]} />
            </Canvas>
          </Map>
             </div>
        </Map>
      )}

      {!mapboxToken && (
        <div style={{
          display: 'flex',
          height: '100%',
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        </div>
      )}
    </div>
  );
}

[RodrigoHamuy]

Can you provide a code sandbox? Just by looking at it:

• I don't think you can have a map inside another, instead have them both at the same level.
• if the previous statement is true, then this isn't a react-three-map issue as that bit should just work when you split them correctly.