Web SDK v5 Getting Started

On CodeSandbox

The fastest way to get started experimenting with Mappedin Web SDK is to fork the Mappedin template CodeSandbox.

Mappedin Web SDK v5 is available as @mappedin/mappedin-js in NPM.

Local development

To start a new project locally, we introduce a fast way to do that using Vite. More information about setup options is in the Vite Getting Started -guide. The guides are written in JavaScript, however, the SDK includes comprehensive types as it is written in Typescript. Run the following commands in your shell to bootstrap a new project and install Mappedin Web SDK.

yarn create vite mappedin-v5-guide
cd mappedin-v5-guide
yarn add @mappedin/mappedin-js

If your project is using React or Angular get started with these guides

Modify the contents of the following files: index.html, src/main.js to match the following.

index.html
<!DOCTYPE html>
<html>
<head>
<title>Mappedin Web SDK v5 Getting Started</title>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
height: 100%;
width: 100%;
position: relative;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/index.ts"></script>
</body>
</html>
src/index.ts
import { getVenue, showVenue, TGetVenueOptions } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/mappedin.css";
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
const options: TGetVenueOptions = {
venue: "mappedin-demo-mall",
clientId: "5eab30aa91b055001a68e996",
clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1"
};
async function init() {
const venue = await getVenue(options);
const mapView = await showVenue(document.getElementById("app")!, venue);
}
init();

To run the project with hot reloading, run yarn run dev. Now, you should be able to see a prompt in your shell telling you to open your browser at http://localhost:3000 (default port). You should be greeted by a rendering of the Mappedin Demo Mall, like the below CodeSandbox example. The 3D rendered mall map can be zoomed, panned and rotated.

Was this page helpful?