Code examples

Inventory of spaces and assets

In this demo we generate a html table from querying spaces and assets from a floor

Loading space data

This example shows how to retrieve information about all the spaces in a floor.

With publishable token

const url = `https://api.archilogic.com/v2/space/?floorId=${floorId}&pubtoken=${publishableToken}`
const geoJson = await fetch(url).then((res) => res.json())

With secret token

const authorization = `AL-Secret-Token ${secretToken}`
const url = `https://api.archilogic.com/v2/space/?floorId=${floorId}`
const geoJson = await fetch(url, {headers: {authorization}}).then((res) => res.json())

By iterating through the resources we can collect the information for each space.
Of main interest are the properties section of the Space object and the resource relations to count the assets in the space. To group spaces of the same type you can group them by the usage or program.

geoJson.features.forEach(ft => {
  const spaceData = ft.properties
  const { usage, program } = spaceData
  const assetCount = ft.resourceRelations?.assets?.length || 0
})

Loading asset data

The same way we can get the information on all assets in the floor.

With publishable token

const url = `https://api.archilogic.com/v2/asset/?floorId=${floorId}&pubtoken=${publishableToken}`
const geoJson = await fetch(url).then((res) => res.json())

With secret token

const authorization = `AL-Secret-Token ${secretToken}`
const url = `https://api.archilogic.com/v2/asset/?floorId=${floorId}`
const geoJson = await fetch(url, {headers: {authorization}}).then((res) => res.json())

The properties section of the Asset object contains the name, manufacturer, categories and dimensions of the asset. To group asset of the same type group them via the productId.

geoJson.features.forEach(ft => {
  const assetData = ft.properties
  const productId = assetData.productId
})

Demo with code

Open in codesandbox (opens new window) Embedded iframe below:

Draw geo-referenced floor plan on a map

In this demo we use Leaflet.js (opens new window) to draw a floor plan and outlines of spaces in GeoJSON format on the map that were loaded from the REST API.

If a plan is not geo-referenced its origin will be latitude, longitude: 0, 0.

Load the SVG

POST request to load the geo-referenced svg floor plan

const url = `https://api.archilogic.com/v2/floor/${floorId}/2d-image?pubtoken=${publishableToken}`
const { imageUrl, latLngBounds } = await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }
}).then((res) => res.json())

Leaflet.js can directly use those values to draw the floor plan svg on the map

L.imageOverlay(imageUrl, latLngBounds).addTo(map)
// zoom to the floor plan
map.fitBounds(latLngBounds)

Load the geoJSON geometry

GET request to load the contours of the spaces by querying via floorId this gives us the resource data in GeoJSON format

const url = `https://api.archilogic.com/v2/space?floorId=${floorId}&pubtoken=${publishableToken}`
const geoJson = await fetch(url).then((res) => res.json())

Leaflet.js allows you to draw that directly on the map

L.geoJSON(geoJson, options).addTo(map)

Demo with code

Open in codesandbox (opens new window) Screenshot below:

(opens new window)

Access private resources from front end

The following example demonstrates how to access a private floor from the front end using temporary access tokens and the floor plan engine.

Get the temporary access token

Create an API on your back-end to retrieve temporary access tokens

app.post("/api/get-access-token", async (req, res) => {
  // https://developers.archilogic.com/space-api/v2/introduction.html#temporary-access-token
  const apiUrl = "https://api.archilogic.com/v2/temporary-access-token/create";
  const { body } = await got.post(apiUrl, {
    headers: {
      Authorization: `AL-Secret-Token ${process.env.SECRET_TOKEN}`
    },
    json: {
      scopes: [{ resource: "floor", action: "readPrivate" }],
      durationSeconds: 3600
    },
    responseType: "json"
  });
  res.send(body);
});

Use the temporary access token

Make your front end call that API and use the token then via the loadScene method

function getTemporaryAccessToken() {
  return fetch(`/api/get-access-token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      scopes: [{ resource: "floor", action: "readPrivate" }]
    })
  }).then((response) => response.json());
}
// authorization contains the temporary access token
// expiresAt can be used to check on when you need to request an new token
const { authorization, expiresAt } = await getTemporaryAccessToken();
const demoSceneId = "bc78475e-0236-4b8d-9d7e-b4f46cd3f6fa";
const container = document.getElementById("hello-plan");
const floorPlan = new FloorPlanEngine(container);
await floorPlan.loadScene(demoSceneId, { authorization }).catch();

Demo with code

Open in codesandbox (opens new window) Screenshot below:

(opens new window)