Options
All
  • Public
  • Public/Protected
  • All
Menu

Mappedin Web SDK - v5.1.1

Mappedin Web SDK

Resources

Usage

In ES6 modular apps, using NPM

npm install @mappedin/mappedin-js

or

yarn add @mappedin/mappedin-js

import { getVenue, showVenue, E_SDK_EVENT } from '@mappedin/mappedin-js';
import '@mappedin/mappedin-js/lib/index.css';

async function init() {
const venueData = await getVenue({
clientId: '<clientId>',
clientSecret: '<clientSecret>',
venue: '<venue>'
});

const mapView = await showVenue(
document.getElementById('mappedin-map'),
venueData
);
mapView.FloatingLabels.labelAllLocations();
mapView.addInteractivePolygonsForAllLocations();
mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
console.log(`Polygon with id ${polygons[0].id} clicked!`);
});
}
document.addEventListener('DOMContentLoaded', init);

In the browser

Usage in the browser requires adding a script and link tags that point at the CDN.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/mappedin.css"
/>
</head>
<body>
<div data-key="" id="mappedin-map"></div>
<style>
body,
html,
#mappedin-map {
width: 100%;
height: 100%;
}
</style>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/mappedin.js"></script>
<script>
async function init() {
const venue = await Mappedin.getVenue({
clientId: '<clientId>',
clientSecret: '<clientSecret>',
venue: '<venue>'
});
const mapView = await Mappedin.showVenue(
document.getElementById('mappedin-map'),
venue
);
mapView.FloatingLabels.labelAllLocations();
}
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>

In the browser (ESM)

The Mappedin SDK supports ESM (EcmaScriptModules), meaning we can import files directly right in the script tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mappedin Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/esm/renderer/index.css"
/>
</head>
<body>
<div id="mappedin-map"></div>
<style>
body,
html,
#mappedin-map {
width: 100%;
height: 100%;
position: relative;
}
</style>
<script type="module">
import {
getVenue,
showVenue
} from 'https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/esm/renderer/index.js';

async function init() {
const venue = await getVenue({
clientId: '<clientId>',
clientSecret: '<clientSecret>',
venue: '<venue>'
});
const mapView = await showVenue(
document.getElementById('mappedin-map'),
venue
);
mapView.FloatingLabels.labelAllLocations();
}
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>

Using get-venue or navigator modules without the renderer

Both get-venue and navigator packages can be used separately, without loading the renderer. This is useful for applications that need access to Mappedin API data and/or Directions engine, but without needing a renderer.

import getVenue from '@mappedin/mappedin-js/lib/esm/get-venue';

async function init() {
const venueData = await getVenue({
clientId: '<clientId>',
clientSecret: '<clientSecret>',
venue: '<venue>'
});
}
document.addEventListener('DOMContentLoaded', init);

Debugging

Three.js

In order to inspect three.js, content it is possible to use the three-devtools web extension. The alpha version of the developer tools can be installed as a web extension on Firefox Add-ons/AMO and directly from the repo for Google Chrome.

In order to install Google Chrome extension manually follow the steps below:

  1. Clone the three-devtools repo
  2. Visit chrome://extensions/ and turn on "Developer mode"
  3. Click "Load unpacked" button and navigate to the folder you downloaded from GitHub