Giter Club home page Giter Club logo

radar-sdk-js's Introduction

npm CircleCI branch NPM downloads License

โšก Use Radar SDKs and APIs to add location context to your apps with just a few lines of code. โšก

๐Ÿ”ฅ Try it! ๐Ÿ”ฅ

๐Ÿš€ Installation and Usage

With npm

Note: The Radar JS SDK has a peer depdendency on maplibre-gl-js.

Add the radar-sdk-js and maplibre-gl packages

# 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

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

<script src="https://js.radar.com/v4.1.18/radar.min.js"></script>

Then initialize the Radar SDK

<script type="text/javascript">
  Radar.initialize('prj_test_pk_...', { /* options */ });
</script>

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>
  <head>
    <link href="https://js.radar.com/v4.1.18/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.1.18/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 500px;" />

    <script type="text/javascript">
      Radar.initialize('<RADAR_PUBLISHABLE_KEY>');

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

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>
  <head>
    <link href="https://js.radar.com/v4.1.18/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.1.18/radar.min.js"></script>
  </head>

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

    <script type="text/javascript">
      // 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);
        },
      });
    </script>
  </body>
</html>

Geofencing

To power geofencing experiences on the web, use the Track API to grab the user's current location for geofence and event detection.

<html>
  <head>
    <link href="https://js.radar.com/v4.1.18/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.1.18/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>

See more examples and usage in the Radar web SDK documentation here.

๐Ÿ”— Other links

๐Ÿ“ซ Support

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

radar-sdk-js's People

Contributors

ashalam avatar blackmad avatar boonboonsiri avatar bschoeneweis avatar corypisano avatar david-goodfellow avatar dependabot[bot] avatar jaspk06 avatar jkao avatar joekuttickal avatar joethompson-radar avatar jororadar avatar jsani-radar avatar kochis avatar nickpatrick avatar tjulien avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

radar-sdk-js's Issues

[4.0.1] - Jest - Cannot find module 'radar-sdk-js'

Help Needed configuring jest + Radar

I'm trying to use Radar for autocomplete and address validation, but am running into the following error when running jest:

Test suite failed to run. Cannot find module 'radar-sdk-js' from 'fetchAutocomplete/index.tsx'

In that file, I am importing radar-sdk-js as import Radar from 'radar-sdk-js'

I'm using Next js and my jest config is

// jest.config.js

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
    '^@/radar/(.*)$': '<rootDir>/radar/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customJestConfig);

I have tried uninstalling and reinstalling Radar. It works fine when I include it as html rather than using yarn.
I tried adding a module name mapper of ^radar-sdk-js': '<rootDir>/node_modules/radar-sdk-js' but that isn't working.

I really like the library and want to keep using it, but I'm not sure how to go about making this work. any help would be appreciated.

Thank you

i'm using jest ^29.5.0

I made some changes to jest config and tried:

onst customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
    '^@/radar/(.*)$': '<rootDir>/radar/$1',
    '^radar-sdk-js': '<rootDir>/node_modules/radar-sdk-js/dist/radar.js', // Add this otherwise tests will fail. This didn't need to be added before(?)
  },
  transformIgnorePatterns: ['node_modules/(?!(radar-sdk-js)/)'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx|mjs)$': 'ts-jest',
  },
  testEnvironment: 'jest-environment-jsdom',
};

This got me a new error:

 Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     โ€ข If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     โ€ข If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     โ€ข To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     โ€ข If you need a custom transformation specify a "transform" option in your config.
     โ€ข If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/brennanbutler/WebstormProjects/mileage/node_modules/radar-sdk-js/dist/radar.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import maplibregl from 'maplibre-gl';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Geocode Autocomplete country prioritize

I have a problem on Radar API. Is there anyway to prioritize country search on autocomplete
let's say I have a case I am searching query 456 boradway through two country, country: 'US, CA' . Can I prioritize first Canadian state or U.S states at first
API: https://api.radar.io/v1/search/autocomplete?country=CA, US&query=456 broad

SDK initialization throws in Android Instagram webview

In my testing, navigator.permissions is undefined in the Instagram webview on Android (Chrome 119 UA/Android 14/Pixel 8).

In this scenario, the initializing the SDK throws an error:

if (!navigator || !navigator.permissions) {
return reject(new RadarLocationError('navigator.permissions is not available.'));
}

Could this set the authorization to NOT_DETERMINED instead of throwing?

Incorrect Typescript interface

Hi,
while experimenting with Radar Js SDK I noticed the following:

image

It looks like the Radar.autocomplete promise returns addresses as a single RadarAutocompleteAddress rather than an array:

image

Should it return RadarAutocompleteAddress[] instead?

Typescript?

Hello, I have been tasked with finding a solution to get address autocomplete for my company and came across Radar and would love to use it, however we use pretty strict typescript and thus makes using this package pretty difficult.

Are there any plans to convert to typescript? Or at least publish a types package?

Not Found - GET https://registry.npmjs.org/maplibre-gl-js - Not found

Trying to install the peer dependency you mention, but that package doesn't exist.

Note: The Radar JS SDK has a peer depdendency on [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js).

When attempting to install, I get the following:

npm install --save radar-sdk-js maplibre-gl-js
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/maplibre-gl-js - Not found
npm ERR! 404 
npm ERR! 404  'maplibre-gl-js@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/dougjones/.npm/_logs/2023-07-28T01_59_11_894Z-debug-0.log

ts types + es build

hello, could you write typings for library? and build es treeshakeable dist? i want to use it in angular and now i must write my own types

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.