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-guidecd mappedin-v5-guideyarn add @mappedin/mappedin-js
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
<!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>
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-keysconst 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
andclientSecret
togetVenue()
- Provide
access_token
andvenue
togetVenue()
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});