Install #
You can use out SDK by just importing the script directly from unpkg or using npm
# via npm yarn add situm-sdk-js # or npm i situm-sdk-js
Initialize the viewer #
In order to initialize the viewer you must import it and them pass it the apikey and the building id.
<html>
<body>
<div id="viewer" style="width:100%;height:480px"></div>
<script type="module">
import SitumSDK, { ViewerEventType } from "@situm/sdk-js";
const sdk = new SitumSDK({
auth: {
domain: "https://api.situm.com",
apiKey: API_KEY,
},
});
const viewer = sdk.viewer.create({
container: document.getElementById('viewer'),
buildingId: 'BUILDING_ID',
});
viewer.on(ViewerEventType.MAP_IS_READY, () =>
console.log("viewer1: map is ready")
);
</script>
</body>
</html>
<html>
<body>
<div id="viewer" style="width:100%;height:480px"></div>
<script src="https://unpkg.com/axios@1.12.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/@situm/sdk-js@0.10.0/dist/umd/situm-sdk.js"></script>
<script>
const { ViewerEventType } = window.SitumSDK;
const SDKClass = window.SitumSDK.default;
const sdk = new SDKClass({
auth: {
domain: "https://api.situm.com",
apiKey: API_KEY,
},
});
const viewer = sdk.viewer.create({
container: document.getElementById('viewer'),
buildingId: 'BUILDING_ID',
});
viewer.on(ViewerEventType.MAP_IS_READY, () =>
console.log("viewer1: map is ready")
);
</script>
</body>
</html>
Integration with react #
import { useEffect, useRef } from 'react';
import SitumSDK from 'situm-sdk-js';
export default function MapViewer({ buildingId, token }: { buildingId: string; apiKey: string }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) return;
const sdk = new SDKClass({
auth: {
domain: "https://api.situm.com",
apiKey,
},
});
const viewer = sdk.viewer.create({
domElement: ref.current,
buildingId,
});
viewer.on('ready', () => console.log('viewer ready'));
}, [buildingId, apiKey]);
return <div ref={ref} style={{ width: "100%", height: 560 }} />;
}