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);
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>
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>
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);
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: