Radar JS SDK v4.4.6

Track a user

Use the device location to get contextual details about the user's current location, and display it on a map.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.4.6/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.4.6/radar.min.js"></script>
  </head>

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

    <script>
      $('#track-once').click(() => {
        Radar.initialize('<RADAR_PUBLISHABLE_KEY>');

        Radar.trackOnce({ userId: 'test-user-id' })
          .then(({ location, user, events }) => {
            const map = Radar.ui.map({
              container: 'map',
            });
            map.setCenter([location.longitude, location.latitude]);

            const html = `
              <p>${user.userId}</p>
              <p>${location.latitude},${location.longitude}</p>
            `.trim();

            const marker = Radar.ui.marker({ popup: { html }})
              .setLngLat([location.longitude, location.latitude])
              .addTo(map);
          });
      });
    </script>
  </body>
</html>