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.

  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.

import MapsIndoorsMap from '@mapsindoors/map-template/dist/mapsindoors-react.es.js';
import { useEffect } from 'react';

function App() {

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

    return (
        <div>
            <MapsIndoorsMap apiKey="yourApiKey" mapboxAccessToken="yourMapboxAccessToken" />
        </div>
    )
}

export default App;

  1. 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.

<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.

Last updated