Appearance

Feature Flags Reference ​

Feature flags control which built-in UI widgets are visible in the map. They are represented by the FeatureFlagSet interface — a flat object of 11 boolean fields.

You can supply flags at initialisation time via the features option, or change them at runtime with setFeatureFlags(). Runtime calls accept a partial object; only the keys you supply are updated.

The 11 flags ​

FlagTypeDefault (FULL)Description
showTextbooleantrueRender the entity's Mapsted name label on the map canvas.
showImagesbooleantrueRender the entity's Mapsted image/logo on the map canvas.
qrCodebooleantrueShow a QR code link inside entity popups for sharing on mobile.
categoriesbooleantrueDisplay the category browser widget (filter map entities by type).
buildingLogobooleantrueShow the building's logo image in the corner of the map.
languageSwitcherbooleantrueShow the language-selector widget.
themeSwitcherbooleantrueShow the light/dark theme toggle widget.
headerBarbooleantrueShow the search bar at the top of the map.
defaultPopupbooleantrueShow the built-in popup when the user clicks an entity. Disable to handle selection via the select event and render a custom popup.
floorsbooleantrueShow the floor switcher panel.
zoombooleantrueShow the zoom-in / zoom-out control widget.

Presets ​

Two named presets are available as constants exported from the API.

FULL (default) ​

All 11 flags are true. Applied automatically when no features option is passed to init().

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

console.log(FEATURE_FLAG_SETS.FULL);
// {
//   showText: true, showImages: true, qrCode: true, categories: true,
//   buildingLogo: true, languageSwitcher: true, themeSwitcher: true,
//   headerBar: true, defaultPopup: true, floors: true, zoom: true
// }

MINIMAL ​

All 11 flags are false. Use this as a starting point when embedding the map as a pure data visualisation layer with no Mapsted UI chrome.

ts
console.log(FEATURE_FLAG_SETS.MINIMAL);
// { showText: false, showImages: false, qrCode: false, categories: false,
//   buildingLogo: false, languageSwitcher: false, themeSwitcher: false,
//   headerBar: false, defaultPopup: false, floors: false, zoom: false }

Usage ​

At initialisation ​

Flags are merged on top of the FULL preset. Only the keys you supply are overridden.

ts
import * as maps from '@mapsted/maps-js-api';

await maps.init({
  propertyId: 603,
  features: {
    // Hide search and QR; everything else stays from FULL
    headerBar: false,
    qrCode: false,
  },
});

To start with MINIMAL and selectively enable:

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

await maps.init({
  propertyId: 603,
  features: {
    ...FEATURE_FLAG_SETS.MINIMAL,
    floors: true,    // only show floor switcher
    zoom: true,      // and zoom controls
  },
});

At runtime ​

Use setFeatureFlags() after the map is ready. Only the supplied keys change — others are unaffected.

ts
// User clicked "kiosk mode" button — hide all UI chrome
await maps.setFeatureFlags({
  headerBar: false,
  categories: false,
  languageSwitcher: false,
  themeSwitcher: false,
  qrCode: false,
});

// User exits kiosk mode — restore search bar
await maps.setFeatureFlags({ headerBar: true });

Custom popup workflow ​

Disable defaultPopup and listen to the select event to render your own popup UI with full control over styling and content.

ts
await maps.init({
  propertyId: 603,
  features: { defaultPopup: false },
  onload: () => {
    maps.on('select', (entityData) => {
      // entityData: { buildingId, floorId, entityId }
      showMyCustomPopup(entityData);
    });
  },
});

TypeScript ​

The FeatureFlagSet interface is exported from the API and accepted as Partial<FeatureFlagSet> by setFeatureFlags().

ts
import type { FeatureFlagSet } from '@mapsted/maps-js-api';

const kioskFlags: Partial<FeatureFlagSet> = {
  headerBar: false,
  categories: false,
  defaultPopup: false,
};

await maps.setFeatureFlags(kioskFlags);