Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T14:07:37.000Z (about 2 months ago)
- Last Synced: 2024-08-05T16:17:35.585Z (about 2 months ago)
- Topics: geocoding, geofencing, geolocation, html5-geolocation, html5-geolocation-api, location-tracking, radar
- Language: TypeScript
- Homepage: https://radar.com
- Size: 1.69 MB
- Stars: 41
- Watchers: 11
- Forks: 11
- Open Issues: 16
-
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
> **Note:** The Radar JS SDK has a peer depdendency on [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js).
Add the `radar-sdk-js` and `maplibre-gl` packages
```bash
# with npm
npm install --save radar-sdk-js maplibre-gl
# with yarn
yarn add radar-sdk-js maplibre-gl
```
Then import as an ES Module in your project
```js
import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css'
// initialize with your test or live publishable key
Radar.initialize('prj_test_pk_...', { /* options */ });
```
### In your html
> The MapLibre dependency is not necessary to install when using installation with the script tag.
Add the following script in your `html` file
```html
```
Then initialize the Radar SDK
```html
Radar.initialize('prj_test_pk_...', { /* options */ });
```
## Quickstart
### Create a map
To create a map, first initialize the Radar SDK with your publishable key. Then specify the HTML element where you want to render the map, by providing the element's ID, or the element object itself.
```html
Radar.initialize('<RADAR_PUBLISHABLE_KEY>');
const map = Radar.ui.map({
container: 'map', // OR document.getElementById('map')
});
```
> Remember to provide a `width` and `height` on the element the map is being rendered to
### Create an autocomplete input
To create an autocomplete input, first initialize the Radar SDK with your publishable key. Then specify the HTML element where you want to render the input.
```html
// initialize Radar SDK
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
To power [geofencing](https://radar.com/documentation/geofencing/overview) experiences on the web, use the [Track API](https://radar.com/documentation/api#track) to grab the user's current location for geofence and event detection.
```html
Radar.initialize('<RADAR_PUBLISHABLE_KEY>');
Radar.trackOnce({ userId: 'example-user-id' })
.then(({ location, user, events }) => {
// do something with user location or events
});
```
See more examples and usage in the Radar web SDK documentation [here](https://radar.com/documentation/sdk/web).
## 🔗 Other links
* [Contributing](https://github.com/radarlabs/radar-sdk-js/blob/v4-beta/CONTRIBUTING.md)
* [Migrating from 3.x to 4.x](https://github.com/radarlabs/radar-sdk-js/blob/v4-beta/MIGRATION.md)
## 📫 Support
Have questions? We're here to help! Email us at [[email protected]](mailto:[email protected]).