<Map />

← Components | API Reference

Root component. All other components must be children of this.


Usage

import { Map } from 'terrainx'
 
<Map
  center={{ lat: 28.6, lon: 77.2 }}
  zoom={12}
  theme="midnight_blue"
  height="500px"
/>

Props

PropTypeDefaultDescription
center{ lat, lon }requiredInitial map center
zoomnumber10Initial zoom (1–20)
themestring | MapTheme"coral"See themes
heightstring"100%"CSS height
widthstring"100%"CSS width
onMove(center, zoom) => voidFires on pan/zoom
onClick({ lat, lon }) => voidFires on map click
childrenReactNodeMarkers, Routes, Polygons etc.

Notes

  • Requires WebGL — shows an error message if unavailable
  • Fetches tile data from OpenFreeMap on mount
  • theme accepts either a key string ("noir") or a full theme object