sandbox/svgmap/src/components/map/SlippyBoard.tsx

import react, { ReactElement, ReactNode } from 'react';

interface SlippyBoardProperties {
  boardSize: number;
  shift: { x: number; y: number };
  zoom: number;
  layers?: {
    key: string;
    transform?: string;
    content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
  }[];
}

const SlippyBoard: react.FC<SlippyBoardProperties> = (
  props: SlippyBoardProperties
) => {
  return (
    <svg height={props.boardSize} width={props.boardSize}>
      <g
        transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
      >
        {props.layers
          ? props.layers.map((layer) => (
              <g
                className='layer'
                key={layer.key}
                transform={layer.transform === undefined ? '' : layer.transform}
              >
                {layer.content}
              </g>
            ))
          : null}
      </g>
    </svg>
  );
};

export default SlippyBoard;