PowerMap Web SDK

Install the package via npm or yarn:

npm install @aapicoits/powermap-web-sdk

The PowerMap Web SDK is built with a Layered Facade Architecture, ensuring that high-performance map rendering is wrapped in an easy-to-use, fluent JS API.

graph TD
    App[Web Application] --> PM[PowerMap Instance]
    
    subgraph "Facade Layer (Fluent API)"
        PM
    end

    subgraph "Manager Layer (Lazy Loading)"
        PM --> Registry[Component Registry]
        Registry --> MarkerMgr[MarkerManager]
        Registry --> SearchMgr[SearchManager]
        Registry --> RouteMgr[RoutingManager]
        Registry --> GeomMgr[GeometryManager]
        Registry --> EditorMgr[EditorManager]
        Registry --> LayerMgr[LayerManager]
    end

    subgraph "Service Layer"
        PM --> AuthMgr[AuthManager]
        PM --> Events[EventBus]
        AuthMgr --> Cache[Token Cache]
    end

    subgraph "Visual Engine"
        PM --> ML[PowerMap Visual Engine]
    end

    Cache -.-> Storage[(Local Storage)]
    AuthMgr -.-> API((PowerMap APIs))

Get a map up and running in less than 2 minutes. The PowerMap SDK is designed for chaining and ease of use.

Step A: Prepare your HTML

<div id="map" style="width: 100%; height: 500px; border-radius: 8px; overflow: hidden;"></div>

Step B: Initialize and Style

import { PowerMap } from "@powermap/web-sdk";

// 1. Initialize with dual-auth system
const map = new PowerMap({
  container: "map",
  center: [100.5018, 13.7563], // Bangkok [Longitude, Latitude]
  zoom: 14,
  mapApiKey: "YOUR_MAP_API_KEY", // Public key for tiles and base layers
  auth: {
    clientId: "YOUR_CLIENT_ID",     // Service Credentials for backend APIs
    clientSecret: "YOUR_CLIENT_SECRET"
  },
  previewOnly: true // Optional: Lock all user interactions (Static View)
});

// 2. Chaining for smooth DX
map.onMapLoaded((e) => {
  console.log("PowerMap is ready!", e.map);
  
  // Add a marker as soon as the map loads
  map.addMarker({
    position: [100.5018, 13.7563],
    type: "start",
    popupContent: "<strong>Origin Point</strong>"
  });
})
.setStyle('th') // Options: 'th', 'en', 'dark', 'gray', 'hydro', 'satellite'
.flyTo({ zoom: 16, pitch: 45 });

The PowerMap SDK is built with a fluent interface, allowing you to link multiple configuration steps and event listeners together in a single statement.

Supported Methods

Most methods that perform an action on the map (styling, camera movement, or event registration) return the PowerMap instance to facilitate chaining.

[!NOTE] Methods that return a Promise (like addRoute) or a new Object (like addMarker or getRouteDetails) interrupt the chain.

Chaining Example

map.onMapLoaded(() => console.log("Ready!"))
  .onMarkerClick(data => console.log("Clicked:", data))
  .setStyle('dark')
  .flyTo({ center: [100.5, 13.7], zoom: 12 })
  .setPitch(45);

When creating a new PowerMap(options), the following options are available:

Core Instance Methods

These methods are available on the PowerMap instance to manage the map state and lifecycle.

Our marker system simplifies standard map markers with built-in presets for logistics and easy event handling.

addMarker(options) Options

[!IMPORTANT] High-Accuracy Rendering: Markers with a color property use our new GL Symbol Layer system. These markers are rendered directly on the map canvas, ensuring perfect alignment and zero-lag during zoom or pan. Ordinary preset markers (type) use standard DOM elements for maximum compatibility.

Marker Examples

Standard Presets

map.addMarker({
  position: [100.5, 13.7],
  type: 'start', // 'start', 'destination', 'waypoint'
  popupContent: "Start Point"
});

Premium Colored Markers (No Image Required)

map.addMarker({
  position: [100.52, 13.78],
  color: '#f97316',      // Vibrant Orange
  icon: 'fas fa-store',  // FontAwesome Icon
  draggable: true,      // Enable high-accuracy dragging
  popupContent: {
    title: "Power Shop",
    tag: "Retail",
    body: "Custom colored marker with icon."
  }
});

