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 map rendering, location tracking, routing, and navigation features.

Available Packages

• @wemap/core: Core SDK initialization and configuration
• @wemap/geo: Geographic primitives (Coordinates, BoundingBox) shared across the SDK
• @wemap/map: Map rendering for Wemap livemaps (a maplibre-gl wrapper)
• @wemap/positioning: Location tracking and positioning (VPS, GNSS/WiFi)
• @wemap/routing: Route calculation and navigation
• @wemap/camera: Camera access for visual positioning

Key Features

• Modular: Use only the packages you need
• Flexible: Build custom map integrations tailored to your needs
• Map Rendering: Display Wemap livemaps with indoor levels, POIs, markers, and itineraries
• 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 render a Wemap livemap in your own UI (or combine 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

# Map rendering (maplibre-gl is a peer dependency)
npm install @wemap/core @wemap/geo @wemap/map maplibre-gl

# Positioning, routing, camera
npm install @wemap/positioning @wemap/routing @wemap/camera

import { core } from '@wemap/core';
import { Coordinates } from '@wemap/geo';
import { WemapMap } from '@wemap/map';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@wemap/map/style.css';

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

const map = new WemapMap({ container: 'map' });
await map.whenReady();

map.setCenter(new Coordinates(48.8566, 2.3522));

Learn more about the JavaScript SDK →

Choosing the Right Solution

Feature	Embed SDK	JavaScript SDK
Setup Complexity	Simple	Moderate
Map Rendering	Included	Included (@wemap/map)
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