Getting Started

Wayvane provides a high-performance geospatial SDK for real estate applications. Our SDK simplifies map rendering, routing, and geocoding into just a few lines of code.

Authentication

All API requests require an API Key. You can pass it as a query parameter ?key=YOUR_KEY or in the header x-api-key: YOUR_KEY.

const API_KEY = 'pk_live_xxxxxxxxxxxxx'

Installation

Option A: CDN (Easiest)

Simply add these lines to your HTML file.

<link rel="stylesheet" href="https://cdn.wayvane.com/style.css">
<script type="module">
  import { WayvaneMap, WayvaneClient } from 'https://cdn.wayvane.com/wayvane.js';
  
  // Your code here...
</script>

Map & Visuals

Initialize Map

Create a map container and initialize it.

const map = new WayvaneMap({
  container: 'map', // ID of the div
  apiKey: 'YOUR_API_KEY',
  center: [77.2090, 28.6139], // [lng, lat]
  zoom: 12
});
Live Preview

Add Markers

Add markers with custom colors and popups easily.

// Simple marker
map.addMarker([77.2090, 28.6139]);

// Customized marker
map.addMarker([77.2090, 28.6139], {
  color: '#ff0000', // Red
  popup: '<b>Hello Delhi!</b><br>This is a custom popup.'
});
Live Preview

Draw Routes

Plot GeoJSON route geometries instantly.

map.addRouteLayer(routeGeometry, {
  color: '#3b82f6', // Blue
  width: 5
});
Live Preview

Fit Bounds

Automatically zoom to show multiple points.

const points = [
  [77.20, 28.61],
  [77.25, 28.65]
];
map.fitBounds(points);
Live Preview

Data API (WayvaneClient)

Use the WayvaneClient to fetch data without managing raw HTTP requests.

Initialize Client

const client = new WayvaneClient({
  apiKey: 'YOUR_API_KEY'
});

Calculate Route

Get driving directions, distance, and duration.

const start = { lat: 28.6139, lng: 77.2090 };
const end = { lat: 28.5500, lng: 77.2500 };

const route = await client.route(start, end);

console.log(`Distance: ${route.distance} km`);
console.log(`Duration: ${route.duration} min`);

// Plot it directly!
map.addRouteLayer(route.geometry);

Search / Geocoding

Convert addresses to coordinates (Forward Geocoding).

const results = await client.search('Connaught Place, Delhi');

if (results.length > 0) {
  const firstResult = results[0];
  console.log('Found:', firstResult.properties.name);
  console.log('Coordinates:', firstResult.geometry.coordinates); // [lng, lat]
}

Travel Time Matrix

Calculate travel times from one origin to multiple destinations efficiently.

const origin = { lat: 28.6139, lng: 77.2090 };
const destinations = [
  { lat: 28.5500, lng: 77.2500 },
  { lat: 28.7041, lng: 77.1025 }
];

const matrix = await client.matrix(origin, destinations);

if (matrix) {
  console.log('Durations (seconds):', matrix.durations);
  console.log('Distances (meters):', matrix.distances);
}

UI Components

Wayvane includes pre-built UI components to speed up development.

WayvaneGeocoder

A ready-to-use search bar with autocomplete.

import { WayvaneGeocoder } from 'https://cdn.wayvane.com/wayvane.js';

// Ensure you have a container div: <div id="geocoder"></div>

new WayvaneGeocoder({
  container: document.getElementById('geocoder'),
  map: map, // Optional: Links to map instance
  apiKey: 'YOUR_API_KEY',
  placeholder: 'Search for a place...',
  onSelect: (result) => {
    console.log('Selected:', result);
    // result.geometry.coordinates is [lng, lat]
  }
});

CommuteBadge

A small badge that displays travel time between two points.

import { CommuteBadge } from 'https://cdn.wayvane.com/wayvane.js';

// <div id="badge-container"></div>

const badge = new CommuteBadge({
  container: 'badge-container',
  apiKey: 'YOUR_API_KEY'
});

badge.render({
  origin: '77.2090,28.6139', // lng,lat
  destination: '77.2500,28.5500', // lng,lat
  mode: 'driving' // or 'walking', 'cycling'
});

ComparisonWidget

A full-featured widget to compare commute times from multiple locations to an office.

import { ComparisonWidget } from 'https://cdn.wayvane.com/wayvane.js';

// <div id="comparison-widget" style="height: 600px;"></div>

new ComparisonWidget({
  container: 'comparison-widget',
  apiKey: 'YOUR_API_KEY'
});

Advanced Customization

The SDK is built on top of MapLibre GL JS. You can access the raw map instance for full control.

// Access the raw MapLibre instance
map.map.on('click', (e) => {
  console.log('Clicked at:', e.lngLat);
});

map.map.flyTo({ center: [0, 0], zoom: 2 });