Getting Started with Web V4

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.

index.html
<!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>
src/main.js
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/guides/api-keys
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.

Was this page helpful?