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! 🔥
Install the core SDK:
# with npm
npm install radar-sdk-js
# with yarn
yarn add radar-sdk-jsThen import and initialize:
import Radar from 'radar-sdk-js';
// initialize with your publishable key
Radar.initialize({ publishableKey: 'prj_test_pk_...' });Add the following to your HTML:
<script src="https://js.radar.com/v5.1.0/radar.min.js"></script>
<script>
Radar.initialize({ publishableKey: 'prj_test_pk_...' });
</script>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.
npm install @radarlabs/plugin-maps maplibre-glimport Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
Radar.initialize({ publishableKey: 'prj_test_pk_...' });
const map = Radar.ui.map({
container: 'map',
});npm install @radarlabs/plugin-autocompleteimport Radar from 'radar-sdk-js';
import { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
import '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';
Radar.registerPlugin(createAutocompletePlugin());
Radar.initialize({ publishableKey: 'prj_test_pk_...' });
Radar.ui.autocomplete({
container: 'autocomplete',
onSelection: (result) => {
console.log(result);
},
});npm install @radarlabs/plugin-fraudimport Radar from 'radar-sdk-js';
import { createFraudPlugin } from '@radarlabs/plugin-fraud';
Radar.registerPlugin(createFraudPlugin());
Radar.initialize({ publishableKey: 'prj_live_pk_...' });
const { token, user, events } = await Radar.fraud.trackVerified();Plugin CDN bundles auto-register with the core SDK when loaded. Load the core SDK first, then any plugins you need:
<link href="https://js.radar.com/maps/v1.0.0/radar-maps.css" rel="stylesheet" />
<link href="https://js.radar.com/autocomplete/v1.1.0/radar-autocomplete.css" rel="stylesheet" />
<script src="https://js.radar.com/v5.1.0/radar.min.js"></script>
<script src="https://js.radar.com/maps/v1.0.0/radar-maps.min.js"></script>
<script src="https://js.radar.com/autocomplete/v1.1.0/radar-autocomplete.min.js"></script>
<script src="https://js.radar.com/fraud/v1.0.0/radar-fraud.min.js"></script>Initialize the SDK and the maps plugin, then render a map into an HTML element by ID or element reference.
<html>
<head>
<link href="https://js.radar.com/maps/v1.0.0/radar-maps.css" rel="stylesheet" />
<script src="https://js.radar.com/v5.1.0/radar.min.js"></script>
<script src="https://js.radar.com/maps/v1.0.0/radar-maps.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;" />
<script>
Radar.initialize({ publishableKey: '<RADAR_PUBLISHABLE_KEY>' });
const map = Radar.ui.map({
container: 'map', // OR document.getElementById('map')
});
</script>
</body>
</html>Provide a
widthandheighton the container element for the map to render correctly.
<html>
<head>
<link href="https://js.radar.com/autocomplete/v1.1.0/radar-autocomplete.css" rel="stylesheet" />
<script src="https://js.radar.com/v5.1.0/radar.min.js"></script>
<script src="https://js.radar.com/autocomplete/v1.1.0/radar-autocomplete.min.js"></script>
</head>
<body>
<div id="autocomplete" />
<script>
Radar.initialize({ publishableKey: '<RADAR_PUBLISHABLE_KEY>' });
// create autocomplete widget
Radar.ui.autocomplete({
container: 'autocomplete', // OR document.getElementById('autocomplete')
responsive: true,
width: '600px',
onSelection: (result) => {
console.log(result);
},
});
</script>
</body>
</html>Use the Track API to get the user's current location for geofence and event detection. No UI plugins are needed for geofencing.
<html>
<head>
<script src="https://js.radar.com/v5.1.0/radar.min.js"></script>
</head>
<body>
<script>
Radar.initialize({ publishableKey: '<RADAR_PUBLISHABLE_KEY>' });
Radar.trackOnce({ userId: 'example-user-id' }).then(({ location, user, events }) => {
// do something with user location or events
});
</script>
</body>
</html>| Package | npm | Description |
|---|---|---|
radar-sdk-js |
|
Core SDK — tracking, geocoding, search, routing |
@radarlabs/plugin-maps |
 |
Maps UI — RadarMap, RadarMarker, RadarPopup (MapLibre GL) |
@radarlabs/plugin-autocomplete |
 |
Autocomplete UI widget |
@radarlabs/plugin-fraud |
 |
Fraud detection — verified tracking, location tokens |
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():
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({ publishableKey: 'prj_test_pk_...' });If you're building a custom plugin, import the plugin types from the
radar-sdk-js/plugin subpath:
import type { RadarPlugin, RadarPluginContext } from 'radar-sdk-js/plugin';Have questions? We're here to help! Email us at support@radar.com.