![](\"assets/logo.svg\"){kind=logo}
\n \n
\n ![\"npm\"](\"https://img.shields.io/npm/v/radar-sdk-js.svg\")
\n ![\"CircleCI](\"https://img.shields.io/circleci/project/github/radarlabs/radar-sdk-js/master.svg\")
\n ![\"NPM](\"https://img.shields.io/npm/dm/radar-sdk-js.svg?style=flat-square\")
\n ![\"License\"](\"https://img.shields.io/badge/license-Apache%202-blue\"){kind=icon}
\n ā” Use Radar SDKs and APIs to add location context to your apps with just a few lines of code. ā”\n
\n\nš„ Try it! š„\n\n- Geofencing\n- Maps APIs\n- Maps UI\n- Autocomplete UI\n\n## š Installation and Usage\n\n### With npm\n\nInstall the core SDK:\n\n```bash\n# with npm\nnpm install radar-sdk-js\n\n# with yarn\nyarn add radar-sdk-js\n```\n\nThen import and initialize:\n\n```js\nimport Radar from 'radar-sdk-js';\n\n// initialize with your publishable key\nRadar.initialize({ publishableKey: 'prj_test_pk_...' });\n```\n\n### With a script tag\n\nAdd the following to your HTML:\n\n```html\n\n\n\n```\n\n## Adding plugins\n\nIn v5 the Maps, Autocomplete, and Fraud components are separate packages that\nyou install alongside the core SDK. This keeps the core bundle small if you\nonly need the API.\n\n### Maps plugin (npm)\n\n```bash\nnpm install @radarlabs/plugin-maps maplibre-gl\n```\n\n```js\nimport Radar from 'radar-sdk-js';\nimport { createMapsPlugin } from '@radarlabs/plugin-maps';\nimport '@radarlabs/plugin-maps/dist/radar-maps.css';\n\nRadar.registerPlugin(createMapsPlugin());\nRadar.initialize({ publishableKey: 'prj_test_pk_...' });\n\nconst map = Radar.ui.map({\n container: 'map',\n});\n```\n\n### Autocomplete plugin (npm)\n\n```bash\nnpm install @radarlabs/plugin-autocomplete\n```\n\n```js\nimport Radar from 'radar-sdk-js';\nimport { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';\nimport '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';\n\nRadar.registerPlugin(createAutocompletePlugin());\nRadar.initialize({ publishableKey: 'prj_test_pk_...' });\n\nRadar.ui.autocomplete({\n container: 'autocomplete',\n onSelection: (result) => {\n console.log(result);\n },\n});\n```\n\n### Fraud plugin (npm)\n\n```bash\nnpm install @radarlabs/plugin-fraud\n```\n\n```js\nimport Radar from 'radar-sdk-js';\nimport { createFraudPlugin } from '@radarlabs/plugin-fraud';\n\nRadar.registerPlugin(createFraudPlugin());\nRadar.initialize({ publishableKey: 'prj_live_pk_...' });\n\nconst { token, user, events } = await Radar.fraud.trackVerified();\n```\n\n### Plugins via script tag (CDN)\n\nPlugin CDN bundles auto-register with the core SDK when loaded. Load\nthe core SDK first, then any plugins you need:\n\n```html\n\n\n\n\n\n\n\n```\n\n## Quickstart\n\n### Create a map\n\nInitialize the SDK and the maps plugin, then render a map into an HTML element\nby ID or element reference.\n\n```html\n\n \n \n \n \n \n\n \n \n\n \n \n\n```\n\n> Provide a `width` and `height` on the container element for the map to\n> render correctly.\n\n### Create an autocomplete input\n\n```html\n\n \n \n \n \n \n\n \n \n\n \n \n\n```\n\n### Geofencing\n\nUse the [Track API](https://radar.com/documentation/api#track) to get the\nuser's current location for geofence and event detection. No UI plugins\nare needed for geofencing.\n\n```html\n\n \n \n \n\n \n \n \n\n```\n\n## Packages\n\n| Package | npm | Description |\n| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |\n| `radar-sdk-js` | [](https://www.npmjs.com/package/radar-sdk-js) | Core SDK ā tracking, geocoding, search, routing |\n| `@radarlabs/plugin-maps` | [](https://www.npmjs.com/package/@radarlabs/plugin-maps) | Maps UI ā RadarMap, RadarMarker, RadarPopup (MapLibre GL) |\n| `@radarlabs/plugin-autocomplete` | [](https://www.npmjs.com/package/@radarlabs/plugin-autocomplete) | Autocomplete UI widget |\n| `@radarlabs/plugin-fraud` | [](https://www.npmjs.com/package/@radarlabs/plugin-fraud) | Fraud detection ā verified tracking, location tokens |\n\n## Plugin system\n\nVersion 5 introduces a plugin architecture. UI components like Maps and\nAutocomplete are no longer bundled in the core SDK. Instead, you register\nplugins before or after calling `Radar.initialize()`:\n\n```js\nimport Radar from 'radar-sdk-js';\nimport { createMapsPlugin } from '@radarlabs/plugin-maps';\nimport { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';\nimport { createFraudPlugin } from '@radarlabs/plugin-fraud';\n\nRadar.registerPlugin(createMapsPlugin());\nRadar.registerPlugin(createAutocompletePlugin());\nRadar.registerPlugin(createFraudPlugin());\nRadar.initialize({ publishableKey: 'prj_test_pk_...' });\n```\n\nIf you're building a custom plugin, import the plugin types from the\n`radar-sdk-js/plugin` subpath:\n\n```ts\nimport type { RadarPlugin, RadarPluginContext } from 'radar-sdk-js/plugin';\n```\n\n## š Other links\n\n- [Contributing](CONTRIBUTING.md)\n- [Migrating from 3.x to 4.x](https://github.com/radarlabs/radar-sdk-js/blob/v4-beta/MIGRATION.md)\n- [Migrating from 4.x to 5.x](MIGRATION.md)\n- [Radar documentation](https://radar.com/documentation/sdk/web)\n\n## š« Support\n\nHave questions? We're here to help! Email us at [support@radar.com](mailto:support@radar.com).\n","readmeFilename":"README.md"}