Web - Getting started

Overview

Wemap provides two main approaches for integrating maps and location features into your web applications:

1. Embed SDK (Livemap) - A fully featured, ready-to-use map embed that allows full interaction
2. JavaScript SDK - A modular SDK providing multiple packages to build your own custom map integration

Embed SDK (Livemap)

The Embed SDK provides a complete, fully featured map solution that you can embed directly into your web pages. It's the quickest way to add an interactive map to your application.

Key Features

• Ready-to-use: Fully featured map with built-in UI and controls
• Interactive: Complete user interaction capabilities (pan, zoom, search, etc.)
• Easy Integration: Simple JavaScript API or iframe embed
• Rich Functionality: Supports pinpoints, lists, events, search, and more
• Customizable: Configurable options and event listeners for integration

When to Use

Choose the Embed SDK if you:

• Want a complete map solution with minimal setup
• Need a fully interactive map with built-in UI
• Want to quickly embed a livemap into your website
• Prefer a solution that handles map rendering and interactions for you

Quick Start

<div id='map-container'></div>
<script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
<script>
  var container = document.getElementById('map-container');
  var livemap = wemap.v1.createLivemap(container, { 
    emmid: 1234, 
    token: 'MY_TOKEN' 
  });
</script>

Learn more about the Embed SDK →

JavaScript SDK

The JavaScript SDK is a modular toolkit that provides multiple packages for building custom map integrations. It gives you fine-grained control over location tracking, routing, and navigation features.

Available Packages

• @wemap/core: Core SDK initialization and configuration
• @wemap/positioning: Location tracking and positioning (VPS, GNSS/WiFi)
• @wemap/routing: Route calculation and navigation
• @wemap/camera: Camera access for visual positioning

Map Package Not Available

The map rendering package (@wemap/map) is coming soon. Today you need to use a third-party mapping library (such as Mapbox GL JS, Leaflet, or Google Maps) for map visualization when building custom integrations.

Key Features

• Modular: Use only the packages you need
• Flexible: Build custom map integrations tailored to your needs
• Location Tracking: Advanced positioning with VPS and GNSS/WiFi support
• Routing: Calculate routes and handle navigation
• Map Matching: Project positions onto predefined routes

When to Use

Choose the JavaScript SDK if you:

• Need fine-grained control over map rendering and behavior
• Want to integrate with your own mapping library
• Require advanced location tracking features (VPS, GNSS)
• Need custom routing and navigation capabilities
• Are building a highly customized map experience

Quick Start

npm install @wemap/core @wemap/positioning @wemap/routing @wemap/camera

import { core } from '@wemap/core';
import { GnssWifiLocationSource } from '@wemap/positioning';

// Initialize the SDK
await core.init({
  emmid: 'your-map-id',
  token: 'your-authentication-token',
});

// Create a location source
const gnssLocationSource = new GnssWifiLocationSource());

gnssLocationSource.onUpdate((pose: Pose) => {
  const userPosition = pose.position;
  const userHeading = pose.attitude.heading;
});

gnssLocationSource.start();

Learn more about the JavaScript SDK →

Choosing the Right Solution

Feature	Embed SDK	JavaScript SDK
Setup Complexity	Simple	Moderate
Map Rendering	Included	Requires third-party library (for now)
Customization	Configurable options	Full control
Location Tracking	Built-in	Advanced VPS/GNSS support
Routing	Built-in	Advanced routing API
Best For	Quick integration	Custom implementations

Next Steps

📄️ Embed SDK

📄️ Javascript SDK