Draggable Markers & Events

You can enable dragging for any marker. For GL-rendered markers (those with color), dragging is handled with sub-pixel precision.

const marker = map.addMarker({
  position: [100.5, 13.7],
  color: '#3b82f6',
  draggable: true
});

// 1. Listen via Proxy (Recommended)
marker.on('drag', (e) => console.log('Current:', e.lngLat));
marker.on('dragend', (e) => console.log('Final:', e.lngLat));

// 2. Listen via Global Event Bus
map.onMarkerDrag(({ marker, lngLat }) => {
  console.log(`Marker is moving to: ${lngLat.lng}, ${lngLat.lat}`);
});

Structured Popup Content & Actions

Instead of raw HTML, you can pass a structured object to popupContent for a premium, consistent look. You can also define interactive buttons using the action or actions property:

map.addMarker({
  position: [100.5, 13.7],
  popupContent: {
    title: "Siam Paragon",
    tag: "Mall",
    body: "The pride of Bangkok with world-class shopping.",
    footer: "Open: 10:00 - 22:00",
    actions: [
      { label: "View Details", url: "https://example.com/details", target: "_blank" },
      { label: "Navigate Here", url: "https://example.com/nav", color: "#10b981" }
    ]
  }
});

Marker Methods

The PowerMap SDK automatically wraps all map elements in a global .powermap-sdk class and provides branded aliases for all internal UI components.

The Global Wrapper

Any HTML element you provide as a container will automatically have the powermap-sdk class applied at runtime. This provides a clean scope for all PowerMap styles.

<!-- Input -->
<div id="map"></div>

<!-- Output at runtime -->
<div id="map" class="powermap-sdk">...</div>

Premium Class Aliases

To make customization even more intuitive, we've provided branded CSS classes that you can target directly:

Premium Overrides

Target your own CSS using the scoped wrapper or branded aliases:

/* Change the header color of structured popups */
.powermap-sdk .pm-popup-header {
  background: linear-gradient(135deg, #000 0%, #333 100%);
}

/* Customize the glassmorphism background of all popups */
.powermap-sdk .pm-popup-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}

/* Custom Marker Scale */
.powermap-sdk .pm-marker {
  transform: scale(1.1);
}

setNavigationControl(options) Options

Map Control Examples

// Simple: Enable default branded controls (top-right)
map.setNavigationControl(true);

// Advanced: Custom position and visibility
map.setNavigationControl({
  position: 'bottom-right',
  showZoom: true,
  showCompass: false
});

// Disable controls
map.setNavigationControl(false);

The LayerManager provides a robust API to toggle built-in map layers (e.g., Roads, Railways, BTS/MRT, City Plans) on and off. The SDK dynamically fetches these layers from the catalog and applies them to your current map style.

Built-in Layer Groups

Map layers are grouped into 3 main categories:

1. CITY PLAN (city): City plans for various provinces.
2. TRANSPORT (transport): Roads, Current/Future Railways, Current/Future BTS/MRT.
3. INSIGHT DATA (insight): Night lights, Satellite imagery.

Layer APIs

Usage Example

map.onMapLoaded(async () => {
  // 1. View all available layers
  const catalog = map.layers.getCatalog();
  console.log(catalog);

  // 2. Show the Road layer
  await map.layers.show('pm-road-vt');

  // 3. Toggle the current Railway layer
  await map.layers.toggle('pm-current-railway-th-vt');

  // 4. Adjust opacity
  map.layers.setOpacity('pm-road-vt', 0.5);

  // 5. Hide an entire group
  map.layers.hideGroup('city');
});

You can also use convenience methods directly on the PowerMap instance:

await map.showLayer('pm-road-vt');
map.hideLayer('pm-road-vt');
await map.toggleLayer('pm-road-vt');

Satellite Layer

Toggle or display satellite imagery as an overlay over vector basemaps using Layer ID pm-satellite-layer (or alias 'satellite'):

// Toggle satellite overlay
await map.toggleLayer('pm-satellite-layer');

