Mappedin Documentation
Web SDK v4: Quickstart
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 # ornpm init vite@latest
Modify the contents of the following files: index.html
, src/main.js
and style.css
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" /> <link rel="stylesheet" href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.css" /> </head> <body> <div id="mappedin-map"></div> <script type="module" src="main.js"></script> </body></html>
import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/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);
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: