Theme

Quick Start ​

Get started with De. in under 10 minutes. This guide will walk you through setting up your first application with real-time map tracking.

Prerequisites ​

Before you begin, make sure you have:

  • Node.js 14+ installed
  • A package manager (npm, yarn, or pnpm)
  • A De. workspace account (sign up here)
  • Your access token (get it here)

Step 1: Create a New Project ​

bash
mkdir my-delivery-app
cd my-delivery-app
npm init -y
bash
mkdir my-delivery-app
cd my-delivery-app
yarn init -y
bash
mkdir my-delivery-app
cd my-delivery-app
pnpm init

Step 2: Install the SDK ​

bash
npm install @de./sdk
bash
yarn add @de./sdk
bash
pnpm add @de./sdk

Step 3: Create Your HTML File ​

Create an index.html file:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Delivery App - De.</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    header {
      background: #0ea5e9;
      color: white;
      padding: 1rem 2rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    h1 {
      font-size: 1.5rem;
      font-weight: 600;
    }
    
    #map-container {
      flex: 1;
      width: 100%;
    }
  </style>
</head>
<body>
  <header>
    <h1>🚚 My Delivery App</h1>
  </header>
  
  <div id="map-container"></div>
  
  <script type="module" src="./app.js"></script>
</body>
</html>

Step 4: Initialize the SDK ​

Create an app.js file:

javascript
import De from '@de./sdk'

// Your De. access token
const ACCESS_TOKEN = 'your-access-token-here'

async function init() {
  try {
    // Initialize MSI (Map Service Interface)
    const msi = new De.MSI({
      element: 'map-container',
      accessToken: ACCESS_TOKEN,
      env: 'prod'
    })

    // Load the map interface
    console.log('Loading map...')
    const { controls, handles } = await msi.load()
    console.log('Map loaded successfully!')

    // Set a delivery route
    await setupDeliveryRoute(handles)
    
    // Track a delivery vehicle
    await trackVehicle(handles)

  } catch (error) {
    console.error('Error initializing De.:', error)
  }
}

async function setupDeliveryRoute(handles) {
  // Set pickup point (warehouse)
  await handles.pickupPoint(
    { lng: -74.0060, lat: 40.7128 }, // New York coordinates
    {
      label: 'Warehouse',
      sublabel: 'Distribution Center A',
      duration: 5,
      unit: 'min'
    }
  )

  // Set dropoff point (customer)
  await handles.dropoffPoint(
    { lng: -73.9855, lat: 40.7580 }, // Times Square coordinates
    {
      label: 'Customer Address',
      sublabel: '123 Main St',
      duration: 15,
      unit: 'min'
    }
  )

  console.log('Delivery route set!')
}

async function trackVehicle(handles) {
  // Create a vehicle tracking stream
  const vehicleStream = handles.peerLocation(
    {
      latitude: 40.7200,
      longitude: -74.0050,
      accuracy: 10,
      heading: 90,
      speed: 25
    },
    {
      label: 'Delivery Van #101',
      sublabel: 'Driver: John Doe',
      description: 'On the way to delivery'
    }
  )

  // Simulate vehicle movement (in production, this would come from real GPS)
  let lat = 40.7200
  let lng = -74.0050

  setInterval(() => {
    // Move vehicle slightly towards destination
    lat += 0.001
    lng += 0.001

    vehicleStream.write({
      position: {
        latitude: lat,
        longitude: lng,
        accuracy: 10,
        heading: 90,
        speed: 25
      },
      caption: {
        label: 'Delivery Van #101',
        sublabel: 'Driver: John Doe',
        description: `Moving towards destination`
      }
    })
  }, 3000) // Update every 3 seconds

  console.log('Vehicle tracking started!')
}

// Initialize the app
init()

Step 5: Run Your App ​

For development, you can use a simple HTTP server:

bash
python -m http.server 8080
bash
npx serve
bash
php -S localhost:8080

Open your browser and navigate to http://localhost:8080

What You Just Built ​

Congratulations! You've created a delivery tracking application with:

  • Interactive Map - Powered by De.
  • Pickup & Delivery Points - Visual route markers
  • Real-time Vehicle Tracking - Live position updates
  • Route Visualization - Automatic route drawing

Next Steps ​

Now that you have a basic app running, explore more features:

Add Navigation ​

javascript
const navStream = await handles.navigation({
  routeId: 'delivery-1',
  origin: { coords: pickupLocation },
  destination: { coords: deliveryLocation },
  options: { profile: 'driving-traffic' }
})

// Listen for navigation events
handles.on('pe:nearby', () => {
  console.log('Driver is approaching destination!')
})

handles.on('pe:arrived', () => {
  console.log('Driver has arrived!')
})

Learn more about navigation →

Add Multiple Vehicles ​

javascript
const fleetStream = handles.nearby([
  {
    id: 'van-1',
    type: 'delivery-van',
    position: [40.7128, -74.0060],
    caption: { label: 'Van #101' }
  },
  {
    id: 'truck-1',
    type: 'freight-truck',
    position: [40.7200, -74.0100],
    caption: { label: 'Truck #201' }
  }
])

// Control fleet in real-time
fleetStream.live(async controls => {
  await controls.move({
    id: 'van-1',
    position: newPosition
  })
})

Learn more about fleet management →

Integrate with Backend APIs ​

javascript
const access = new De.Access({
  workspace: 'your-workspace-id',
  accessToken: ACCESS_TOKEN,
  env: 'prod'
})

// Create an order
const order = await access.request({
  url: '/orders',
  method: 'POST',
  body: {
    pickupLocation: warehouseCoords,
    deliveryLocation: customerCoords,
    items: [{ name: 'Package A', weight: 5 }]
  }
})

console.log('Order created:', order.id)

Explore backend APIs →

Add Authentication ​

javascript
// Authenticate user
const authResponse = await access.request({
  url: '/auth/signin',
  method: 'POST',
  body: {
    phone: '+1234567890',
    device: { platform: 'web' }
  }
})

// Verify code
const verifyResponse = await access.request({
  url: '/auth/verify',
  method: 'POST',
  body: {
    phone: '+1234567890',
    code: '123456'
  }
})

// User authenticated!
console.log('User token:', verifyResponse.token)

Setup authentication →

Common Issues ​

Map Not Loading ​

If the map doesn't load, check:

  1. Valid Access Token - Ensure your token is correct
  2. Element ID - Verify map-container exists in HTML
  3. Network Connection - Check browser console for errors
  4. CORS Issues - Ensure your domain is whitelisted

TypeScript Errors ​

If using TypeScript, install type definitions:

bash
npm install --save-dev @types/node

And create a tsconfig.json:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Resources ​

Get Help ​

Need assistance? We're here to help: