Radar JS SDK v4.4.6

Start a trip

Start a trip to a destination and send the user's current location.

<!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>
      $('#start-trip').click(() => {
        Radar.initialize('<RADAR_PUBLISHABLE_KEY>');

        const tripOptions = {
          userId: $('#user-id').val(),
          mode: $('#mode').val(),
          externalId: $('#external-id').val(),
          destinationGeofenceTag: $('#dest-tag').val(),
          destinationGeofenceExternalId: $('#dest-id').val(),
        };

        Radar.startTrip(tripOptions).then(({ trip }) => {
          Radar.trackOnce().then(({ location, user, events }) => {
            const map = Radar.ui.map({
              container: 'map',
            });

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

            const userMarker = Radar.ui.marker({
              popup: {
                html: userContent,
              },
            })
              .setLngLat([location.longitude, location.latitude])
              .addTo(map);

            if (user && user.trip && user.trip.destinationLocation) {
              // create destination marker
              const destContent = `
                <p><b>${user.trip.destinationGeofenceTag}</b></p>
                <p>${user.trip.destinationGeofenceExternalId}</p>
              `.trim();

              const destMarker = Radar.ui.marker({
                color: '#FF6F00',
                popup: {
                  html: destContent,
                },
              })
                .setLngLat(user.trip.destinationLocation.coordinates)
                .addTo(map);

              // fit map to user and destination
              const bounds = new Radar.ui.maplibregl.LngLatBounds(
                userMarker.getLngLat(),
                destMarker.getLngLat(),
              );
              map.fitBounds(bounds, { padding: 50 });

            } else {
              // center map on users location
              map.setCenter([location.longitude, location.latitude]);
              map.setZoom(14);
            }
          });
        });
      });
    </script>
  </body>
</html>