Appearance

Set Up a Share URL for Mobile Deep-Linking ​

The shareUrl init option lets you pass a base URL to the map iframe so that end users can copy a link to the current map state — launching your Mapsted mobile app (if configured with a matching Universal Link / App Link) or falling back to the web map in the browser.

Open in Sandbox ↗

Prerequisites ​

  • The library initialised (API lifecycle).
  • A Mapsted mobile app configured with a Universal Link (iOS) or App Link (Android) for the domain you pass to shareUrl. Contact Mapsted to provision this for your property.

Passing shareUrl at init ​

shareUrl is a string field on InitOptions. Set it to the origin — or full URL — that Mapsted has registered on the mobile side as a Universal / App Link target.

CDN ​

html
<script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=1234"></script>
<script>
  await mapsted.maps.init({
    element: '#map',
    shareUrl: 'https://maps.example.com/',
  });
</script>

npm ​

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

await maps.init({
  element: '#map',
  propertyId: 1234,
  shareUrl: 'https://maps.example.com/',
});

The API forwards shareUrl into the map iframe as part of map initialization. The iframe uses the value internally to power its built-in share UI.

Programmatic share URL generation ​

Use getShareUrl() to build a share URL from the current map state (property, active floor, selected entity) in your own JavaScript. This is the API for powering a custom share button outside the iframe's built-in share UI.

ts
getShareUrl(): Promise<string | null>

Returns null when no shareUrl base was passed to init(). Otherwise, appends ?property=…&floor=… (and &entity=… when an entity is selected) to the configured base URL.

Note: The building=… parameter is not appended automatically because the building ID is owned by the iframe, not the API state snapshot. Consumers needing building-level share links should append &building=<id> manually.

CDN ​

html
<script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=1234"></script>
<script>
  await mapsted.maps.init({
    element: '#map',
    shareUrl: 'https://maps.example.com/',
  });

  document.getElementById('share-btn').addEventListener('click', async () => {
    const url = await mapsted.maps.getShareUrl();
    if (url) {
      await navigator.clipboard.writeText(url);
      console.log('Share URL copied:', url);
    }
  });
</script>

npm ​

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

await maps.init({
  element: '#map',
  propertyId: 1234,
  shareUrl: 'https://maps.example.com/',
});

const url = await maps.getShareUrl();
// url is null if shareUrl was not configured, otherwise e.g.:
// "https://maps.example.com/?property=1234&floor=3&entity=42"

getShareUrl() throws MAPSTED-1090 if called before the API is READY.