https://github.com/radarlabs/radar-sdk-js
Web JavaScript SDK for Radar, the leading geofencing and location tracking platform
https://github.com/radarlabs/radar-sdk-js
geocoding geofencing geolocation html5-geolocation html5-geolocation-api location-tracking radar
Last synced: 3 months ago
JSON representation
Web JavaScript SDK for Radar, the leading geofencing and location tracking platform
- Host: GitHub
- URL: https://github.com/radarlabs/radar-sdk-js
- Owner: radarlabs
- License: apache-2.0
- Created: 2018-05-18T21:20:45.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2026-02-12T02:40:01.000Z (4 months ago)
- Last Synced: 2026-02-12T03:21:18.501Z (4 months ago)
- Topics: geocoding, geofencing, geolocation, html5-geolocation, html5-geolocation-api, location-tracking, radar
- Language: TypeScript
- Homepage: https://radar.com
- Size: 2.41 MB
- Stars: 49
- Watchers: 10
- Forks: 18
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Website |
Blog |
Documentation |
Support
⚡ Use Radar SDKs and APIs to add location context to your apps with just a few lines of code. ⚡
🔥 Try it! 🔥
- Geofencing
- Maps APIs
- Maps UI
- Autocomplete UI
## 🚀 Installation and Usage
### With npm
Install the core SDK:
```bash
# with npm
npm install radar-sdk-js
# with yarn
yarn add radar-sdk-js
```
Then import and initialize:
```js
import Radar from 'radar-sdk-js';
// initialize with your test or live publishable key
Radar.initialize('prj_test_pk_...', {
/* options */
});
```
### With a script tag
Add the following to your HTML:
```html
Radar.initialize('prj_test_pk_...', {
/* options */
});
```
## Adding plugins
In v5 the Maps, Autocomplete, and Fraud components are separate packages that
you install alongside the core SDK. This keeps the core bundle small if you
only need the API.
### Maps plugin (npm)
```bash
npm install @radarlabs/plugin-maps maplibre-gl
```
```js
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
Radar.initialize('prj_test_pk_...');
const map = Radar.ui.map({
container: 'map',
});
```
### Autocomplete plugin (npm)
```bash
npm install @radarlabs/plugin-autocomplete
```
```js
import Radar from 'radar-sdk-js';
import { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
import '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';
Radar.registerPlugin(createAutocompletePlugin());
Radar.initialize('prj_test_pk_...');
Radar.ui.autocomplete({
container: 'autocomplete',
onSelection: (result) => {
console.log(result);
},
});
```
### Fraud plugin (npm)
```bash
npm install @radarlabs/plugin-fraud
```
```js
import Radar from 'radar-sdk-js';
import { createFraudPlugin } from '@radarlabs/plugin-fraud';
Radar.registerPlugin(createFraudPlugin());
Radar.initialize('prj_live_pk_...');
const { token, user, events } = await Radar.fraud.trackVerified();
```
### Plugins via script tag (CDN)
Plugin CDN bundles auto-register with the core SDK when loaded. Load
the core SDK first, then any plugins you need:
```html
```
## Quickstart
### Create a map
Initialize the SDK and the maps plugin, then render a map into an HTML element
by ID or element reference.
```html
Radar.initialize('<RADAR_PUBLISHABLE_KEY>');
const map = Radar.ui.map({
container: 'map', // OR document.getElementById('map')
});
```
> Provide a `width` and `height` on the container element for the map to
> render correctly.
### Create an autocomplete input
```html
Radar.initialize('<RADAR_PUBLISHABLE_KEY>');
// create autocomplete widget
Radar.ui.autocomplete({
container: 'autocomplete', // OR document.getElementById('autocomplete')
responsive: true,
width: '600px',
onSelection: (result) => {
console.log(result);
},
});
```
### Geofencing
Use the [Track API](https://radar.com/documentation/api#track) to get the
user's current location for geofence and event detection. No UI plugins
are needed for geofencing.
```html
Radar.initialize('<RADAR_PUBLISHABLE_KEY>');
Radar.trackOnce({ userId: 'example-user-id' }).then(({ location, user, events }) => {
// do something with user location or events
});
```
## Packages
| Package | npm | Description |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `radar-sdk-js` | [](https://www.npmjs.com/package/radar-sdk-js) | Core SDK — tracking, geocoding, search, routing |
| `@radarlabs/plugin-maps` | [](https://www.npmjs.com/package/@radarlabs/plugin-maps) | Maps UI — RadarMap, RadarMarker, RadarPopup (MapLibre GL) |
| `@radarlabs/plugin-autocomplete` | [](https://www.npmjs.com/package/@radarlabs/plugin-autocomplete) | Autocomplete UI widget |
| `@radarlabs/plugin-fraud` | [](https://www.npmjs.com/package/@radarlabs/plugin-fraud) | Fraud detection — verified tracking, location tokens |
## Plugin system
Version 5 introduces a plugin architecture. UI components like Maps and
Autocomplete are no longer bundled in the core SDK. Instead, you register
plugins before or after calling `Radar.initialize()`:
```js
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
import { createFraudPlugin } from '@radarlabs/plugin-fraud';
Radar.registerPlugin(createMapsPlugin());
Radar.registerPlugin(createAutocompletePlugin());
Radar.registerPlugin(createFraudPlugin());
Radar.initialize('prj_test_pk_...');
```
If you're building a custom plugin, import the plugin types from the
`radar-sdk-js/plugin` subpath:
```ts
import type { RadarPlugin, RadarPluginContext } from 'radar-sdk-js/plugin';
```
## 🔗 Other links
- [Contributing](CONTRIBUTING.md)
- [Migrating from 3.x to 4.x](https://github.com/radarlabs/radar-sdk-js/blob/v4-beta/MIGRATION.md)
- [Migrating from 4.x to 5.x](MIGRATION.md)
- [Radar documentation](https://radar.com/documentation/sdk/web)
## 📫 Support
Have questions? We're here to help! Email us at [support@radar.com](mailto:support@radar.com).