Calculate a route from Paris to Brussels

~27 min remaining

Step 1 of 6 — Set up the project

What you'll build: a single-page app that calculates a route between Paris and Brussels, displays alternatives, and lets the user tap to switch between them. Prerequisites: Node 20+, a Magic Lane API key, and basic TypeScript. Total time: ~27 minutes.

1. Set up the project

Spin up a new TypeScript project and install the Magic Lane Maps SDK. We'll use Vite for a zero-config dev server, but any bundler that handles ES modules works.

npm create vite@latest paris-brussels -- --template vanilla-ts
cd paris-brussels
npm install
npm install @magiclane/maps-sdk

Replace index.html at the project root with a minimal scaffold that gives us a full-window map container and three buttons:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Paris → Brussels</title>
    <style>
      html, body, #map { margin: 0; height: 100%; }
      #controls {
        position: fixed; top: 16px; left: 16px; z-index: 10;
        display: flex; gap: 8px;
      }
      button {
        padding: 8px 14px; border-radius: 6px; border: 0;
        background: #2d6cdf; color: #fff; cursor: pointer;
      }
      button:disabled { opacity: 0.4; cursor: not-allowed; }
      #status {
        position: fixed; bottom: 16px; left: 16px;
        background: rgba(0,0,0,0.7); color: #fff;
        padding: 6px 10px; border-radius: 4px; font: 13px sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="controls">
      <button id="build">Build route</button>
      <button id="clear" disabled>Clear</button>
      <button id="cancel" disabled>Cancel</button>
    </div>
    <div id="status">Ready.</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

The buttons are wired up over the next few steps. Open src/main.ts — we'll fill it in from scratch.