Feature Flags

Feature flags let you enable or disable specific API capabilities at runtime — without redeploying. Use them to tailor the map UI to your audience, run A/B experiments, or progressively roll out new features.

Prerequisites

• A working map embed — complete Embed your first map first.
• setFeatureFlags can be called at any time after the map has been initialized.

Available flags

The FeatureFlagSet carries 11 boolean fields:

Flag	Default	Description
showText	true	Render entity name labels on the map
showImages	true	Render entity images / category markers
qrCode	true	Show the QR-code share button
categories	true	Show the category browser widget
buildingLogo	true	Show the building logo in the corner
languageSwitcher	true	Show the language dropdown
themeSwitcher	true	Show the light/dark theme toggle
headerBar	true	Show the search bar widget
defaultPopup	true	Open the built-in popup on entity tap
floors	true	Show the floor switcher panel
zoom	true	Show the zoom-in / zoom-out buttons

Steps

1. Pass flags during initialization

Supply a features object as part of the init options to set the initial state before the map renders. Only specify the flags you want to override — defaults apply to the rest.

mapsted.maps.init({
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
  features: {
    headerBar: false,   // hide the built-in search bar
    qrCode: false,      // hide the QR-share button
    defaultPopup: true, // keep the built-in popup
  }
});

2. Use the FULL preset

FEATURE_FLAG_SETS.FULL (exported from @mapsted/maps-js-api) is a plain object with every flag set to true. Spread it into setFeatureFlags to enable every UI element at once.

import { FEATURE_FLAG_SETS } from "@mapsted/maps-js-api";

await mapsted.maps.setFeatureFlags({ ...FEATURE_FLAG_SETS.FULL });

Preset is an object, not a string

setFeatureFlags("FULL") throws MAPSTED-1083 — the parameter must be a Partial<FeatureFlagSet> object. Use { ...FEATURE_FLAG_SETS.FULL } (or FEATURE_FLAG_SETS.MINIMAL) instead.

3. Use the MINIMAL preset

FEATURE_FLAG_SETS.MINIMAL sets every flag to false. Apply it to strip all built-in chrome and show only the bare map — useful for kiosk displays where navigation is driven entirely by your own UI.

import { FEATURE_FLAG_SETS } from "@mapsted/maps-js-api";

await mapsted.maps.setFeatureFlags({ ...FEATURE_FLAG_SETS.MINIMAL });

4. Toggle individual flags

Pass a partial object to setFeatureFlags. Only the flags you include are updated; all other flags keep their current values.

// Hide the search bar but keep everything else unchanged
await mapsted.maps.setFeatureFlags({ headerBar: false });

// Re-enable it
await mapsted.maps.setFeatureFlags({ headerBar: true });

Live demo: flag toggles are silent in the embedded sandbox

In the embedded documentation sandbox, the setFeatureFlags calls are issued correctly but flag toggles do not visibly reflect back inside the embed. The code shown is correct — copy it into your own app (non-embedded, same-origin context) to see the full effect.

Open in Sandbox ↗

5. Make dynamic changes at runtime

Feature flags can change in response to user actions — for example, hiding the floor switcher on single-floor buildings or suppressing the built-in popup so you can render your own sidebar.

// Suppress the built-in popup once your custom sidebar is ready
await mapsted.maps.setFeatureFlags({ defaultPopup: false });

// Hide the floor switcher for properties with only one floor
mapsted.maps.init({
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
  onload: async function () {
    const floors = await mapsted.maps.getFloors();
    if (floors.length <= 1) {
      await mapsted.maps.setFeatureFlags({ floors: false });
    }
  }
});

Open in Sandbox ↗

6. Combine with accessibility routing

Feature flags work alongside the routing configuration API. Drive accessibility routing from your own UI using setAccessibilityMode — there is no separate accessibility feature flag.

// Your own toggle button
document.getElementById("my-a11y-btn").addEventListener("change", function (e) {
  mapsted.maps.setAccessibilityMode(e.target.checked);
});

Expected output

Applying { zoom: false, floors: false, showText: false, showImages: false } strips the zoom controls, floor switcher, entity labels, and category markers — leaving a bare map canvas. The first sandbox above re-enables them after 2 seconds so the dramatic before/after is visible without reloading the map.

Compact-mode chrome

The in-page sandbox forces categories, headerBar, qrCode, themeSwitcher, and languageSwitcher to false automatically so the embed stays compact. Toggling these in tutorial snippets has no visible effect inside the embed — but the same code does take effect on your own page where the API runs full-size.

Next steps

• Build a fully custom floor picker to replace the API one: Floor navigation
• Drive routing from your own UI: Indoor routing