MapsPeople · andreeaceachir142 · Jul 4, 2024 · Jun 4, 2024 · Jun 4, 2024 · Jun 5, 2024
diff --git a/packages/map-template/.github/README.md b/packages/map-template/.github/README.md
@@ -167,5 +167,4 @@ To make this even easier (mostly for ourselves), there's a `deploy-to-gcloud` sc
 $ npm run deploy-to-gcloud -- BUCKET_NAME
 ```
 
-This script will only work if you've already authenticated using the `gsutil` CLI on your machine, and have the proper access rights to deploy to the specified bucket.
-
+This script will only work if you've already authenticated using the `gsutil` CLI on your machine, and have the proper access rights to deploy to the specified bucket.
diff --git a/packages/map-template/README.md b/packages/map-template/README.md
@@ -191,4 +191,52 @@ Example of URL:
 
 `directionsTo` + `directionsFrom` + `locationId` → the `directionsTo` + `directionsFrom` have priority over the `locationId`
 
-`directionsTo` + `directionsFrom` + `externalIDs` → the `directionsTo` + `directionsFrom` have priority over the `externalIDs`
+`directionsTo` + `directionsFrom` + `externalIDs` → the `directionsTo` + `directionsFrom` have priority over the `externalIDs`
+
+
+## External customization of the Map Template
+
+When using the Map Template as a React Component or as a Web Component, you can control the map and the data on it 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.
+
+```
+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" venue="yourVenue" mapboxAccessToken="yourMapboxAccessToken" />
+        </div>
+    )
+}
+
+export default App;
+```
+
+### 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.
+
+```
+<body>
+    <mapsindoors-map api-key="yourApiKey" venue="yourVenue" mapbox-access-token="yourMapboxAccessToken"></mapsindoors-map>
+    <script>
+        window.addEventListener('mapsIndoorsInstanceAvailable', () => {
+            window.mapsIndoorsInstance.setDisplayRule('yourLocationId', { 'polygonFillColor': '#ff69b4' })
+        })
+    </script>
+</body>
+```
diff --git a/packages/map-template/src/components/Map/Map.jsx b/packages/map-template/src/components/Map/Map.jsx
@@ -228,6 +228,13 @@ function Map({ onLocationClick, onVenueChangedOnMap, useMapProviderModule, onMap
 
         setMapsIndoorsInstance(miInstance);
 
+        // Assign the miInstance to the mapsIndoorsInstance on the window interface.
+        window.mapsIndoorsInstance = miInstance;
+
+        // Create a custom event that is dispatched from the window interface.
+        const event = new CustomEvent('mapsIndoorsInstanceAvailable');
+        window.dispatchEvent(event);
+
         // Initialize a Directions Service
         const directionsService = new window.mapsindoors.services.DirectionsService(externalDirectionsProvider);
         setDirectionsService(directionsService);
@@ -268,6 +275,6 @@ function Map({ onLocationClick, onVenueChangedOnMap, useMapProviderModule, onMap
         {mapType === mapTypes.Google && <GoogleMapsMap onMapView={onMapView} onPositionControl={onPositionControlCreated} />}
         {mapType === mapTypes.Mapbox && <MapboxMap onMapView={onMapView} onPositionControl={onPositionControlCreated} />}
     </>)
-}
+};
 
 export default Map;