MapsIndoors
Ask or search…
K
Comment on page

Web Component

This page will give you an introduction on how to get started using the Map Template as a Web Component. In this guide you will learn how to install and use the Web Component step by step.

Using NPM

Install the package:
npm install @mapsindoors/map-template@stable
In your script:
import MapsIndoorsMap from '@mapsindoors/map-template/dist/mapsindoors-webcomponent.es.js';
window.customElements.define('mapsindoors-map', MapsIndoorsMap);
In your styles, make sure to give it a size. For example:
mapsindoors-map {
display: block;
width: 100vw;
height: 100svh;
}
Use the Web Component in your HTML:
<mapsindoors-map></mapsindoors-map>
Add attributes to the Web Component as needed (see supported properties below).
Note! The external-IDs and app-user-roles expect an array, which in a Web Component is handled differently (see example below).
In your script, define the array of external IDs that you want to be shown on the Map Template. Then get a hold of the mapsIndoorsMapElement using the document.querySelector() method. When you have the mapsIndoorsMapElement, assign its prop externalIDs the array of External IDs that you defined at the beginning.
const externalIDsArray = ["externalID-1", "externalID-2"]
const mapsIndoorsMapElement = document.querySelector('mapsindoors-map')
mapsIndoorsMapElement.externalIDs = externalIDsArray;

Using just the browser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Map</title>
<script type="module">
import MapsindoorsMap from 'https://www.unpkg.com/@mapsindoors/map-template@stable/dist/mapsindoors-webcomponent.es.js';
window.customElements.define('mapsindoors-map', MapsIndoorsMap)
</script>
<style>
body {
margin: 0;
}
mapsindoors-map {
display: block;
width: 100vw;
height: 100svh;
}
</style>
</head>
<body>
<mapsindoors-map></mapsindoors-map>
</body>
</html>
Add attributes to the Web Component as needed (see list).
Use query parameters to configure the Web Component by setting the supports-url-parameters attribute to true in your mapsindoors-map component.
Last modified 15d ago