Version: 4.0

Getting Started

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

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

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-v4-guide
cd mappedin-v4-guide
yarn add @mappedin/mappedin-js

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Mappedin v4</title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="src/main.js"></script>
	</body>
</html>

import { getVenue, showVenue } from '@mappedin/mappedin-js';
import '@mappedin/mappedin-js/lib/mappedin.css';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	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.