// Or show explicitly using the alias
await map.showLayer('satellite');

When enabled as an overlay layer, satellite imagery tiles are automatically positioned beneath road networks and labels so places and street names remain readable on top.

Take full control of the user's perspective with smooth transitions or direct manipulation.

Movement Functions

State Functions

Camera Examples

// Fly into a specific warehouse view
map.flyTo({
  center: [100.5, 13.8],
  zoom: 17,
  pitch: 60,
  bearing: 45,
  duration: 4000
});

// Fit view to a specific region
map.fitBounds([
  [100.4, 13.7], 
  [100.6, 13.9]
], { padding: 40 });

The SDK uses a semantic event system for a modern developer experience. All events can be chained.

Event List & Arguments

Event Subscription Example

map.onMapLoaded((e) => {
  console.log("Ready!");
})
.onClick((e) => {
  console.log(`Map clicked at: ${e.lngLat}`);
})
.onMarkerClick((data) => {
  alert(`You clicked marker: ${data.options.popupContent}`);
})
.onMarkerDragEnd((data) => {
  console.log(`New Coordinate: ${data.lngLat.lng}, ${data.lngLat.lat}`);
});

Generate high-precision routes with automatic visualization. The SDK automatically fits the map view to the resulting route.

addRoute(options) Options

Route Methods

addRoute(options) Return Object

The addRoute method returns a Promise that resolves to a RouteResult object containing:

steps Object Structure

Each step in the steps array represents a turn or maneuver:

Routing Example

// Simple route from A to B
const route = await map.addRoute({
  start: [100.5018, 13.7563],
  destination: [100.5118, 13.7663],
  language: "en"
});

// Complex optimized route with waypoints
const optimizedRoute = await map.addRoute({
  start: [100.50, 13.75],
  destination: [100.60, 13.85],
  waypoints: [
    [100.55, 13.80],
    [100.52, 13.78]
  ],
  optimize: true, // Will reorder the 2 waypoints for the best efficiency
  language: "th"
});

console.log(`Total Distance: ${optimizedRoute.distance}m`);
console.log(`Total Duration: ${optimizedRoute.duration}s`);

// Custom red route for heavy traffic visualization
const redRoute = await map.addRoute({
  start: [100.5, 13.7],
  destination: [100.6, 13.8],
  routeColor: "#ff0000",
  routeWidth: 10,
  casingColor: "#990000"
});

// Clear all routes from visibility
map.clearRoutes();

Route Summary Helpers

Quickly access formatted summaries (distance in km/m, time in hours/mins) for the total route and individual steps:

// Get enhanced details (Recommended)
const details = map.getRouteDetails();
if (details) {
    console.log(`Total: ${details.distanceStr}, Time: ${details.durationStr}`);
    
    // Each step also contains formatted strings
    details.steps.forEach(step => {
        console.log(`${step.text} (${step.distanceStr})`);
    });
}

// Get just the top-level summary
const summary = map.getRouteSummary(); // { distanceStr, durationStr }

The Web SDK provides built-in search capabilities using the PowerMap Search API.

search(query, options)

Available options:

• lang: 'th' (default) or 'en'.
• location: [latitude, longitude] to prioritize nearby results.

const results = await map.search("Central World", { lang: 'en' });

results.forEach(item => {
  console.log(`${item.name}: ${item.address}`);
  console.log(`Position: ${item.position}`); // [lat, lng]
});

The SDK can detect when a user clicks on a Point of Interest (POI) on the base map (e.g., shopping malls, parks, gas stations).

map.onPoiClick(({ feature, lngLat }) => {
  const name = feature.properties.name_t;
  console.log(`User clicked on: ${name}`);
  
  // Highlighting the POI with a popup
  map.addMarker({
    id: 'poi-temp',
    position: [lngLat.lng, lngLat.lat],
    popupContent: { title: name, tag: 'POI' }
  });
});

SDK provides handy formatters for displaying routing data.

The PowerMap SDK includes a professional-grade geometry engine and a built-in UI for creating, editing, and managing spatial data. This is optimized for both simple outdoor measuring and complex indoor mapping.

16.1 Architecture Principle

