sandbox/map/src/components/layer.tsx

import react from 'react';

import { ViewportState } from './viewport';

import '../theme/layer.css';

const Layer: react.FC<{
  viewportState: ViewportState;
  children?: JSX.Element;
}> = (props: { viewportState: ViewportState; children?: JSX.Element }) => {
  const { children: children, ...argProps } = props;
  console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);

  return (
    <div
      className='background'
      style={{
        transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
      }}
    >
      {props.children}
    </div>
  );
};

export default Layer;