MapCN is a React component library that wraps MapLibre GL into declarative, composable building blocks for interactive maps. It provides a set of small, reusable components for rendering maps, placing markers, drawing routes, and clustering points, all managed through React hooks, context, and refs for state and lifecycle control.
The library distinguishes itself by offering a complete set of map features as individual React components that automatically adapt to light and dark themes. It includes components for interactive map rendering with zero configuration, marker placement with popups and drag support, route and arc drawing with click and hover events, and native point clustering for large datasets. Map controls for zoom, compass, geolocation, and fullscreen are also provided as themed components.
Beyond the core components, the library supports custom GeoJSON layers, high-performance marker layers on the WebGL canvas, and programmatic access to the map instance for building extended capabilities like real-time tracking or heatmaps. It also offers composable map UIs, custom tile provider support, and dynamic style switching.
The library is distributed as a TypeScript package and is designed to be used in React applications that need interactive, theme-aware maps without requiring API keys.
