ConstWhen to use NearCoordinates vs Coordinates:
NearCoordinates for objects within city-level distances (up to ~100km)Coordinates for objects at country-level or global distancesThe key difference is that NearCoordinates applies only a translation (position offset)
without adjusting the scale, while Coordinates creates a properly scaled scene at each location.
import { Canvas, NearCoordinates } from '@wendylabsinc/react-three-map/maplibre';
function CityMarkers() {
const locations = [
{ name: 'Point A', lat: 51.5074, lng: -0.1278 },
{ name: 'Point B', lat: 51.5080, lng: -0.1200 },
{ name: 'Point C', lat: 51.5100, lng: -0.1300 },
];
return (
<Canvas latitude={51.5074} longitude={-0.1278}>
{locations.map((loc) => (
<NearCoordinates
key={loc.name}
latitude={loc.lat}
longitude={loc.lng}
>
<mesh>
<sphereGeometry args={[10]} />
<meshStandardMaterial color="red" />
</mesh>
</NearCoordinates>
))}
</Canvas>
);
}
A lightweight component that positions children at geographic coordinates near the Canvas origin.
This component uses coordsToVector3 internally to convert geographic coordinates to a 3D position offset. Unlike Coordinates, it doesn't create a separate scene, making it more performant but less accurate at very long distances.