React Three Map - v1.0.9
    Preparing search index...

    Interface CanvasProps

    Props for the Canvas component that renders a React Three Fiber scene inside a map.

    Extends the standard @react-three/fiber RenderProps with geographic positioning.

    <Canvas
      latitude={51.5074}
      longitude={-0.1278}
      altitude={100}
      frameloop="always"
    >
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
    interface CanvasProps {
        id?: string;
        beforeId?: string;
        frameloop?: "always" | "demand";
        overlay?: boolean;
        longitude: number;
        latitude: number;
        altitude?: number;
    }

    Hierarchy (View Summary)

    • Coords
    • Omit<RenderProps<HTMLCanvasElement>, "frameloop">
    • PropsWithChildren
      • CanvasProps
    Index

    Properties

    id? beforeId? frameloop? overlay? longitude latitude altitude?

    Properties

    id?: string

    Unique identifier for the map layer. Useful when you have multiple Canvas components.

    beforeId?: string

    ID of an existing layer to insert this layer before. Use this to control the rendering order of multiple Canvas layers.

    frameloop?: "always" | "demand"

    Controls when the scene re-renders.

    • "always": Continuously render (default)
    • "demand": Only render when invalidate() is called
    "always"
    overlay?: boolean

    When true, renders on a separate canvas overlay instead of the map's WebGL context.

    Use this if:

    • You use react-postprocessing and have issues clearing the screen
    • You want to avoid unnecessary map renders when only the Three.js scene changed

    Caveats:

    • Three.js will always render on top (no depth integration with map)
    • react-postprocessing won't work if you also use <Coordinates> components
    false
    longitude: number

    The longitude coordinate in degrees. Valid range: -180 to 180

    latitude: number

    The latitude coordinate in degrees. Valid range: -90 to 90

    altitude?: number

    The altitude in meters above sea level.

    0

    Settings

    Member Visibility

    On This Page

    Properties