This directory contains interactive examples demonstrating the features and capabilities of the Wemap SDK for JavaScript. You can find the examples live here.
These examples showcase various aspects of the Wemap SDK including:
- @wemap/map: Snippet-driven maps, indoor levels, and end-to-end navigation via
ExampleMapStack - Location Sources: GNSS/WiFi and VPS (Visual Positioning System) positioning
- Map Matching: Projecting user positions onto routes for accurate navigation
- Routing: Route calculation, itinerary management, and navigation
Internal smoke-test harnesses (per-feature manual QA) live in apps/debug and are not published to integrators.
- Node.js
- npm or yarn
- A Wemap account with:
- An map ID
- An authentication token
# Install dependencies (this will install the Wemap SDK packages from npm)
npm installThat's it!
Start the development server:
npm run devThis will start a local development server (typically at http://localhost:4200). Open your browser and navigate to the examples index page.
File: gnss-location-source.html
Demonstrates GPS and WiFi-based positioning for outdoor navigation. This example shows:
- GNSS location tracking with WiFi assistance
- Real-time position updates
- PDR (Pedestrian Dead Reckoning) integration
- Optional attitude tracking
Use Case: Outdoor navigation, GPS-based tracking
File: vps-location-source.html
Test Visual Positioning System (VPS) location source with camera-based positioning. Features:
- Camera-based visual positioning
- Indoor navigation capabilities
- VPS combined with PDR and attitude tracking
- Real-time pose updates (position and orientation)
Use Case: Indoor navigation, camera-based positioning
File: map-matching.html
Example demonstrating map matching functionality for aligning GPS coordinates with map paths. Shows:
- Projecting user positions onto predefined routes
- Route alignment and correction
- Navigation along matched routes
Use Case: Improving GPS accuracy by matching positions to known routes
File: routing.html
Example demonstrating routing and navigation features including:
- Route calculation between origin and destination
- Multiple travel modes (walking, driving, transit)
- Itinerary management
- Turn-by-turn directions
- Navigation utilities
- PMR (People with Reduced Mobility) support
Use Case: Route planning, navigation
File: combined.html
Test VPS location source, routing, and navigation with WemapMap, UserLocationLayer, DomMarkerLayer, and ItineraryLayer via the shared ExampleMapStack helper. This comprehensive example includes:
- VPS location tracking
- Route calculation
- Map matching integration
- Real-time navigation
- Interactive map interface
Use Case: Complete indoor navigation solution
File: combined-gnss.html
Test GNSS location source, routing, and navigation features together in a unified interface. Features:
- GNSS/WiFi location tracking
- Route calculation and navigation
- Map matching
- Complete outdoor navigation solution
Use Case: Complete outdoor navigation solution
File: map.html
Demonstrates WemapMap with snippet-driven style, bounds, and indoor floor switching via setLevel / onBuildingChange.
Use Case: Getting started with @wemap/map
Per-feature smoke pages (user-location, dom-marker, itinerary, poi-interaction, content-search) were moved to apps/debug for SDK manual QA. They are not synced to the public examples repository.
Before running the examples, you need to configure your Wemap credentials. Each example file includes initialization code that you should update:
await core.init({
emmid: 'YOUR_MAP_ID', // Your map ID
token: 'YOUR_TOKEN', // Your authentication token
});Replace YOUR_MAP_ID and YOUR_TOKEN with your actual Wemap credentials.
.
├── index.html # Examples index page
├── *.html # Individual example pages
├── src/
│ ├── *.ts # TypeScript source files for each example
│ └── shared/ # ExampleMapStack — shared @wemap/map wiring
├── styles.css # Shared styles
├── package.json # Dependencies and scripts
├── package-lock.json # Dependency lock file
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
These examples utilize the following Wemap SDK packages:
- @wemap/core: Core SDK initialization and configuration
- @wemap/map: Map wrapper, indoor levels, user location, markers, routes, POI interaction
- @wemap/positioning: Location sources and map matching
- @wemap/routing: Route calculation and navigation
- @wemap/camera: Camera access for VPS features
The examples use Vite for fast development with hot module replacement. When you run npm run dev, changes to the source files will automatically reload in the browser.
All examples are written in TypeScript but you can use plain JavaScript if you want.
- Ensure you're using HTTPS or localhost
- Check browser permissions for camera access
- Verify camera is not being used by another application
- Ensure you're using a device with a compass
- Check browser permissions for sensor access
- Check browser location permissions
- Ensure GPS/location services are enabled on your device
- For VPS, ensure good lighting and clear visual features
- Verify your EMMID and token are correct
- Check network connectivity
- Ensure origin and destination coordinates are valid
For detailed API documentation, visit the main Wemap SDK repository:
These examples are part of the Wemap SDK and follow the same license as the main SDK.
For issues, questions, please contact us