Appearance

Embed with npm + Vite ​

Use the Mapsted Maps JavaScript API as an npm package inside a Vite project. This approach gives you TypeScript support, tree-shaking, and hot module replacement during development.

Prerequisites ​

  • Node.js 20 or later
  • npm 9 or later
  • Basic familiarity with a terminal

Steps ​

1. Create a new Vite project ​

bash
npm create vite@latest my-mapsted-app -- --template vanilla
cd my-mapsted-app

2. Install the API ​

bash
npm install @mapsted/maps-js-api

Licensed customers

The @mapsted/maps-js-api package is currently access-restricted on npm during the pre-release access window. If your npm install returns 404 or 401, contact your Mapsted account manager for an npm token, then npm config set //registry.npmjs.org/:_authToken <token> before re-running install. The CDN-global path below is available without a token.

After updating the package

If you upgrade to a new release candidate and the documentation site navigation looks stale, run npm run docs:build to rebuild the docs and redeploy. The nav sidebar is generated at build time from the tutorial directory.

2b. CDN alternative (no npm install required) ​

Skip steps 2 + 4 and replace step 3's body with a single <script> tag instead. This is the fastest path for prototyping or evaluating the API without npm setup, and it works for unlicensed visitors who want to demo against the public properties.

html
<script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=603"></script>
<div id="mapsted-map" style="width:100vw;height:100vh"></div>
<script>
  mapsted.maps.init({
    element: document.getElementById('mapsted-map'),
    onload: () => console.log('Map loaded')
  });
</script>

The CDN exposes the same API as the npm package — call mapsted.maps.init(...) instead of init(...) from the named import.

3. Update index.html ​

Replace the contents of index.html with a minimal shell that includes a map container.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mapsted Map</title>
  <style>
    body { margin: 0; }
    #mapsted-map { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="mapsted-map"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

4. Configure and initialize the map in main.js ​

Replace the generated main.js with the following. propertyId is your property (use 603 for the University of Windsor demo); the map backend defaults to https://maps.mapsted.com (pass mapsDomain only for a white-label or self-hosted backend).

javascript
import { init } from "@mapsted/maps-js-api";

init({
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
});
Open in Sandbox ↗

5. Run the dev server ​

bash
npm run dev

Vite prints a local URL such as http://localhost:5173. Open it in your browser.

6. Build for production ​

When you are ready to deploy, run:

bash
npm run build

Vite outputs optimized assets to the dist/ folder. The API bundle is code-split automatically.

Expected output ​

Opening http://localhost:5173 shows the University of Windsor indoor map filling the entire viewport. Hot module replacement keeps the map live as you edit main.js — you do not need to refresh the page manually after most changes.

TypeScript variant ​

If you scaffolded with --template vanilla-ts, change the import to use the type-safe entry point:

typescript
import { init, type InitOptions } from "@mapsted/maps-js-api";

const options: InitOptions = {
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
};

init(options);
Open in Sandbox ↗

Next steps ​