The fastest way to get started experimenting with Mappedin Web SDK is to fork the Mappedin template CodeSandbox.
Mappedin Web SDK v4 is available as @mappedin/mappedin-js in NPM.
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-v4-guidecd mappedin-v4-guideyarn add @mappedin/mappedin-js
Modify the contents of the following files: index.html, src/main.js to match the following.
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Mappedin v4</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <div id="app"></div> <script type="module" src="src/main.js"></script> </body></html>
import { getVenue, showVenue } 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 = { 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://localhost:3000 (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.