radar-sdk-js

v5.0.0

Published

a month ago

Web Javascript SDK for Radar, location infrastructure for mobile and web apps.

0High
0Medium
0Low

🔥 Try it! 🔥

Geofencing
Maps APIs
Maps UI
Autocomplete UI

🚀 Installation and Usage

With npm

Install the core SDK:

# with npm
npm install radar-sdk-js

# with yarn
yarn add radar-sdk-js

Then import and initialize:

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:

<script src="https://js.radar.com/v5.0.0/radar.min.js"></script>

<script>
  Radar.initialize('prj_test_pk_...', {
    /* options */
  });
</script>

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)

npm install @radarlabs/plugin-maps maplibre-gl

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)

npm install @radarlabs/plugin-autocomplete

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)

npm install @radarlabs/plugin-fraud

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:

<link href="https://js.radar.com/maps/v1.0.0/radar-maps.css" rel="stylesheet" />
<link href="https://js.radar.com/autocomplete/v1.0.0/radar-autocomplete.css" rel="stylesheet" />

<script src="https://js.radar.com/v5.0.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.0.0/radar-autocomplete.min.js"></script>
<script src="https://js.radar.com/fraud/v1.0.0/radar-fraud.min.js"></script>

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>
  <head>
    <link href="https://js.radar.com/maps/v1.0.0/radar-maps.css" rel="stylesheet" />
    <script src="https://js.radar.com/v5.0.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('<RADAR_PUBLISHABLE_KEY>');

      const map = Radar.ui.map({
        container: 'map', // OR document.getElementById('map')
      });
    </script>
  </body>
</html>

Provide a width and height on the container element for the map to render correctly.

Create an autocomplete input

<html>
  <head>
    <link href="https://js.radar.com/autocomplete/v1.0.0/radar-autocomplete.css" rel="stylesheet" />
    <script src="https://js.radar.com/v5.0.0/radar.min.js"></script>
    <script src="https://js.radar.com/autocomplete/v1.0.0/radar-autocomplete.min.js"></script>
  </head>

  <body>
    <div id="autocomplete" />

    <script>
      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);
        },
      });
    </script>
  </body>
</html>

Geofencing

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.0.0/radar.min.js"></script>
  </head>

  <body>
    <script>
      Radar.initialize('<RADAR_PUBLISHABLE_KEY>');

      Radar.trackOnce({ userId: 'example-user-id' }).then(({ location, user, events }) => {
        // do something with user location or events
      });
    </script>
  </body>
</html>

Packages

| 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 |

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():

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:

import type { RadarPlugin, RadarPluginContext } from 'radar-sdk-js/plugin';

🔗 Other links

📫 Support

Have questions? We're here to help! Email us at [email protected].