Mappedin Documentation

Web SDK v4: Quickstart

In order to go throught the Mappedin Web SDK v4 guides, we need to setup a new JavaScript or a Typescript project. If you have a preferred method or a template project already you can move on to the next guide about loading a map. Below, we introduce a fast way to do that is to use Vite.

Depending on whether you are using yarn or npm, run the following command in your working directory. More information about about setup options with Vite in their Getting Started -guide. The guides are written in JavaScript, however the SDK includes comprehensive types as it is written in Typescript.

yarn create vite mappedin-v4-guide # or
npm init vite@latest

Modify the contents of the following files: index.html, src/main.js and style.css 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" />
    <link
      rel="stylesheet"
      href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.7/esm/renderer/index.css"
    />
  </head>
  <body>
    <div id="mappedin-map"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>

src/main.js

import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.7/esm/renderer/index.js";

async function init() {
  const venue = await getVenue({
    venue: "mappedin-demo-mall",
    clientId: "<MAPPEDIN_CLIENT_ID>",
    clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
  });
  const mapView = await showVenue(
    document.getElementById("mappedin-map"),
    venue
  );
}
document.addEventListener("DOMContentLoaded", init);

src/style.css

body,
html,
#mappedin-map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

Demo keys are available on Trial API Keys page with Terms and Conditions for their use

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:

Mappedin Documentation

Web SDK v4: Quickstart

Web SDK v4: Quickstart

Styling Smart Labels

Loading a map

Search Our Docs