@auramaps/react

React wrapper for @auramaps/core.

Explore the live AuraMap demo →

Screenshots

| Neon Night | Minimal Dark | Minimal Light | | --- | --- | --- | | | | |

Install

npm install @auramaps/react

This installs @auramaps/core and maplibre-gl for you.
You still need React in your app (react / react-dom are peer dependencies).

Usage

import { useRef } from "react";
import { AuraMap, type AuraMapHandle } from "@auramaps/react";
import "@auramaps/core/styles.css";

export function MapPage() {
  const ref = useRef<AuraMapHandle>(null);

  return (
    <AuraMap
      ref={ref}
      theme="neon-night"
      center={[54.39, 24.45]}
      zoom={14}
      pitch={60}
      buildings
      navigationControl
      onReady={(map) => {
        // map is AuraMap from @auramaps/core
      }}
    />
  );
}

Props

All @auramaps/core AuraMapOptions (except container) plus:

| Prop | Description | |------|-------------| | className | Container class | | containerStyle | Inline styles (default height 400px min) | | onReady | Called when the map scene is ready | | onError | Construction errors | | onThemeChange | Theme updates | | onPlaceSelect | Place popup selection |

Imperative handle

ref.current?.getMap();
ref.current?.setTheme("minimal-light");
ref.current?.resize();
ref.current?.destroy();

Customization

Use onReady to add markers, handle clicks, draw routes, control the camera, or access the complete MapLibre API:

<AuraMap
  touchRotation
  onReady={(engine) => {
    const map = engine.getMapInstance();

    map.on("click", (event) => {
      engine.addMarker({
        longitude: event.lngLat.lng,
        latitude: event.lngLat.lat,
        label: "Selected location"
      });
    });
  }}
  containerStyle={{ minHeight: "100vh" }}
/>

AuraMap supports markers, route lines, animated routes, themes, buildings, terrain, atmosphere, 3D Tiles, popups, camera controls, heatmaps, arcs, columns, pulse points, vehicles, extruded GeoJSON, clustered markers, and custom MapLibre sources/layers/events.

Read the complete customization guide.

touchRotation enables the default two-finger twist gesture: users can rotate the map by moving two fingers in a circular motion.

License

MIT