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: 100dvh;
}

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: 100dvh;
        }
    </style>
</head>
<body>
    <mapsindoors-map></mapsindoors-map>
</body>
</html>

Use query parameters to configure the Web Component by setting the supports-url-parameters attribute to true in your mapsindoors-map component.

Last updated 11 months ago

Was this helpful?

<!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: 100dvh; } </style> </head> <body> <mapsindoors-map></mapsindoors-map> </body> </html>