[Draw Tool]              ─┐
[map.geometry.create()]  ─┼──► GeometryManager ──► geometryChanged event
[map.geometry.update()]  ─┤                      │
[map.geometry.remove()]  ─┘                      ▼
                                            GeometryStore
                                        (log → placeholder API)

16.2 CRUD Methods

Create

map.geometry.create(kind, options) — Unified Create
Creates a feature programmatically with the exact same result as drawing it via the tool.

// ─── Standard Geometry ───────────────────────────────────────────────────────
map.geometry.create('point',     { lngLat: [100.5, 13.7], properties: { name: 'Pin A' } });
map.geometry.create('line',      { coordinates: [[100.5,13.7],[100.6,13.8]], properties: { lineColor: '#38bdf8' } });
map.geometry.create('polygon',   { coordinates: [[[100.5,13.7],[100.6,13.7],[100.6,13.8],[100.5,13.7]]], properties: { fillColor: '#4f46e5' } });
map.geometry.create('rectangle', { bounds: [[100.5,13.7],[100.6,13.8]] });
map.geometry.create('circle',    { center: [100.5, 13.7], radiusKm: 0.5 });

// ─── Indoor Geometry ─────────────────────────────────────────────────────────
map.geometry.create('floor',     { coordinates: [[[...]]], properties: { ordinal: 1, name: 'Floor 1' } });
map.geometry.create('obstacle',  { coordinates: [[[...]]], properties: { ordinal: 1, height: 2.5 } });
map.geometry.create('walkway',   { coordinates: [[100.5,13.7],[100.51,13.71]], properties: { ordinal: 1 } });
map.geometry.create('beacon',    { lngLat: [100.52, 13.72], properties: { ordinal: 1, name: 'BKK-01' } });
map.geometry.create('poi',       { lngLat: [100.53, 13.73], properties: { ordinal: 1, name: 'Restroom', icon: 'restroom' } });

Parameters:

Supported Kinds:

Read

Single / Filtered Read:

const feature = map.geometry.getById('abc123');       // GeoJSON Feature | null
const beacons = map.geometry.getByKind('beacon');     // Feature[]
const pois = map.geometry.getByKind('poi');           // Feature[]

Query Builder:

Chainable, lazy evaluation — executes the filter only when a terminal method is called:

// Standard mode
map.geometry.query().byType('Polygon').toArray();
map.geometry.query().where('height', 'gt', 0).toArray();

// Indoor mode
map.geometry.query().byKind('beacon').byFloor(1).toArray();
map.geometry.query().byKind('poi').where('name', 'contains', 'Exit').first();

// Mix — count all features on floor 2
map.geometry.query().byFloor(2).count();

Update

// Update properties
map.geometry.update('abc123', { properties: { name: 'New Name', color: '#ff0000' } });

// Update geometry
map.geometry.update('abc123', { geometry: { type: 'Point', coordinates: [100.6, 13.8] } });

// 3D Extrusion
map.geometry.setFeatureHeight('abc123', 10); // Extrude polygon by 10 meters

Delete

map.geometry.remove('abc123');         // Remove single feature
map.geometry.remove(['id1', 'id2']);   // Remove multiple features
map.geometry.clear();                  // Remove all features

Batch (Import / Export)

// Import receives data from API (defaults to 'imdf' format)
map.geometry.import(apiResponseJson, { format: 'imdf' });

// Export to save into the Database
const imdf = map.geometry.export({ format: 'imdf' });

16.3 GeometryStore — Placeholder API Bridge

map.geometry.store is a middleware event listener that intercepts geometry creations, modifications, deletions, or save actions. It converts the payload into a database-friendly format before sending it to developer-defined callbacks.

Use Cases:

1. Auto-save / Real-time Sync: Use .onCreate, .onUpdate, .onDelete to instantly save changes.
2. Manual Save: Use .onSave when users must click the Save icon manually (returns Bulk GeoJSON).
3. History & Audit Log: Every payload includes a timestamp.

// Pattern 1: Individual callbacks for live Auto-save operations
map.geometry.store.onCreate(async (payload) => {
  // await fetch('/api/features', { method: 'POST', body: JSON.stringify(payload) })
});

