Getting Started | Web SDK v5 | Mappedin Developer Portal

This quickstart will get you up and running with the Web SDK in less than 5 minutes. By the end of this guide, you will have a working demo with a map that you can play around with (zoom, pan, rotate etc)

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

Using React? Head over to the React Web SDK Guide
Using Angular? Head over to the Angular Web SDK Guide

Otherwise, continue on this page if you're using general web technologies or looking to learn the basics.

Try in CodeSandbox

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

Local Development

For local development, we can quickly start a project using Vite. Refer to the Vite Getting Started guide for setup details. Guides are written in TypeScript (JavaScript), as the SDK is written in Typescript and uses comprehensive types.

1. Create your project

Run these shell commands to set up a new project and install the Mappedin Web SDK.

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

quickstart-create-repo-gif

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

2. Update index.html, main.ts

Modify & update the contents of the following files - index.html, src/main.ts to match the following.

You will need to create a new file 'main.ts' under the src folder

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/main.ts"></script>
  </body>
</html>

src/main.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();

3. Run the Project

To run the demo (with hotloading), use the following command:

yarn run dev

You should a prompt in your shell informing you that the project is being served on your browser at http://127.0.0.1:5173 (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 via mouse or fingers.

Token-based Authentication

You can view different venues by using a CDN token.

There are 2 ways to view different venues:

Provide clientId and clientSecret to getVenue()
Provide access_token and venue to getVenue()

Below is an example on method #2 - using access_token and venue. To request a venue using a CDN token, an additional fetch must be performed to retrieve the token using Mappedin credentials.

const response = await fetch("https://api-gateway.mappedin.com/auth/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body:
    "grant_type=client_credentials&client_id=" +
    options.clientId +
    "&client_secret=" +
    options.clientSecret
});
const body = await response.json();

const venue = await getVenue({
  accessToken: body["access_token"],
  venue: options.venue
});

Getting Started with Web SDK v5