Magic Lane Maps SDK for TypeScript

The Magic Lane Maps SDK for TypeScript is a powerful JavaScript library for creating interactive, high-performance maps and navigation experiences on the web. Built on WebAssembly (WASM) technology, it delivers native-like performance directly in the browser with global OpenStreetMap coverage, 3D terrain visualization, and advanced navigation capabilities.

The Maps SDK for TypeScript is part of the cross-platform Magic Lane ecosystem, which also includes compatible native SDKs for Flutter, Android, and iOS. Magic Lane provides comprehensive mapping and navigation solutions to help you build exceptional location-based experiences. To get started with the Maps SDK for TypeScript, sign up for a Magic Lane account.

Key Features

• Global Coverage - Access to up-to-date, high-quality OpenStreetMap data worldwide
• 3D Terrain Visualization - Immersive experience with detailed 3D terrain modeling and topography
• High Performance - Powered by WebAssembly for native-like performance in the browser
• Advanced Navigation - Turn-by-turn routing optimized for car, pedestrian, and bicycle
• Voice Guidance - Multi-language voice navigation support
• Real-Time Traffic - Live traffic data and incident information for dynamic route optimization
• Customizable Styling - Fully customizable map appearance to match your brand
• Comprehensive Search - POI search, geocoding, and address lookup capabilities
• Activity Recording - Capture and analyze sensor data during navigation sessions
• Cross-Browser Support - Compatible with Chrome, Firefox, Safari, and Edge

Installation

npm

npm install @magiclane/maps-sdk

yarn

yarn add @magiclane/maps-sdk

pnpm

pnpm add @magiclane/maps-sdk

Quick Start

import { GemKit, GemMap } from '@magiclane/maps-sdk';

// Initialize with your API token
const gemKit = await GemKit.initialize('YOUR_API_TOKEN_HERE');

// Get the map container
const container = document.getElementById('map-container');

// Create the map
const wrapper = gemKit.createView(1, (gemMap: GemMap) => {
    console.log('Map ready!');
});

if (wrapper && container) {
    container.appendChild(wrapper);
}

Browser Compatibility

The Maps SDK for TypeScript requires modern browsers with WebAssembly support:

• Chrome 90+
• Firefox 89+
• Safari 15+
• Edge 90+

Documentation & Resources

• Getting Started Guide
• API Documentation
• Examples & Tutorials
• Feature List
• Developer Portal
• Get Your API Token

Example Use Cases

• Interactive Web Maps - Display beautiful, performant maps with custom styling
• Route Planning - Calculate optimal routes with traffic awareness
• Turn-by-Turn Navigation - Guide users with voice-enabled navigation
• Location Search - Find addresses, POIs, and places
• Activity Tracking - Record and analyze navigation sessions
• 3D Visualization - Showcase terrain and elevation data

Getting Help

• Documentation: developer.magiclane.com/docs/typescript
• Issues: Report bugs and request features on our issue tracker
• Community: Join our developer community for support and discussions

Get Started Today - Sign up for a free Magic Lane account and start building powerful mapping experiences.

Home

API Reference

Packages