map.geometry.store.onUpdate(async (payload) => {
  // await fetch(`/api/features/${payload.featureId}`, { method: 'PUT', body: JSON.stringify(payload) })
});

map.geometry.store.onDelete(async (payload) => {
  // await fetch(`/api/features/${payload.featureId}`, { method: 'DELETE' })
});

// Pattern 2: Bulk Save (Triggered via Toolbar Save button)
map.geometry.store.onSave(async (data) => {
  // const success = await fetch('/api/buildings/save-all', { method: 'POST', body: JSON.stringify(data) })
  // if (success) map.geometry.store.setDirty(false); // Clear unsaved changes flag
});

Payload Format:
Each callback receives a clean payload with user_ prefixes stripped.

{
  operation: 'create',
  source:    'programmatic', // or 'draw'
  format:    'indoor',       // or 'standard'
  featureId: 'xyz789',
  kind:      'beacon',       // null for standard
  floor:     1,              // null for standard
  timestamp: '2026-03-27T...',
  geometry:  { type: 'Point', coordinates: [100.5, 13.7] },
  properties: { name: 'BKK-01', color: '#fbbf24', icon: 'broadcast-tower' }
}

Event System (Direct Listeners):
Every operation emits events for real-time tracking:

map.on('geometryChanged', (event) => {
  // event.operation : 'create' | 'update' | 'delete'
  // event.source    : 'draw' | 'programmatic'
  // event.feature   : GeoJSON Feature (null if delete)
  // event.featureId : string
});

map.on('geometryLiveUpdate', (event) => {
  // Fired continuously during drag/edit for UI mapping
  // event.type     : 'update'
  // event.features : GeoJSON Feature[] currently being edited
});

16.4 Database Storage Recommendations (For Backend Teams)

Since the data structure is Dynamic Schema GeoJSON, it is highly recommended to use Document/JSON storage rather than flattening properties into relational columns. This prevents SDK data loss.

1. PostgreSQL (with PostGIS)

Store the core searchable fields and dump the rest into a JSONB column.

CREATE TABLE indoor_features (
  id VARCHAR(64) PRIMARY KEY,
  feature_type VARCHAR(50) NOT NULL, -- For filtering (level, anchor)
  ordinal INT NOT NULL,              -- For filtering by floor
  geometry GEOMETRY(Geometry, 4326), -- PostGIS Spatial Query
  properties JSONB NOT NULL          -- *** Store the entire SDK properties object here!
);

2. MongoDB

MongoDB natively aligns with GeoJSON.

const featureSchema = new Schema({
  _id: { type: String, required: true },
  type: { type: String, default: 'Feature' },
  feature_type: { type: String, index: true },
  geometry: {
    type: { type: String, enum: ['Point', 'LineString', 'Polygon'] },
    coordinates: Schema.Types.Mixed
  },
  // *** Store the properties object freely without defining a strict sub-schema
  properties: { type: Schema.Types.Mixed } 
});
featureSchema.index({ geometry: '2dsphere' });
featureSchema.index({ "properties.ordinal": 1 });

Standard API Pattern (Read):
When the SDK loads, the backend simply returns a FeatureCollection to pass directly into map.geometry.import().

app.get('/api/buildings/:id/features', async (req, res) => {
  const docs = await db.collection('features').find({ building_id: req.params.id }).toArray();
  const featureCollection = {
    type: "FeatureCollection",
    features: docs.map(doc => ({
      id: doc._id || doc.id,
      type: "Feature",
      feature_type: doc.feature_type,
      geometry: doc.geometry,
      properties: doc.properties
    }))
  };
  res.json(featureCollection);
});

The PowerMap SDK provides a robust API for managing indoor environments, 3D visualization, and indoor navigation.

17.1 Quick Start: Loading 3D Indoor Maps

To display a 3D indoor map, you need to import your IMDF/GeoJSON data into the SDK, and then activate the venue. The SDK will automatically manage the floors and render 3D extrusions (e.g., walls and rooms) for features with a height property.

Step 1: Prepare your GeoJSON Data
Your data must be a valid GeoJSON FeatureCollection. To work with the indoor system, ensure you have at least one feature with kind: "venue" and floors with kind: "floor" and an ordinal (level).

