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.
