> For the complete documentation index, see [llms.txt](https://docs.mapsindoors.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mapsindoors.com/products/fast-track-maptemplate/external-customization-of-the-map-template.md).

# External customization of the Map Template

When using the Map Template as a React Component or as a Web Component, you can customize the application by accessing the MapsIndoors instance. To do this, listen for the `mapsIndoorsInstanceAvailable` event on the `window` object.

You can read about all the methods that can be used on the MapsIndoors Instance [here](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html).

1. **React Component**

To use the MapsIndoors instance within a React Component, you can create a `useEffect` hook that listens for the `mapsIndoorsInstanceAvailable` event on the `window` object.

<pre class="language-jsx"><code class="lang-jsx">import MapsIndoorsMap from '@mapsindoors/map-template/dist/mapsindoors-react.es.js';
import { useEffect } from 'react';

function App() {

    useEffect(() => {
<strong>        window.addEventListener('mapsIndoorsInstanceAvailable', () => {
</strong>             window.mapsIndoorsInstance.setDisplayRule('yourLocationId', { 'polygonFillColor': '#ff69b4' })
        })
    }, [])

    return (
        &#x3C;div>
            &#x3C;MapsIndoorsMap apiKey="yourApiKey" mapboxAccessToken="yourMapboxAccessToken" />
        &#x3C;/div>
    )
}

export default App;
</code></pre>

2. **Web Component**

To use the MapsIndoors instance within a Web Component, include a script tag that listens for the `mapsIndoorsInstanceAvailable` event on the `window` object.

```html
<body>
    <mapsindoors-map api-key="yourApiKey" mapbox-access-token="yourMapboxAccessToken"></mapsindoors-map>
    <script>
        window.addEventListener('mapsIndoorsInstanceAvailable', () => {
             window.mapsIndoorsInstance.setDisplayRule('yourLocationId', { 'polygonFillColor': '#ff69b4' })
        })
    </script>
</body>
```

In conclusion, integrating the Map Template as either a React Component or a Web Component allows for great customization through the MapsIndoors instance.

By listening for the `mapsIndoorsInstanceAvailable` event, you can easily access and manipulate various features of the map, enhancing the functionality and user experience of your application.

Whether you prefer working within a React framework or using the standard web components, the flexibility of the MapsIndoors instance will enable you to achieve your goals effectively.

Explore the available methods and tailor your map to fit your specific needs, ensuring a seamless and dynamic interaction for your users [here](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.mapsindoors.com/products/fast-track-maptemplate/external-customization-of-the-map-template.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.