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?

Getting Started with Web V4

Sign up for developer updates

For more information