On CodeSandbox
The fastest way to get started experimenting with Mappedin Web SDK is to fork the Mappedin template on CodeSandbox.
Mappedin Web SDK v5 is available as @mappedin/mappedin-js in NPM.
Local development
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-v5-guidecd mappedin-v5-guideyarn add @mappedin/mappedin-jsIf your project is using React or Angular get started with these guides.
Modify the contents of the following files: index.html, src/main.ts to match the following.
<!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();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://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.
