@waysnx/ui-maps

🤖 AI agents & LLMs: See LLM.md (shipped with this package) for a structured integration guide — provider-agnostic maps, address search, routing, and geofencing.

Maps and location components for modern SaaS applications.

Provides address search, map views, route planning, geolocation, and geofence editing — all as UI shells that connect to your preferred maps provider.

Installation

npm install @waysnx/ui-maps

import '@waysnx/ui-maps/dist/index.css';

Components

| Component | Description | |-----------|-------------| | AddressSelector | Address search with suggestion dropdown and current location | | AddressAutocomplete | Inline address input with autocomplete | | CurrentLocationButton | Button that triggers browser geolocation | | LocationPicker | Click-to-pick location on map | | MapView | Map with markers, satellite/roadmap toggle | | MapMarker | Pin marker with label | | DistanceCalculator | From/to with transport mode and distance/duration | | RoutePlanner | Multi-stop route with Get Directions | | GeofenceEditor | Draw and manage geofence zones |

Hooks

| Hook | Description | |------|-------------| | useCurrentLocation() | Browser Geolocation API wrapper |

Providers

| Provider | Description | |----------|-------------| | MapsProvider | Inject a MapsAdapter into the component tree |

Usage

import { MapsProvider, MapView, AddressSelector } from '@waysnx/ui-maps';
import type { MapsAdapter } from '@waysnx/ui-maps';

const adapter: MapsAdapter = { /* your maps adapter */ };

function App() {
  return (
    <MapsProvider config={{ adapter, apiKey: 'your-key' }}>
      <MapView markers={markers} height={400} />
      <AddressSelector onSearch={handleSearch} suggestions={suggestions} />
    </MapsProvider>
  );
}

Theming

All components use --wx-adv-map-* CSS tokens:

:root {
  --wx-adv-map-height: 400px;
  --wx-adv-map-radius: 12px;
  --wx-adv-map-border: rgba(0, 0, 0, 0.1);
  --wx-adv-map-control-bg: #ffffff;
}

Dark mode is automatic via [data-theme="dark"].

License

Apache-2.0 © WaysNX Technologies Private Limited