{
  "type": "FeatureCollection",
  "features": [
    {
      "id": "venue-01",
      "type": "Feature",
      "geometry": { "type": "Polygon", "coordinates": [[[100.5, 13.7], ...]]] },
      "properties": { "kind": "venue", "name": { "en": "My Mall" } }
    },
    {
      "id": "floor-1",
      "type": "Feature",
      "geometry": { "type": "Polygon", "coordinates": [[[100.5, 13.7], ...]]] },
      "properties": { "kind": "floor", "ordinal": 1, "name": "1st Floor" }
    },
    {
      "id": "room-101",
      "type": "Feature",
      "geometry": { "type": "Polygon", "coordinates": [[[100.5, 13.7], ...]]] },
      "properties": { "kind": "unit", "ordinal": 1, "height": 3.0 } // 3D Extrusion
    }
  ]
}

Step 2: Fetch and Import via API
Use map.geometry.import(geojson) to load the data into the SDK.

async function loadMyIndoorMap() {
  // 1. Fetch GeoJSON from your database/API
  // 1. Fetch GeoJSON from PowerMap Indoor API
  const response = await fetch('https://maps.powermap.live/indoor-api/floors//geojson');
  const geojsonData = await response.json();

  // 2. Import the data into PowerMap
  map.geometry.import(geojsonData);

  // 3. Activate the indoor view by targeting the venue ID or name
  const result = map.loadIndoorMap('venue-01', {
    initialFloor: 1,    // Show 1st Floor by default
    fitBounds: true,    // Auto-zoom to fit the building
    animate: true       // Smooth 3D transition
  });

  console.log("Available Floors:", result.floors); // [1, 2, 3]
}

Step 3: Switch Floors Programmatically
Once active, you can switch floors and the SDK will automatically update visibility.

// Switch to floor 2 with animation
map.setFloor(2, { animate: true });

17.2 Indoor Feature Types & Properties

The SDK categorizes indoor features using user_kind mapped to specific feature types:

Supported Properties:

• category (string): Sub-category (e.g. room, door)
• name, short_name, alt_name ({ en: string, th: string }): i18n names
• ordinal (number): Floor level index (0, 1, 2, -1)
• outdoor (boolean): Whether it's an outdoor area
• restriction / accessibility: Unit access properties
• address_id, building_ids, level_id: Relational IDs
• hours, phone, website: Venue metadata

17.3 Indoor Venue Selection API

High-level API to initialize an indoor venue from loaded features:

// 1. Load data from API
const data = await fetch('/api/venues/siam-paragon/features').then(r => r.json());
map.geometry.import(data);

// 2. Select venue → auto enters indoor mode
const result = map.loadIndoorMap('siam_paragon', {
  initialFloor: 0,    // Start at G floor
  fitBounds: true,    // Zoom to venue automatically
  animate: true       // Smooth transition
});

console.log(result.venue);        // GeoJSON Feature of the venue
console.log(result.floors);       // [0, 1, 2, 3, 4]
console.log(result.currentFloor); // 0

// 3. Switch floors
map.setFloor(2);                           // Convenience alias
map.indoor.setFloor(3, { animate: true }); // Full API

// 4. Summarize Info
map.indoor.getVenueInfo();  // { id, name, category, floors, bounds, buildingCount }
map.indoor.getFloorInfo(2); // { id, name, shortName, ordinal, unitCount, poiCount... }

// 5. Query venues and buildings
map.indoor.getVenues();     // [{ id, name, category, feature }]
map.indoor.getBuildings();  // [{ id, name, category }]

// 6. Exit indoor mode
map.unloadIndoorMap();

17.4 Geometry Query Filters

The GeometryQuery builder includes specific indoor filtering:

// Search by feature_type
map.geometry.query().byFeatureType('unit').toArray();      // All rooms
map.geometry.query().byFeatureType('opening').toArray();   // All doors
map.geometry.query().byFeatureType('amenity').toArray();   // All amenities

// Search by relationships
map.geometry.query().byVenueId('venue_001').toArray();     // Features within venue
map.geometry.query().byBuildingId('bldg_A').toArray();     // Features within building
map.geometry.query().byLevelId('level_2F').toArray();      // Features within level

