ConstEach Coordinates component renders in its own scene with a synchronized camera,
which ensures proper scale at that geographic location. This is more accurate than
NearCoordinates for distant locations but has slightly more overhead.
import { Canvas, Coordinates } from '@wendylabsinc/react-three-map/maplibre';
function App() {
return (
<Map initialViewState={{ latitude: 51, longitude: 0, zoom: 5 }}>
<Canvas latitude={51} longitude={0}>
{/* Objects at the Canvas origin */}
<mesh>
<boxGeometry args={[100, 100, 100]} />
<meshStandardMaterial color="red" />
</mesh>
{/* Objects at a different location */}
<Coordinates latitude={48.8566} longitude={2.3522}>
<mesh>
<boxGeometry args={[100, 100, 100]} />
<meshStandardMaterial color="blue" />
</mesh>
</Coordinates>
</Canvas>
</Map>
);
}
NearCoordinates for a simpler alternative at city-level distances
A component that positions its children at specific geographic coordinates.
Unlike NearCoordinates, this component creates a separate scene for each coordinate location with proper scale adjustments. This makes it suitable for placing objects at vastly different locations (e.g., different continents).