// Mix with standard filters
map.geometry.query()
  .byFeatureType('unit')
  .byFloor(2)
  .where('category', 'eq', 'restroom')
  .toArray();

17.5 The IndoorAPI

The IndoorAPI automatically utilizes the SDK's AuthManager to handle authentication securely and allows you to fetch hierarchy data and perform searches within venues.

// Fetch all venues available for the user
const venues = await map.indoor.api.getVenues();

// Fetch buildings in a specific venue
const buildings = await map.indoor.api.getBuildings(venueId);

// Fetch floors in a specific building
const floors = await map.indoor.api.getFloors(buildingId);

// Fetch raw GeoJSON for a specific floor to render on the map
const geojson = await map.indoor.api.getFloorGeoJSON(floorId);

17.6 Indoor Search

You can search for Points of Interest (POIs) across your indoor map using the built-in search API. Note: Searching requires a buildingId to ensure performance and accuracy.

// Search within a specific building (buildingId is REQUIRED)
const results = await map.indoor.api.search('coffee', { buildingId: 'bld-1234' });

// Search with a limit
const limitedResults = await map.indoor.api.search('coffee', { 
    buildingId: 'bld-1234',
    limit: 10 
});

17.7 Indoor UI Controls

The SDK provides ready-to-use UI components such as the IndoorFloorControl, which renders a sleek, floating floor selector that automatically updates when you switch buildings.

import { IndoorFloorControl } from '@powermap/web-sdk';

// 1. Initialize the control
const floorControl = new IndoorFloorControl({
    onChange: (floorId, floorInfo) => {
        console.log("Selected floor:", floorInfo.name);
    }
});

// 2. Add to the map (top-right corner)
map.addControl(floorControl, 'top-right');

// 3. Feed it data from the IndoorAPI
const floors = await map.indoor.api.getFloors('bld-1234');
const formattedFloors = floors.map(f => ({
    id: f.id,
    name: f.floorNumber,
    score: parseInt(f.floorNumber) || 0
}));

// Sort top to bottom, then pass to control
formattedFloors.sort((a, b) => b.score - a.score);
floorControl.setFloors(formattedFloors);

// 4. Update the active floor programmatically
floorControl.setActiveFloor('fl-1');

17.8 Indoor Routing (Built-in UI)

The SDK provides a built-in IndoorRouter and a complete IndoorRoutingPanelControl UI for searching POIs and calculating indoor paths across different floors.

The router integrates directly with the Indoor API and automatically manages multi-floor rendering, step-by-step instructions, and origin/destination markers.

import { IndoorRoutingPanelControl } from '@powermap/web-sdk';

// 1. Initialize the Routing Panel Control
const routingPanel = new IndoorRoutingPanelControl({
    buildingId: 'bld-1234',
    router: map.indoor.router, // Provided automatically by the SDK
    onFloorChange: (floorId) => {
        console.log("Routing requested switch to floor:", floorId);
        floorControl.setActiveFloor(floorId);
    }
});

// 2. Add to the map (top-right corner, below the floor selector)
map.addControl(routingPanel, 'top-right');

The IndoorRoutingPanelControl features:

• Built-in POI Search: Users can type in the input fields to search for POIs via the backend.
• Auto-Switching Floors: When a route is calculated, the SDK automatically switches to the origin floor and pans the camera.
• Layer Management: The IndoorRouter handles drawing the route lines and rendering start/end markers on the correct floor.

The SDK provides built-in productivity shortcuts whenever the geometry engine is active:

• Ctrl + C: Copy selected geometry.
• Ctrl + V: Paste geometry at the current cursor position.
• Delete / Backspace: Remove selected features.

Enable the Debug HUD during development to monitor performance and coordinates.

// Enable debug panel
map.debug().enable({ position: 'top-right' });

// Toggle specific metrics
map.debug().showFPS(true);
map.debug().showCoordinate(false);

// Disable
map.debug().disable();

The SDK emits the following events through its central EventBus. You can subscribe to them via map.on(eventName, callback).

Core / Global

Geometry & Draw

Markers

Indoor

Routing & Navigation

Layers

© 2026 PowerMap Development Team. All rights reserved.