diff --git a/dist/index.html b/dist/index.html index 9cf09915..b0501dc1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -531,6 +531,78 @@

+
+

+ Distance Matrix - Advanced + (distance-matrix-advanced) +

+
+ Using the DistanceService to calculate distances and durations + between multiple origins and destinations +
+
+ + + + + + + + + + +
+
+
+
+

+ Indoor Directions Service + (indoor-directions-service) +

+
+ Use the IndoorService class to calculate the shortest route between + 2 locations and display the route on an indoor map +
+
+ + + + + + + + + + +
+
+ +
+

+ Indoor Map Renderer (Explore configuration options) + (indoor-map-advanced) +

+
+ An example of Indoor renderer with configuration options to explore. +
+
+ + + + + + + + + + +
+
+ +
+

+ Indoor Map Renderer + (indoor-map-simple) +

+
+ A simple example using the Map-Js library to embed interactive + indoor maps directly into your webpages +
+
+ + + + + + + + + + +
+
+ +
+

+ Indoor Navigation Widget + (indoor-navigation-widget) +

+
+ With the help IndoorDirectionService you can use the navigation + widget for better navigation experience such as turn by turn + navigation. +
+
+ + + + + + + + + + +
+
+ +
+

+ Indoor Widget - Explore more widget configuration options + (indoor-widget-advanced) +

+
+ Indoor Widget provides you a first integration that simplify + integration of Woosmap Indoor Map in your web application. +
+
+ + + + + + + + + + +
+
+ +
+

+ Indoor Widget (indoor-widget-simple) +

+
+ The widget helps you to search for a POI, calculate the shortest + path between 2 locations and discover the map through POI list + grouped by level. +
+
+ + + + + + + + + + +
+
+
+ +/** + * @external https://vitejs.dev/guide/env-and-mode.html + */ +interface ImportMetaEnv { + readonly VITE_WOOSMAP_PUBLIC_API_KEY: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/dist/samples/distance-matrix-advanced/app/index.html b/dist/samples/distance-matrix-advanced/app/index.html new file mode 100644 index 00000000..a0c1fe69 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/index.html @@ -0,0 +1,319 @@ + + + + Distance Matrix - Advanced + + + + + + + +
+ +
+
+
+
+
+
+ + + + diff --git a/dist/samples/distance-matrix-advanced/app/index.ts b/dist/samples/distance-matrix-advanced/app/index.ts new file mode 100644 index 00000000..d39eaf70 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/index.ts @@ -0,0 +1,382 @@ +let map: woosmap.map.Map; +let bounds: woosmap.map.LatLngBounds; +let distanceService: woosmap.map.DistanceService; +let distanceRequest: woosmap.map.distance.DistanceMatrixRequest; +let markersArray: woosmap.map.Marker[] = []; +let originsList: HTMLElement; +let destinationsList: HTMLElement; +const origins: woosmap.map.LatLngLiteral[] = []; +const destinations: woosmap.map.LatLngLiteral[] = []; + +function createMarker( + position: woosmap.map.LatLngLiteral, + label: string, + url: string, +): woosmap.map.Marker { + return new woosmap.map.Marker({ + map, + position, + icon: { + url, + labelOrigin: new woosmap.map.Point(13, 15), + scaledSize: { + height: 38, + width: 26, + }, + }, + label: { + text: label, + color: "white", + }, + }); +} + +function clearMarkers(): void { + for (const marker of markersArray) { + marker.setMap(null); + } + markersArray = []; +} + +function displayMatrixMarkers( + origins: woosmap.map.LatLngLiteral[], + destinations: woosmap.map.LatLngLiteral[], +): void { + clearMarkers(); + origins.forEach((origin, index) => { + bounds.extend(origin); + markersArray.push( + createMarker( + origin, + (index + 1).toString(), + "https://images.woosmap.com/marker-blue.svg", + ), + ); + }); + + destinations.forEach((destination, index) => { + bounds.extend(destination); + markersArray.push( + createMarker( + destination, + (index + 1).toString(), + "https://images.woosmap.com/marker-red.svg", + ), + ); + }); + + map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true); +} + +function createDefaultRequest(): woosmap.map.distance.DistanceMatrixRequest { + const origin1: woosmap.map.LatLngLiteral = { lat: 45.4642, lng: 9.19 }; + const origin2: woosmap.map.LatLngLiteral = { lat: 45.75, lng: 4.85 }; + const destinationA: woosmap.map.LatLngLiteral = { lat: 42.6976, lng: 9.45 }; + const destinationB: woosmap.map.LatLngLiteral = { + lat: 41.9028, + lng: 12.4964, + }; + addLatLngToList(originsList, origin1); + origins.push(origin1); + addLatLngToList(originsList, origin2); + origins.push(origin2); + addLatLngToList(destinationsList, destinationA); + destinations.push(destinationA); + addLatLngToList(destinationsList, destinationB); + destinations.push(destinationB); + return { + origins, + destinations, + travelMode: woosmap.map.TravelMode.DRIVING, + unitSystem: woosmap.map.UnitSystem.METRIC, + avoidHighways: false, + avoidTolls: false, + elements: "duration_distance", + }; +} + +function addLatLngToList( + element: HTMLElement, + location: woosmap.map.LatLngLiteral, +): void { + const locationElement = document.createElement("li"); + locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`; + const removeButton = document.createElement("button"); + removeButton.classList.add("clear-searchButton"); + removeButton.innerHTML = + ' '; + removeButton.addEventListener("click", () => { + element.removeChild(locationElement); + if (element === originsList) { + origins.splice(origins.indexOf(location), 1); + } else { + destinations.splice(destinations.indexOf(location), 1); + } + calculateDistances(); + }); + locationElement.appendChild(removeButton); + element.appendChild(locationElement); +} + +function handleResponse( + response: woosmap.map.distance.DistanceMatrixResponse, +): void { + displayMatrixMarkers( + distanceRequest.origins as woosmap.map.LatLngLiteral[], + distanceRequest.destinations as woosmap.map.LatLngLiteral[], + ); + createTable(response); + displayOrHideError(""); +} + +function createTable(response: woosmap.map.distance.DistanceMatrixResponse) { + let table = + ""; + + response.rows.forEach((row, fromIndex) => { + row.elements.forEach((element, toIndex) => { + if (element.status === "OK") { + const time = element.duration ? element.duration.text : "N/A"; + const distance = element.distance ? element.distance.text : "N/A"; + table += ``; + } + }); + }); + + table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
"; + + const tableContainer = document.querySelector( + ".tableContainer", + ) as HTMLElement; + tableContainer.innerHTML = table; + tableContainer.style.display = "block"; +} + +function displayOrHideError(error: string) { + const errorElement = document.getElementById("errorMessage") as HTMLElement; + if (error === "") { + errorElement.style.display = "none"; + } else { + errorElement.innerHTML = error; + errorElement.style.display = "block"; + const tableContainer = document.querySelector( + ".tableContainer", + ) as HTMLElement; + tableContainer.innerHTML = ""; + tableContainer.style.display = "none"; + } +} + +function calculateDistances(): void { + distanceService + .getDistanceMatrix(distanceRequest) + .then(handleResponse) + .catch((error) => { + console.error("Error calculating distances:", error); + displayOrHideError(error); + }); +} + +function toggleTravelMode(travelMode: HTMLDivElement): void { + document + .querySelectorAll(".travelMode") + .forEach((el) => el.classList.remove("travelMode__selected")); + travelMode.classList.add("travelMode__selected"); +} + +function updateTravelModeButtons(): void { + document.querySelectorAll(".travelMode").forEach((el) => + el.addEventListener("click", () => { + toggleTravelMode(el as HTMLDivElement); + distanceRequest.travelMode = (el as HTMLDivElement).dataset.travelmode as + | woosmap.map.TravelMode + | undefined; + calculateDistances(); + }), + ); +} + +function updateAvoidance(): void { + document.querySelectorAll(".avoid").forEach((el) => + el.addEventListener("click", () => { + const avoidHighways = document.getElementById( + "avoidHighways", + ) as HTMLInputElement; + const avoidTolls = document.getElementById( + "avoidTolls", + ) as HTMLInputElement; + const avoidFerries = document.getElementById( + "avoidFerries", + ) as HTMLInputElement; + distanceRequest.avoidHighways = avoidHighways.checked; + distanceRequest.avoidTolls = avoidTolls.checked; + distanceRequest.avoidFerries = avoidFerries.checked; + calculateDistances(); + }), + ); +} + +function updateDistanceUnit(): void { + document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.unitSystem = (el as HTMLInputElement).value as + | woosmap.map.UnitSystem + | undefined; + calculateDistances(); + }); + }); +} + +function updateMethod(): void { + document.querySelectorAll('input[name="method"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.method = (el as HTMLInputElement).value as + | "distance" + | "time" + | undefined; + calculateDistances(); + }); + }); +} + +function updateElements(): void { + document.querySelectorAll('input[name="elements"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.elements = (el as HTMLInputElement).value as + | "duration_distance" + | "distance" + | "duration" + | undefined; + calculateDistances(); + }); + }); +} + +function updateLanguage(): void { + const languageSelect = document.getElementById( + "language", + ) as HTMLSelectElement; + languageSelect.addEventListener("change", () => { + distanceRequest.language = languageSelect.value as string; + calculateDistances(); + }); +} + +function isValidDate(date: Date): boolean { + return date.getTime && typeof date.getTime === "function"; +} + +function updateDepartureTime(): void { + const departureTimeElement = document.getElementById( + "departure-time", + ) as HTMLInputElement; + const datetimeRadioButton = document.getElementById( + "datetime", + ) as HTMLInputElement; + + if (!departureTimeElement) { + return; + } + departureTimeElement.disabled = true; + document.querySelectorAll('input[name="departureTime"]').forEach((el) => { + el.addEventListener("change", () => { + const selectedOption = (el as HTMLInputElement).value; + switch (selectedOption) { + case "empty": + delete distanceRequest.departureTime; + departureTimeElement.disabled = true; + break; + case "now": + distanceRequest.departureTime = "now"; + departureTimeElement.disabled = true; + break; + case "datetime": + if (departureTimeElement.value) { + const newDate = new Date(departureTimeElement.value); + distanceRequest.departureTime = isValidDate(newDate) + ? newDate + : undefined; + } else { + distanceRequest.departureTime = undefined; + } + departureTimeElement.disabled = false; + break; + } + calculateDistances(); + }); + }); + + departureTimeElement.addEventListener("change", () => { + if (datetimeRadioButton) { + datetimeRadioButton.checked = true; + } + const newDate = new Date(departureTimeElement.value); + distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined; + calculateDistances(); + }); +} + +function registerAddButton( + selector: string, + list: HTMLElement, + locations: woosmap.map.LatLngLiteral[], +): void { + const button = document.querySelector(selector) as HTMLElement; + button.addEventListener("click", () => { + if (button.classList.contains("addLocation__selected")) { + button.classList.remove("addLocation__selected"); + document.getElementById("map")?.classList.remove("cursor-crosshair"); + woosmap.map.event.clearListeners(map, "click"); + return; + } + button.classList.add("addLocation__selected"); + document.getElementById("map")?.classList.add("cursor-crosshair"); + woosmap.map.event.addListenerOnce(map, "click", (e) => { + document.getElementById("map")?.classList.remove("cursor-crosshair"); + button.classList.remove("addLocation__selected"); + const location = e.latlng; + locations.push(location); + addLatLngToList(list, location); + calculateDistances(); + }); + }); +} + +function initUI(): void { + updateTravelModeButtons(); + updateAvoidance(); + updateDistanceUnit(); + updateMethod(); + updateElements(); + updateDepartureTime(); + updateLanguage(); + originsList = document.getElementById("origins") as HTMLElement; + destinationsList = document.getElementById("destinations") as HTMLElement; + registerAddButton( + ".addLocation__destinations", + destinationsList, + destinations, + ); + registerAddButton(".addLocation__origins", originsList, origins); +} + +function initMap(): void { + map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, { + center: { lat: 45.53, lng: 2.4 }, + zoom: 10, + }); + distanceService = new woosmap.map.DistanceService(); + bounds = new woosmap.map.LatLngBounds(); + initUI(); + distanceRequest = createDefaultRequest(); + calculateDistances(); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; + +export {}; diff --git a/dist/samples/distance-matrix-advanced/app/package.json b/dist/samples/distance-matrix-advanced/app/package.json new file mode 100644 index 00000000..920137f6 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/package.json @@ -0,0 +1,33 @@ +{ + "name": "distance-matrix-advanced", + "description": "Samples for Woosmap Map JS API", + "version": "1.20.0", + "keywords": [ + "woosmap", + "javascript", + "map" + ], + "homepage": "https://github.com/woosmap/js-samples#readme", + "bugs": { + "url": "https://github.com/woosmap/js-samples/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/woosmap/js-samples.git" + }, + "files": [], + "private": true, + "scripts": { + "dev": "vite", + "start": "vite", + "build": "vite build --outDir dist --base './'", + "test": "tsc --no-emit", + "preview": "vite preview" + }, + "devDependencies": { + "@types/woosmap.map": "^1.4.8", + "typescript": "^5.3.3", + "vite": "^5.0.12" + }, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/distance-matrix-advanced/app/style.css b/dist/samples/distance-matrix-advanced/app/style.css new file mode 100644 index 00000000..1134ef8d --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/style.css @@ -0,0 +1,337 @@ +@charset "UTF-8"; +html, +body { + height: 100%; + margin: 0; + padding: 0; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; +} + +#container { + height: 100%; + display: flex; +} + +#sidebar { + flex-basis: 12rem; + flex-grow: 1; + max-width: 30rem; + height: 100%; + box-sizing: border-box; + overflow: auto; +} + +#map { + flex-basis: 70vw; + flex-grow: 5; + height: 100%; +} + +#sidebar { + flex-basis: 18rem; + box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12); + z-index: 1; +} + +#mapContainer { + display: flex; + flex-direction: column; + flex-basis: 70vw; + flex-grow: 5; +} + +.tableContainer { + max-height: 35%; + min-height: 150px; + overflow-y: auto; + font-size: 13px; +} +.tableContainer table { + border-collapse: collapse; + width: 100%; +} +.tableContainer tr:nth-child(even) { + background-color: #f5f5f5; +} +.tableContainer tr:nth-child(odd) { + background-color: #ffffff; +} +.tableContainer thead th { + position: sticky; + top: 0; + z-index: 1; +} +.tableContainer th { + background: #eee; + font-weight: bold; +} +.tableContainer td { + white-space: nowrap; +} +.tableContainer th, .tableContainer td { + text-align: center; + padding: 8px 16px; +} +.tableContainer tr td:first-child span, .tableContainer tr td:nth-child(2) span { + background-repeat: no-repeat; + background-position: center; + background-size: contain; + color: white; + text-align: center; + display: inline-block; + width: 20px; + height: 20px; + font-size: 80%; + font-weight: 600; + line-height: 14px; +} +.tableContainer tr td:first-child span { + background-image: url("https://images.woosmap.com/marker-blue.svg"); +} +.tableContainer tr td:first-child { + position: relative; +} +.tableContainer tr td:first-child:after { + position: absolute; + right: 0; + color: #222; + content: "→"; + top: 12px; +} +.tableContainer tr td:nth-child(2) span { + background-image: url("https://images.woosmap.com/marker-red.svg"); +} + +#innerWrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + overflow-y: auto; + padding: 0 10px 10px; +} + +input, +select { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; +} + +.travelModeSelector { + display: flex; + align-content: flex-start; + justify-content: space-between; + max-width: 140px; + text-align: center; + height: 48px; +} +.travelModeSelector .travelMode { + position: relative; + display: inline-block; + text-align: center; + z-index: 0; +} +.travelModeSelector .travelMode button { + display: flex; + cursor: pointer; + background: transparent; + border: 0; + border-radius: 0; + font: inherit; + list-style: none; + margin: 0; + outline: 0; + overflow: visible; + padding: 0; + vertical-align: baseline; + position: relative; +} +.travelModeSelector .travelMode .iconTravelMode { + width: 24px; + height: 24px; + margin: 12px 9px 11px 9px; +} +.travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelModeSelector .travelMode .iconTravelMode__CYCLING { + display: block; +} +.travelModeSelector .travelMode .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode .iconTravelMode__CYCLING__selected { + display: none; +} +.travelMode__selected .travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__CYCLING { + display: none; +} +.travelModeSelector .travelMode__selected button { + cursor: default; +} +.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING { + display: none; +} +.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING__selected { + display: block; +} +.travelModeSelector .travelMode__selected::after { + background-color: #3d5afe; +} +.travelModeSelector .travelMode::after, +.travelModeSelector .travelMode button::after { + content: ""; + border-radius: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + margin: 6px 3px 5px 3px; + height: 36px; + width: 36px; +} +.travelModeSelector .travelMode:hover button:after { + background-color: rgba(60, 64, 67, 0.04); +} + +.directionsOptions { + padding: 0; + margin: 0; + list-style: none; + height: 100%; + background: #fff; + display: flex; + font-size: 13px; +} +.directionsOptions__list { + width: 50%; + height: 100%; +} +.directionsOptions__header { + font-weight: 600; + line-height: 24px; + display: flex; +} +.directionsOptions__input { + height: 24px; + display: flex; + align-items: baseline; +} +.directionsOptions__content { + padding: 10px 0; +} +.directionsOptions__content:first-child { + padding-top: 0; +} + +.addLocation { + font-size: 0.75em; + display: flex; + color: #222; + cursor: pointer; +} +.addLocation:hover { + text-decoration: underline; +} +.addLocation div { + margin-left: 5px; +} +.addLocation__selected { + color: #3d5afe; +} +.addLocation__selected svg path { + fill: #3d5afe; +} + +.sectionHeader { + background: #f1f1f1; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #eeeeee; + margin: 20px -10px 5px; + padding: 5px 10px; + color: #222; +} +.sectionHeader span { + font-size: 0.85em; + font-weight: 600; +} +.sectionHeader:first-child { + margin-top: 0; +} + +.customCounter { + margin: 0; + padding: 0; + list-style-type: none; + width: 100%; +} + +.customCounter li { + counter-increment: step-counter; + line-height: 14px; + height: 22px; + display: flex; + align-items: center; +} +.customCounter li span { + flex-grow: 1; +} + +.customCounter li::before { + content: counter(step-counter); + margin-right: 5px; + font-size: 80%; + color: #fff; + background-position: bottom; + font-weight: 600; + width: 20px; + height: 20px; + text-align: center; + background-size: contain; + background-repeat: no-repeat; +} + +.customCounter__destinations li::before { + background-image: url(https://images.woosmap.com/marker-red.svg); +} + +.customCounter__origins li::before { + background-image: url(https://images.woosmap.com/marker-blue.svg); +} + +.clear-searchButton { + display: block; + height: 18px; + width: 22px; + background: none; + border: none; + vertical-align: middle; + pointer-events: all; + cursor: pointer; +} +.clear-searchButton .clear-icon { + color: inherit; + flex-shrink: 0; + height: 16px; + width: 16px; +} + +#map.cursor-crosshair .mapboxgl-canvas-container { + cursor: crosshair !important; +} + +#errorMessage { + color: #ff1744; + font-size: 12px; + max-width: 200px; + display: none; + position: absolute; + top: 0; + background-color: #fff; + border-radius: 3px; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); + margin: 10px; + padding: 5px; + overflow: hidden; + z-index: 1; +} + diff --git a/dist/samples/distance-matrix-advanced/app/tsconfig.json b/dist/samples/distance-matrix-advanced/app/tsconfig.json new file mode 100644 index 00000000..b405998d --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} \ No newline at end of file diff --git a/dist/samples/distance-matrix-advanced/app/vite.config.js b/dist/samples/distance-matrix-advanced/app/vite.config.js new file mode 100644 index 00000000..803ecc26 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/app/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + hmr: process.env.CODESANDBOX_SSE ? 443 : undefined, + }, +}); diff --git a/dist/samples/distance-matrix-advanced/docs/index.html b/dist/samples/distance-matrix-advanced/docs/index.html new file mode 100644 index 00000000..5c3faece --- /dev/null +++ b/dist/samples/distance-matrix-advanced/docs/index.html @@ -0,0 +1,324 @@ + + + + + Distance Matrix - Advanced + + + + + + + + +
+ +
+
+
+
+
+
+ + + + + + + diff --git a/dist/samples/distance-matrix-advanced/docs/index.js b/dist/samples/distance-matrix-advanced/docs/index.js new file mode 100644 index 00000000..292e1050 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/docs/index.js @@ -0,0 +1,361 @@ +// [START woosmap_distance_matrix_advanced] +let map; +let bounds; +let distanceService; +let distanceRequest; +let markersArray = []; +let originsList; +let destinationsList; +const origins = []; +const destinations = []; + +function createMarker(position, label, url) { + return new woosmap.map.Marker({ + map, + position, + icon: { + url, + labelOrigin: new woosmap.map.Point(13, 15), + scaledSize: { + height: 38, + width: 26, + }, + }, + label: { + text: label, + color: "white", + }, + }); +} + +function clearMarkers() { + for (const marker of markersArray) { + marker.setMap(null); + } + + markersArray = []; +} + +function displayMatrixMarkers(origins, destinations) { + clearMarkers(); + origins.forEach((origin, index) => { + bounds.extend(origin); + markersArray.push( + createMarker( + origin, + (index + 1).toString(), + "https://images.woosmap.com/marker-blue.svg", + ), + ); + }); + destinations.forEach((destination, index) => { + bounds.extend(destination); + markersArray.push( + createMarker( + destination, + (index + 1).toString(), + "https://images.woosmap.com/marker-red.svg", + ), + ); + }); + map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true); +} + +function createDefaultRequest() { + const origin1 = { lat: 45.4642, lng: 9.19 }; + const origin2 = { lat: 45.75, lng: 4.85 }; + const destinationA = { lat: 42.6976, lng: 9.45 }; + const destinationB = { + lat: 41.9028, + lng: 12.4964, + }; + + addLatLngToList(originsList, origin1); + origins.push(origin1); + addLatLngToList(originsList, origin2); + origins.push(origin2); + addLatLngToList(destinationsList, destinationA); + destinations.push(destinationA); + addLatLngToList(destinationsList, destinationB); + destinations.push(destinationB); + return { + origins, + destinations, + travelMode: woosmap.map.TravelMode.DRIVING, + unitSystem: woosmap.map.UnitSystem.METRIC, + avoidHighways: false, + avoidTolls: false, + elements: "duration_distance", + }; +} + +function addLatLngToList(element, location) { + const locationElement = document.createElement("li"); + + locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`; + + const removeButton = document.createElement("button"); + + removeButton.classList.add("clear-searchButton"); + removeButton.innerHTML = + ' '; + removeButton.addEventListener("click", () => { + element.removeChild(locationElement); + if (element === originsList) { + origins.splice(origins.indexOf(location), 1); + } else { + destinations.splice(destinations.indexOf(location), 1); + } + + calculateDistances(); + }); + locationElement.appendChild(removeButton); + element.appendChild(locationElement); +} + +function handleResponse(response) { + displayMatrixMarkers(distanceRequest.origins, distanceRequest.destinations); + createTable(response); + displayOrHideError(""); +} + +function createTable(response) { + let table = + ""; + + response.rows.forEach((row, fromIndex) => { + row.elements.forEach((element, toIndex) => { + if (element.status === "OK") { + const time = element.duration ? element.duration.text : "N/A"; + const distance = element.distance ? element.distance.text : "N/A"; + + table += ``; + } + }); + }); + table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
"; + + const tableContainer = document.querySelector(".tableContainer"); + + tableContainer.innerHTML = table; + tableContainer.style.display = "block"; +} + +function displayOrHideError(error) { + const errorElement = document.getElementById("errorMessage"); + + if (error === "") { + errorElement.style.display = "none"; + } else { + errorElement.innerHTML = error; + errorElement.style.display = "block"; + + const tableContainer = document.querySelector(".tableContainer"); + + tableContainer.innerHTML = ""; + tableContainer.style.display = "none"; + } +} + +function calculateDistances() { + distanceService + .getDistanceMatrix(distanceRequest) + .then(handleResponse) + .catch((error) => { + console.error("Error calculating distances:", error); + displayOrHideError(error); + }); +} + +function toggleTravelMode(travelMode) { + document + .querySelectorAll(".travelMode") + .forEach((el) => el.classList.remove("travelMode__selected")); + travelMode.classList.add("travelMode__selected"); +} + +function updateTravelModeButtons() { + document.querySelectorAll(".travelMode").forEach((el) => + el.addEventListener("click", () => { + toggleTravelMode(el); + distanceRequest.travelMode = el.dataset.travelmode; + calculateDistances(); + }), + ); +} + +function updateAvoidance() { + document.querySelectorAll(".avoid").forEach((el) => + el.addEventListener("click", () => { + const avoidHighways = document.getElementById("avoidHighways"); + const avoidTolls = document.getElementById("avoidTolls"); + const avoidFerries = document.getElementById("avoidFerries"); + + distanceRequest.avoidHighways = avoidHighways.checked; + distanceRequest.avoidTolls = avoidTolls.checked; + distanceRequest.avoidFerries = avoidFerries.checked; + calculateDistances(); + }), + ); +} + +function updateDistanceUnit() { + document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.unitSystem = el.value; + calculateDistances(); + }); + }); +} + +function updateMethod() { + document.querySelectorAll('input[name="method"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.method = el.value; + calculateDistances(); + }); + }); +} + +function updateElements() { + document.querySelectorAll('input[name="elements"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.elements = el.value; + calculateDistances(); + }); + }); +} + +function updateLanguage() { + const languageSelect = document.getElementById("language"); + + languageSelect.addEventListener("change", () => { + distanceRequest.language = languageSelect.value; + calculateDistances(); + }); +} + +function isValidDate(date) { + return date.getTime && typeof date.getTime === "function"; +} + +function updateDepartureTime() { + const departureTimeElement = document.getElementById("departure-time"); + const datetimeRadioButton = document.getElementById("datetime"); + + if (!departureTimeElement) { + return; + } + + departureTimeElement.disabled = true; + document.querySelectorAll('input[name="departureTime"]').forEach((el) => { + el.addEventListener("change", () => { + const selectedOption = el.value; + + switch (selectedOption) { + case "empty": + delete distanceRequest.departureTime; + departureTimeElement.disabled = true; + break; + case "now": + distanceRequest.departureTime = "now"; + departureTimeElement.disabled = true; + break; + case "datetime": + if (departureTimeElement.value) { + const newDate = new Date(departureTimeElement.value); + + distanceRequest.departureTime = isValidDate(newDate) + ? newDate + : undefined; + } else { + distanceRequest.departureTime = undefined; + } + + departureTimeElement.disabled = false; + break; + } + + calculateDistances(); + }); + }); + departureTimeElement.addEventListener("change", () => { + if (datetimeRadioButton) { + datetimeRadioButton.checked = true; + } + + const newDate = new Date(departureTimeElement.value); + + distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined; + calculateDistances(); + }); +} + +function registerAddButton(selector, list, locations) { + const button = document.querySelector(selector); + + button.addEventListener("click", () => { + let _a, _b; + + if (button.classList.contains("addLocation__selected")) { + button.classList.remove("addLocation__selected"); + (_a = document.getElementById("map")) === null || _a === void 0 + ? void 0 + : _a.classList.remove("cursor-crosshair"); + woosmap.map.event.clearListeners(map, "click"); + return; + } + + button.classList.add("addLocation__selected"); + (_b = document.getElementById("map")) === null || _b === void 0 + ? void 0 + : _b.classList.add("cursor-crosshair"); + woosmap.map.event.addListenerOnce(map, "click", (e) => { + let _a; + + (_a = document.getElementById("map")) === null || _a === void 0 + ? void 0 + : _a.classList.remove("cursor-crosshair"); + button.classList.remove("addLocation__selected"); + + const location = e.latlng; + + locations.push(location); + addLatLngToList(list, location); + calculateDistances(); + }); + }); +} + +function initUI() { + updateTravelModeButtons(); + updateAvoidance(); + updateDistanceUnit(); + updateMethod(); + updateElements(); + updateDepartureTime(); + updateLanguage(); + originsList = document.getElementById("origins"); + destinationsList = document.getElementById("destinations"); + registerAddButton( + ".addLocation__destinations", + destinationsList, + destinations, + ); + registerAddButton(".addLocation__origins", originsList, origins); +} + +function initMap() { + map = new woosmap.map.Map(document.getElementById("map"), { + center: { lat: 45.53, lng: 2.4 }, + zoom: 10, + }); + distanceService = new woosmap.map.DistanceService(); + bounds = new woosmap.map.LatLngBounds(); + initUI(); + distanceRequest = createDefaultRequest(); + calculateDistances(); +} + +window.initMap = initMap; +// [END woosmap_distance_matrix_advanced] diff --git a/dist/samples/distance-matrix-advanced/docs/index.ts b/dist/samples/distance-matrix-advanced/docs/index.ts new file mode 100644 index 00000000..3d3d5890 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/docs/index.ts @@ -0,0 +1,384 @@ +// [START woosmap_distance_matrix_advanced] +let map: woosmap.map.Map; +let bounds: woosmap.map.LatLngBounds; +let distanceService: woosmap.map.DistanceService; +let distanceRequest: woosmap.map.distance.DistanceMatrixRequest; +let markersArray: woosmap.map.Marker[] = []; +let originsList: HTMLElement; +let destinationsList: HTMLElement; +const origins: woosmap.map.LatLngLiteral[] = []; +const destinations: woosmap.map.LatLngLiteral[] = []; + +function createMarker( + position: woosmap.map.LatLngLiteral, + label: string, + url: string, +): woosmap.map.Marker { + return new woosmap.map.Marker({ + map, + position, + icon: { + url, + labelOrigin: new woosmap.map.Point(13, 15), + scaledSize: { + height: 38, + width: 26, + }, + }, + label: { + text: label, + color: "white", + }, + }); +} + +function clearMarkers(): void { + for (const marker of markersArray) { + marker.setMap(null); + } + markersArray = []; +} + +function displayMatrixMarkers( + origins: woosmap.map.LatLngLiteral[], + destinations: woosmap.map.LatLngLiteral[], +): void { + clearMarkers(); + origins.forEach((origin, index) => { + bounds.extend(origin); + markersArray.push( + createMarker( + origin, + (index + 1).toString(), + "https://images.woosmap.com/marker-blue.svg", + ), + ); + }); + + destinations.forEach((destination, index) => { + bounds.extend(destination); + markersArray.push( + createMarker( + destination, + (index + 1).toString(), + "https://images.woosmap.com/marker-red.svg", + ), + ); + }); + + map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true); +} + +function createDefaultRequest(): woosmap.map.distance.DistanceMatrixRequest { + const origin1: woosmap.map.LatLngLiteral = { lat: 45.4642, lng: 9.19 }; + const origin2: woosmap.map.LatLngLiteral = { lat: 45.75, lng: 4.85 }; + const destinationA: woosmap.map.LatLngLiteral = { lat: 42.6976, lng: 9.45 }; + const destinationB: woosmap.map.LatLngLiteral = { + lat: 41.9028, + lng: 12.4964, + }; + addLatLngToList(originsList, origin1); + origins.push(origin1); + addLatLngToList(originsList, origin2); + origins.push(origin2); + addLatLngToList(destinationsList, destinationA); + destinations.push(destinationA); + addLatLngToList(destinationsList, destinationB); + destinations.push(destinationB); + return { + origins, + destinations, + travelMode: woosmap.map.TravelMode.DRIVING, + unitSystem: woosmap.map.UnitSystem.METRIC, + avoidHighways: false, + avoidTolls: false, + elements: "duration_distance", + }; +} + +function addLatLngToList( + element: HTMLElement, + location: woosmap.map.LatLngLiteral, +): void { + const locationElement = document.createElement("li"); + locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`; + const removeButton = document.createElement("button"); + removeButton.classList.add("clear-searchButton"); + removeButton.innerHTML = + ' '; + removeButton.addEventListener("click", () => { + element.removeChild(locationElement); + if (element === originsList) { + origins.splice(origins.indexOf(location), 1); + } else { + destinations.splice(destinations.indexOf(location), 1); + } + calculateDistances(); + }); + locationElement.appendChild(removeButton); + element.appendChild(locationElement); +} + +function handleResponse( + response: woosmap.map.distance.DistanceMatrixResponse, +): void { + displayMatrixMarkers( + distanceRequest.origins as woosmap.map.LatLngLiteral[], + distanceRequest.destinations as woosmap.map.LatLngLiteral[], + ); + createTable(response); + displayOrHideError(""); +} + +function createTable(response: woosmap.map.distance.DistanceMatrixResponse) { + let table = + ""; + + response.rows.forEach((row, fromIndex) => { + row.elements.forEach((element, toIndex) => { + if (element.status === "OK") { + const time = element.duration ? element.duration.text : "N/A"; + const distance = element.distance ? element.distance.text : "N/A"; + table += ``; + } + }); + }); + + table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
"; + + const tableContainer = document.querySelector( + ".tableContainer", + ) as HTMLElement; + tableContainer.innerHTML = table; + tableContainer.style.display = "block"; +} + +function displayOrHideError(error: string) { + const errorElement = document.getElementById("errorMessage") as HTMLElement; + if (error === "") { + errorElement.style.display = "none"; + } else { + errorElement.innerHTML = error; + errorElement.style.display = "block"; + const tableContainer = document.querySelector( + ".tableContainer", + ) as HTMLElement; + tableContainer.innerHTML = ""; + tableContainer.style.display = "none"; + } +} + +function calculateDistances(): void { + distanceService + .getDistanceMatrix(distanceRequest) + .then(handleResponse) + .catch((error) => { + console.error("Error calculating distances:", error); + displayOrHideError(error); + }); +} + +function toggleTravelMode(travelMode: HTMLDivElement): void { + document + .querySelectorAll(".travelMode") + .forEach((el) => el.classList.remove("travelMode__selected")); + travelMode.classList.add("travelMode__selected"); +} + +function updateTravelModeButtons(): void { + document.querySelectorAll(".travelMode").forEach((el) => + el.addEventListener("click", () => { + toggleTravelMode(el as HTMLDivElement); + distanceRequest.travelMode = (el as HTMLDivElement).dataset.travelmode as + | woosmap.map.TravelMode + | undefined; + calculateDistances(); + }), + ); +} + +function updateAvoidance(): void { + document.querySelectorAll(".avoid").forEach((el) => + el.addEventListener("click", () => { + const avoidHighways = document.getElementById( + "avoidHighways", + ) as HTMLInputElement; + const avoidTolls = document.getElementById( + "avoidTolls", + ) as HTMLInputElement; + const avoidFerries = document.getElementById( + "avoidFerries", + ) as HTMLInputElement; + distanceRequest.avoidHighways = avoidHighways.checked; + distanceRequest.avoidTolls = avoidTolls.checked; + distanceRequest.avoidFerries = avoidFerries.checked; + calculateDistances(); + }), + ); +} + +function updateDistanceUnit(): void { + document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.unitSystem = (el as HTMLInputElement).value as + | woosmap.map.UnitSystem + | undefined; + calculateDistances(); + }); + }); +} + +function updateMethod(): void { + document.querySelectorAll('input[name="method"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.method = (el as HTMLInputElement).value as + | "distance" + | "time" + | undefined; + calculateDistances(); + }); + }); +} + +function updateElements(): void { + document.querySelectorAll('input[name="elements"]').forEach((el) => { + el.addEventListener("change", () => { + distanceRequest.elements = (el as HTMLInputElement).value as + | "duration_distance" + | "distance" + | "duration" + | undefined; + calculateDistances(); + }); + }); +} + +function updateLanguage(): void { + const languageSelect = document.getElementById( + "language", + ) as HTMLSelectElement; + languageSelect.addEventListener("change", () => { + distanceRequest.language = languageSelect.value as string; + calculateDistances(); + }); +} + +function isValidDate(date: Date): boolean { + return date.getTime && typeof date.getTime === "function"; +} + +function updateDepartureTime(): void { + const departureTimeElement = document.getElementById( + "departure-time", + ) as HTMLInputElement; + const datetimeRadioButton = document.getElementById( + "datetime", + ) as HTMLInputElement; + + if (!departureTimeElement) { + return; + } + departureTimeElement.disabled = true; + document.querySelectorAll('input[name="departureTime"]').forEach((el) => { + el.addEventListener("change", () => { + const selectedOption = (el as HTMLInputElement).value; + switch (selectedOption) { + case "empty": + delete distanceRequest.departureTime; + departureTimeElement.disabled = true; + break; + case "now": + distanceRequest.departureTime = "now"; + departureTimeElement.disabled = true; + break; + case "datetime": + if (departureTimeElement.value) { + const newDate = new Date(departureTimeElement.value); + distanceRequest.departureTime = isValidDate(newDate) + ? newDate + : undefined; + } else { + distanceRequest.departureTime = undefined; + } + departureTimeElement.disabled = false; + break; + } + calculateDistances(); + }); + }); + + departureTimeElement.addEventListener("change", () => { + if (datetimeRadioButton) { + datetimeRadioButton.checked = true; + } + const newDate = new Date(departureTimeElement.value); + distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined; + calculateDistances(); + }); +} + +function registerAddButton( + selector: string, + list: HTMLElement, + locations: woosmap.map.LatLngLiteral[], +): void { + const button = document.querySelector(selector) as HTMLElement; + button.addEventListener("click", () => { + if (button.classList.contains("addLocation__selected")) { + button.classList.remove("addLocation__selected"); + document.getElementById("map")?.classList.remove("cursor-crosshair"); + woosmap.map.event.clearListeners(map, "click"); + return; + } + button.classList.add("addLocation__selected"); + document.getElementById("map")?.classList.add("cursor-crosshair"); + woosmap.map.event.addListenerOnce(map, "click", (e) => { + document.getElementById("map")?.classList.remove("cursor-crosshair"); + button.classList.remove("addLocation__selected"); + const location = e.latlng; + locations.push(location); + addLatLngToList(list, location); + calculateDistances(); + }); + }); +} + +function initUI(): void { + updateTravelModeButtons(); + updateAvoidance(); + updateDistanceUnit(); + updateMethod(); + updateElements(); + updateDepartureTime(); + updateLanguage(); + originsList = document.getElementById("origins") as HTMLElement; + destinationsList = document.getElementById("destinations") as HTMLElement; + registerAddButton( + ".addLocation__destinations", + destinationsList, + destinations, + ); + registerAddButton(".addLocation__origins", originsList, origins); +} + +function initMap(): void { + map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, { + center: { lat: 45.53, lng: 2.4 }, + zoom: 10, + }); + distanceService = new woosmap.map.DistanceService(); + bounds = new woosmap.map.LatLngBounds(); + initUI(); + distanceRequest = createDefaultRequest(); + calculateDistances(); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END woosmap_distance_matrix_advanced] + +export {}; diff --git a/dist/samples/distance-matrix-advanced/docs/style.css b/dist/samples/distance-matrix-advanced/docs/style.css new file mode 100644 index 00000000..7e51b0b2 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/docs/style.css @@ -0,0 +1,339 @@ +@charset "UTF-8"; +/* [START woosmap_distance_matrix_advanced] */ +html, +body { + height: 100%; + margin: 0; + padding: 0; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; +} + +#container { + height: 100%; + display: flex; +} + +#sidebar { + flex-basis: 12rem; + flex-grow: 1; + max-width: 30rem; + height: 100%; + box-sizing: border-box; + overflow: auto; +} + +#map { + flex-basis: 70vw; + flex-grow: 5; + height: 100%; +} + +#sidebar { + flex-basis: 18rem; + box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12); + z-index: 1; +} + +#mapContainer { + display: flex; + flex-direction: column; + flex-basis: 70vw; + flex-grow: 5; +} + +.tableContainer { + max-height: 35%; + min-height: 150px; + overflow-y: auto; + font-size: 13px; +} +.tableContainer table { + border-collapse: collapse; + width: 100%; +} +.tableContainer tr:nth-child(even) { + background-color: #f5f5f5; +} +.tableContainer tr:nth-child(odd) { + background-color: #ffffff; +} +.tableContainer thead th { + position: sticky; + top: 0; + z-index: 1; +} +.tableContainer th { + background: #eee; + font-weight: bold; +} +.tableContainer td { + white-space: nowrap; +} +.tableContainer th, .tableContainer td { + text-align: center; + padding: 8px 16px; +} +.tableContainer tr td:first-child span, .tableContainer tr td:nth-child(2) span { + background-repeat: no-repeat; + background-position: center; + background-size: contain; + color: white; + text-align: center; + display: inline-block; + width: 20px; + height: 20px; + font-size: 80%; + font-weight: 600; + line-height: 14px; +} +.tableContainer tr td:first-child span { + background-image: url("https://images.woosmap.com/marker-blue.svg"); +} +.tableContainer tr td:first-child { + position: relative; +} +.tableContainer tr td:first-child:after { + position: absolute; + right: 0; + color: #222; + content: "→"; + top: 12px; +} +.tableContainer tr td:nth-child(2) span { + background-image: url("https://images.woosmap.com/marker-red.svg"); +} + +#innerWrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + overflow-y: auto; + padding: 0 10px 10px; +} + +input, +select { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; +} + +.travelModeSelector { + display: flex; + align-content: flex-start; + justify-content: space-between; + max-width: 140px; + text-align: center; + height: 48px; +} +.travelModeSelector .travelMode { + position: relative; + display: inline-block; + text-align: center; + z-index: 0; +} +.travelModeSelector .travelMode button { + display: flex; + cursor: pointer; + background: transparent; + border: 0; + border-radius: 0; + font: inherit; + list-style: none; + margin: 0; + outline: 0; + overflow: visible; + padding: 0; + vertical-align: baseline; + position: relative; +} +.travelModeSelector .travelMode .iconTravelMode { + width: 24px; + height: 24px; + margin: 12px 9px 11px 9px; +} +.travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelModeSelector .travelMode .iconTravelMode__CYCLING { + display: block; +} +.travelModeSelector .travelMode .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode .iconTravelMode__CYCLING__selected { + display: none; +} +.travelMode__selected .travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__CYCLING { + display: none; +} +.travelModeSelector .travelMode__selected button { + cursor: default; +} +.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING { + display: none; +} +.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING__selected { + display: block; +} +.travelModeSelector .travelMode__selected::after { + background-color: #3d5afe; +} +.travelModeSelector .travelMode::after, +.travelModeSelector .travelMode button::after { + content: ""; + border-radius: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + margin: 6px 3px 5px 3px; + height: 36px; + width: 36px; +} +.travelModeSelector .travelMode:hover button:after { + background-color: rgba(60, 64, 67, 0.04); +} + +.directionsOptions { + padding: 0; + margin: 0; + list-style: none; + height: 100%; + background: #fff; + display: flex; + font-size: 13px; +} +.directionsOptions__list { + width: 50%; + height: 100%; +} +.directionsOptions__header { + font-weight: 600; + line-height: 24px; + display: flex; +} +.directionsOptions__input { + height: 24px; + display: flex; + align-items: baseline; +} +.directionsOptions__content { + padding: 10px 0; +} +.directionsOptions__content:first-child { + padding-top: 0; +} + +.addLocation { + font-size: 0.75em; + display: flex; + color: #222; + cursor: pointer; +} +.addLocation:hover { + text-decoration: underline; +} +.addLocation div { + margin-left: 5px; +} +.addLocation__selected { + color: #3d5afe; +} +.addLocation__selected svg path { + fill: #3d5afe; +} + +.sectionHeader { + background: #f1f1f1; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #eeeeee; + margin: 20px -10px 5px; + padding: 5px 10px; + color: #222; +} +.sectionHeader span { + font-size: 0.85em; + font-weight: 600; +} +.sectionHeader:first-child { + margin-top: 0; +} + +.customCounter { + margin: 0; + padding: 0; + list-style-type: none; + width: 100%; +} + +.customCounter li { + counter-increment: step-counter; + line-height: 14px; + height: 22px; + display: flex; + align-items: center; +} +.customCounter li span { + flex-grow: 1; +} + +.customCounter li::before { + content: counter(step-counter); + margin-right: 5px; + font-size: 80%; + color: #fff; + background-position: bottom; + font-weight: 600; + width: 20px; + height: 20px; + text-align: center; + background-size: contain; + background-repeat: no-repeat; +} + +.customCounter__destinations li::before { + background-image: url(https://images.woosmap.com/marker-red.svg); +} + +.customCounter__origins li::before { + background-image: url(https://images.woosmap.com/marker-blue.svg); +} + +.clear-searchButton { + display: block; + height: 18px; + width: 22px; + background: none; + border: none; + vertical-align: middle; + pointer-events: all; + cursor: pointer; +} +.clear-searchButton .clear-icon { + color: inherit; + flex-shrink: 0; + height: 16px; + width: 16px; +} + +#map.cursor-crosshair .mapboxgl-canvas-container { + cursor: crosshair !important; +} + +#errorMessage { + color: #ff1744; + font-size: 12px; + max-width: 200px; + display: none; + position: absolute; + top: 0; + background-color: #fff; + border-radius: 3px; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); + margin: 10px; + padding: 5px; + overflow: hidden; + z-index: 1; +} + +/* [END woosmap_distance_matrix_advanced] */ \ No newline at end of file diff --git a/dist/samples/distance-matrix-advanced/highlight/highlight.html b/dist/samples/distance-matrix-advanced/highlight/highlight.html new file mode 100644 index 00000000..ae9b0846 --- /dev/null +++ b/dist/samples/distance-matrix-advanced/highlight/highlight.html @@ -0,0 +1,1197 @@ + + + + Highlight + + + + + + + + +
+
+
+
+
+
+ + + + + + +
+ +
+
+
+
+
+ 

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/distance-matrix-advanced/highlight/index.html b/dist/samples/distance-matrix-advanced/highlight/index.html
new file mode 100644
index 00000000..fab05009
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/highlight/index.html
@@ -0,0 +1,319 @@
+
+
+  
+    Distance Matrix - Advanced
+    
+    
+
+    
+    
+  
+  
+    

+      
+      

+        

+        

+        

+      

+    

+
+    
+  
+
diff --git a/dist/samples/distance-matrix-advanced/highlight/index.js b/dist/samples/distance-matrix-advanced/highlight/index.js
new file mode 100644
index 00000000..1a46f5c5
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/highlight/index.js
@@ -0,0 +1,359 @@
+let map;
+let bounds;
+let distanceService;
+let distanceRequest;
+let markersArray = [];
+let originsList;
+let destinationsList;
+const origins = [];
+const destinations = [];
+
+function createMarker(position, label, url) {
+  return new woosmap.map.Marker({
+    map,
+    position,
+    icon: {
+      url,
+      labelOrigin: new woosmap.map.Point(13, 15),
+      scaledSize: {
+        height: 38,
+        width: 26,
+      },
+    },
+    label: {
+      text: label,
+      color: "white",
+    },
+  });
+}
+
+function clearMarkers() {
+  for (const marker of markersArray) {
+    marker.setMap(null);
+  }
+
+  markersArray = [];
+}
+
+function displayMatrixMarkers(origins, destinations) {
+  clearMarkers();
+  origins.forEach((origin, index) => {
+    bounds.extend(origin);
+    markersArray.push(
+      createMarker(
+        origin,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-blue.svg",
+      ),
+    );
+  });
+  destinations.forEach((destination, index) => {
+    bounds.extend(destination);
+    markersArray.push(
+      createMarker(
+        destination,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-red.svg",
+      ),
+    );
+  });
+  map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true);
+}
+
+function createDefaultRequest() {
+  const origin1 = { lat: 45.4642, lng: 9.19 };
+  const origin2 = { lat: 45.75, lng: 4.85 };
+  const destinationA = { lat: 42.6976, lng: 9.45 };
+  const destinationB = {
+    lat: 41.9028,
+    lng: 12.4964,
+  };
+
+  addLatLngToList(originsList, origin1);
+  origins.push(origin1);
+  addLatLngToList(originsList, origin2);
+  origins.push(origin2);
+  addLatLngToList(destinationsList, destinationA);
+  destinations.push(destinationA);
+  addLatLngToList(destinationsList, destinationB);
+  destinations.push(destinationB);
+  return {
+    origins,
+    destinations,
+    travelMode: woosmap.map.TravelMode.DRIVING,
+    unitSystem: woosmap.map.UnitSystem.METRIC,
+    avoidHighways: false,
+    avoidTolls: false,
+    elements: "duration_distance",
+  };
+}
+
+function addLatLngToList(element, location) {
+  const locationElement = document.createElement("li");
+
+  locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`;
+
+  const removeButton = document.createElement("button");
+
+  removeButton.classList.add("clear-searchButton");
+  removeButton.innerHTML =
+    ' ';
+  removeButton.addEventListener("click", () => {
+    element.removeChild(locationElement);
+    if (element === originsList) {
+      origins.splice(origins.indexOf(location), 1);
+    } else {
+      destinations.splice(destinations.indexOf(location), 1);
+    }
+
+    calculateDistances();
+  });
+  locationElement.appendChild(removeButton);
+  element.appendChild(locationElement);
+}
+
+function handleResponse(response) {
+  displayMatrixMarkers(distanceRequest.origins, distanceRequest.destinations);
+  createTable(response);
+  displayOrHideError("");
+}
+
+function createTable(response) {
+  let table =
+    "";
+
+  response.rows.forEach((row, fromIndex) => {
+    row.elements.forEach((element, toIndex) => {
+      if (element.status === "OK") {
+        const time = element.duration ? element.duration.text : "N/A";
+        const distance = element.distance ? element.distance.text : "N/A";
+
+        table += ``;
+      }
+    });
+  });
+  table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
";
+
+  const tableContainer = document.querySelector(".tableContainer");
+
+  tableContainer.innerHTML = table;
+  tableContainer.style.display = "block";
+}
+
+function displayOrHideError(error) {
+  const errorElement = document.getElementById("errorMessage");
+
+  if (error === "") {
+    errorElement.style.display = "none";
+  } else {
+    errorElement.innerHTML = error;
+    errorElement.style.display = "block";
+
+    const tableContainer = document.querySelector(".tableContainer");
+
+    tableContainer.innerHTML = "";
+    tableContainer.style.display = "none";
+  }
+}
+
+function calculateDistances() {
+  distanceService
+    .getDistanceMatrix(distanceRequest)
+    .then(handleResponse)
+    .catch((error) => {
+      console.error("Error calculating distances:", error);
+      displayOrHideError(error);
+    });
+}
+
+function toggleTravelMode(travelMode) {
+  document
+    .querySelectorAll(".travelMode")
+    .forEach((el) => el.classList.remove("travelMode__selected"));
+  travelMode.classList.add("travelMode__selected");
+}
+
+function updateTravelModeButtons() {
+  document.querySelectorAll(".travelMode").forEach((el) =>
+    el.addEventListener("click", () => {
+      toggleTravelMode(el);
+      distanceRequest.travelMode = el.dataset.travelmode;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateAvoidance() {
+  document.querySelectorAll(".avoid").forEach((el) =>
+    el.addEventListener("click", () => {
+      const avoidHighways = document.getElementById("avoidHighways");
+      const avoidTolls = document.getElementById("avoidTolls");
+      const avoidFerries = document.getElementById("avoidFerries");
+
+      distanceRequest.avoidHighways = avoidHighways.checked;
+      distanceRequest.avoidTolls = avoidTolls.checked;
+      distanceRequest.avoidFerries = avoidFerries.checked;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateDistanceUnit() {
+  document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.unitSystem = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateMethod() {
+  document.querySelectorAll('input[name="method"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.method = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateElements() {
+  document.querySelectorAll('input[name="elements"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.elements = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateLanguage() {
+  const languageSelect = document.getElementById("language");
+
+  languageSelect.addEventListener("change", () => {
+    distanceRequest.language = languageSelect.value;
+    calculateDistances();
+  });
+}
+
+function isValidDate(date) {
+  return date.getTime && typeof date.getTime === "function";
+}
+
+function updateDepartureTime() {
+  const departureTimeElement = document.getElementById("departure-time");
+  const datetimeRadioButton = document.getElementById("datetime");
+
+  if (!departureTimeElement) {
+    return;
+  }
+
+  departureTimeElement.disabled = true;
+  document.querySelectorAll('input[name="departureTime"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      const selectedOption = el.value;
+
+      switch (selectedOption) {
+        case "empty":
+          delete distanceRequest.departureTime;
+          departureTimeElement.disabled = true;
+          break;
+        case "now":
+          distanceRequest.departureTime = "now";
+          departureTimeElement.disabled = true;
+          break;
+        case "datetime":
+          if (departureTimeElement.value) {
+            const newDate = new Date(departureTimeElement.value);
+
+            distanceRequest.departureTime = isValidDate(newDate)
+              ? newDate
+              : undefined;
+          } else {
+            distanceRequest.departureTime = undefined;
+          }
+
+          departureTimeElement.disabled = false;
+          break;
+      }
+
+      calculateDistances();
+    });
+  });
+  departureTimeElement.addEventListener("change", () => {
+    if (datetimeRadioButton) {
+      datetimeRadioButton.checked = true;
+    }
+
+    const newDate = new Date(departureTimeElement.value);
+
+    distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined;
+    calculateDistances();
+  });
+}
+
+function registerAddButton(selector, list, locations) {
+  const button = document.querySelector(selector);
+
+  button.addEventListener("click", () => {
+    let _a, _b;
+
+    if (button.classList.contains("addLocation__selected")) {
+      button.classList.remove("addLocation__selected");
+      (_a = document.getElementById("map")) === null || _a === void 0
+        ? void 0
+        : _a.classList.remove("cursor-crosshair");
+      woosmap.map.event.clearListeners(map, "click");
+      return;
+    }
+
+    button.classList.add("addLocation__selected");
+    (_b = document.getElementById("map")) === null || _b === void 0
+      ? void 0
+      : _b.classList.add("cursor-crosshair");
+    woosmap.map.event.addListenerOnce(map, "click", (e) => {
+      let _a;
+
+      (_a = document.getElementById("map")) === null || _a === void 0
+        ? void 0
+        : _a.classList.remove("cursor-crosshair");
+      button.classList.remove("addLocation__selected");
+
+      const location = e.latlng;
+
+      locations.push(location);
+      addLatLngToList(list, location);
+      calculateDistances();
+    });
+  });
+}
+
+function initUI() {
+  updateTravelModeButtons();
+  updateAvoidance();
+  updateDistanceUnit();
+  updateMethod();
+  updateElements();
+  updateDepartureTime();
+  updateLanguage();
+  originsList = document.getElementById("origins");
+  destinationsList = document.getElementById("destinations");
+  registerAddButton(
+    ".addLocation__destinations",
+    destinationsList,
+    destinations,
+  );
+  registerAddButton(".addLocation__origins", originsList, origins);
+}
+
+function initMap() {
+  map = new woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 45.53, lng: 2.4 },
+    zoom: 10,
+  });
+  distanceService = new woosmap.map.DistanceService();
+  bounds = new woosmap.map.LatLngBounds();
+  initUI();
+  distanceRequest = createDefaultRequest();
+  calculateDistances();
+}
+
+window.initMap = initMap;
diff --git a/dist/samples/distance-matrix-advanced/highlight/index.ts b/dist/samples/distance-matrix-advanced/highlight/index.ts
new file mode 100644
index 00000000..d39eaf70
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/highlight/index.ts
@@ -0,0 +1,382 @@
+let map: woosmap.map.Map;
+let bounds: woosmap.map.LatLngBounds;
+let distanceService: woosmap.map.DistanceService;
+let distanceRequest: woosmap.map.distance.DistanceMatrixRequest;
+let markersArray: woosmap.map.Marker[] = [];
+let originsList: HTMLElement;
+let destinationsList: HTMLElement;
+const origins: woosmap.map.LatLngLiteral[] = [];
+const destinations: woosmap.map.LatLngLiteral[] = [];
+
+function createMarker(
+  position: woosmap.map.LatLngLiteral,
+  label: string,
+  url: string,
+): woosmap.map.Marker {
+  return new woosmap.map.Marker({
+    map,
+    position,
+    icon: {
+      url,
+      labelOrigin: new woosmap.map.Point(13, 15),
+      scaledSize: {
+        height: 38,
+        width: 26,
+      },
+    },
+    label: {
+      text: label,
+      color: "white",
+    },
+  });
+}
+
+function clearMarkers(): void {
+  for (const marker of markersArray) {
+    marker.setMap(null);
+  }
+  markersArray = [];
+}
+
+function displayMatrixMarkers(
+  origins: woosmap.map.LatLngLiteral[],
+  destinations: woosmap.map.LatLngLiteral[],
+): void {
+  clearMarkers();
+  origins.forEach((origin, index) => {
+    bounds.extend(origin);
+    markersArray.push(
+      createMarker(
+        origin,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-blue.svg",
+      ),
+    );
+  });
+
+  destinations.forEach((destination, index) => {
+    bounds.extend(destination);
+    markersArray.push(
+      createMarker(
+        destination,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-red.svg",
+      ),
+    );
+  });
+
+  map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true);
+}
+
+function createDefaultRequest(): woosmap.map.distance.DistanceMatrixRequest {
+  const origin1: woosmap.map.LatLngLiteral = { lat: 45.4642, lng: 9.19 };
+  const origin2: woosmap.map.LatLngLiteral = { lat: 45.75, lng: 4.85 };
+  const destinationA: woosmap.map.LatLngLiteral = { lat: 42.6976, lng: 9.45 };
+  const destinationB: woosmap.map.LatLngLiteral = {
+    lat: 41.9028,
+    lng: 12.4964,
+  };
+  addLatLngToList(originsList, origin1);
+  origins.push(origin1);
+  addLatLngToList(originsList, origin2);
+  origins.push(origin2);
+  addLatLngToList(destinationsList, destinationA);
+  destinations.push(destinationA);
+  addLatLngToList(destinationsList, destinationB);
+  destinations.push(destinationB);
+  return {
+    origins,
+    destinations,
+    travelMode: woosmap.map.TravelMode.DRIVING,
+    unitSystem: woosmap.map.UnitSystem.METRIC,
+    avoidHighways: false,
+    avoidTolls: false,
+    elements: "duration_distance",
+  };
+}
+
+function addLatLngToList(
+  element: HTMLElement,
+  location: woosmap.map.LatLngLiteral,
+): void {
+  const locationElement = document.createElement("li");
+  locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`;
+  const removeButton = document.createElement("button");
+  removeButton.classList.add("clear-searchButton");
+  removeButton.innerHTML =
+    ' ';
+  removeButton.addEventListener("click", () => {
+    element.removeChild(locationElement);
+    if (element === originsList) {
+      origins.splice(origins.indexOf(location), 1);
+    } else {
+      destinations.splice(destinations.indexOf(location), 1);
+    }
+    calculateDistances();
+  });
+  locationElement.appendChild(removeButton);
+  element.appendChild(locationElement);
+}
+
+function handleResponse(
+  response: woosmap.map.distance.DistanceMatrixResponse,
+): void {
+  displayMatrixMarkers(
+    distanceRequest.origins as woosmap.map.LatLngLiteral[],
+    distanceRequest.destinations as woosmap.map.LatLngLiteral[],
+  );
+  createTable(response);
+  displayOrHideError("");
+}
+
+function createTable(response: woosmap.map.distance.DistanceMatrixResponse) {
+  let table =
+    "";
+
+  response.rows.forEach((row, fromIndex) => {
+    row.elements.forEach((element, toIndex) => {
+      if (element.status === "OK") {
+        const time = element.duration ? element.duration.text : "N/A";
+        const distance = element.distance ? element.distance.text : "N/A";
+        table += ``;
+      }
+    });
+  });
+
+  table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
";
+
+  const tableContainer = document.querySelector(
+    ".tableContainer",
+  ) as HTMLElement;
+  tableContainer.innerHTML = table;
+  tableContainer.style.display = "block";
+}
+
+function displayOrHideError(error: string) {
+  const errorElement = document.getElementById("errorMessage") as HTMLElement;
+  if (error === "") {
+    errorElement.style.display = "none";
+  } else {
+    errorElement.innerHTML = error;
+    errorElement.style.display = "block";
+    const tableContainer = document.querySelector(
+      ".tableContainer",
+    ) as HTMLElement;
+    tableContainer.innerHTML = "";
+    tableContainer.style.display = "none";
+  }
+}
+
+function calculateDistances(): void {
+  distanceService
+    .getDistanceMatrix(distanceRequest)
+    .then(handleResponse)
+    .catch((error) => {
+      console.error("Error calculating distances:", error);
+      displayOrHideError(error);
+    });
+}
+
+function toggleTravelMode(travelMode: HTMLDivElement): void {
+  document
+    .querySelectorAll(".travelMode")
+    .forEach((el) => el.classList.remove("travelMode__selected"));
+  travelMode.classList.add("travelMode__selected");
+}
+
+function updateTravelModeButtons(): void {
+  document.querySelectorAll(".travelMode").forEach((el) =>
+    el.addEventListener("click", () => {
+      toggleTravelMode(el as HTMLDivElement);
+      distanceRequest.travelMode = (el as HTMLDivElement).dataset.travelmode as
+        | woosmap.map.TravelMode
+        | undefined;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateAvoidance(): void {
+  document.querySelectorAll(".avoid").forEach((el) =>
+    el.addEventListener("click", () => {
+      const avoidHighways = document.getElementById(
+        "avoidHighways",
+      ) as HTMLInputElement;
+      const avoidTolls = document.getElementById(
+        "avoidTolls",
+      ) as HTMLInputElement;
+      const avoidFerries = document.getElementById(
+        "avoidFerries",
+      ) as HTMLInputElement;
+      distanceRequest.avoidHighways = avoidHighways.checked;
+      distanceRequest.avoidTolls = avoidTolls.checked;
+      distanceRequest.avoidFerries = avoidFerries.checked;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateDistanceUnit(): void {
+  document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.unitSystem = (el as HTMLInputElement).value as
+        | woosmap.map.UnitSystem
+        | undefined;
+      calculateDistances();
+    });
+  });
+}
+
+function updateMethod(): void {
+  document.querySelectorAll('input[name="method"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.method = (el as HTMLInputElement).value as
+        | "distance"
+        | "time"
+        | undefined;
+      calculateDistances();
+    });
+  });
+}
+
+function updateElements(): void {
+  document.querySelectorAll('input[name="elements"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.elements = (el as HTMLInputElement).value as
+        | "duration_distance"
+        | "distance"
+        | "duration"
+        | undefined;
+      calculateDistances();
+    });
+  });
+}
+
+function updateLanguage(): void {
+  const languageSelect = document.getElementById(
+    "language",
+  ) as HTMLSelectElement;
+  languageSelect.addEventListener("change", () => {
+    distanceRequest.language = languageSelect.value as string;
+    calculateDistances();
+  });
+}
+
+function isValidDate(date: Date): boolean {
+  return date.getTime && typeof date.getTime === "function";
+}
+
+function updateDepartureTime(): void {
+  const departureTimeElement = document.getElementById(
+    "departure-time",
+  ) as HTMLInputElement;
+  const datetimeRadioButton = document.getElementById(
+    "datetime",
+  ) as HTMLInputElement;
+
+  if (!departureTimeElement) {
+    return;
+  }
+  departureTimeElement.disabled = true;
+  document.querySelectorAll('input[name="departureTime"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      const selectedOption = (el as HTMLInputElement).value;
+      switch (selectedOption) {
+        case "empty":
+          delete distanceRequest.departureTime;
+          departureTimeElement.disabled = true;
+          break;
+        case "now":
+          distanceRequest.departureTime = "now";
+          departureTimeElement.disabled = true;
+          break;
+        case "datetime":
+          if (departureTimeElement.value) {
+            const newDate = new Date(departureTimeElement.value);
+            distanceRequest.departureTime = isValidDate(newDate)
+              ? newDate
+              : undefined;
+          } else {
+            distanceRequest.departureTime = undefined;
+          }
+          departureTimeElement.disabled = false;
+          break;
+      }
+      calculateDistances();
+    });
+  });
+
+  departureTimeElement.addEventListener("change", () => {
+    if (datetimeRadioButton) {
+      datetimeRadioButton.checked = true;
+    }
+    const newDate = new Date(departureTimeElement.value);
+    distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined;
+    calculateDistances();
+  });
+}
+
+function registerAddButton(
+  selector: string,
+  list: HTMLElement,
+  locations: woosmap.map.LatLngLiteral[],
+): void {
+  const button = document.querySelector(selector) as HTMLElement;
+  button.addEventListener("click", () => {
+    if (button.classList.contains("addLocation__selected")) {
+      button.classList.remove("addLocation__selected");
+      document.getElementById("map")?.classList.remove("cursor-crosshair");
+      woosmap.map.event.clearListeners(map, "click");
+      return;
+    }
+    button.classList.add("addLocation__selected");
+    document.getElementById("map")?.classList.add("cursor-crosshair");
+    woosmap.map.event.addListenerOnce(map, "click", (e) => {
+      document.getElementById("map")?.classList.remove("cursor-crosshair");
+      button.classList.remove("addLocation__selected");
+      const location = e.latlng;
+      locations.push(location);
+      addLatLngToList(list, location);
+      calculateDistances();
+    });
+  });
+}
+
+function initUI(): void {
+  updateTravelModeButtons();
+  updateAvoidance();
+  updateDistanceUnit();
+  updateMethod();
+  updateElements();
+  updateDepartureTime();
+  updateLanguage();
+  originsList = document.getElementById("origins") as HTMLElement;
+  destinationsList = document.getElementById("destinations") as HTMLElement;
+  registerAddButton(
+    ".addLocation__destinations",
+    destinationsList,
+    destinations,
+  );
+  registerAddButton(".addLocation__origins", originsList, origins);
+}
+
+function initMap(): void {
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    center: { lat: 45.53, lng: 2.4 },
+    zoom: 10,
+  });
+  distanceService = new woosmap.map.DistanceService();
+  bounds = new woosmap.map.LatLngBounds();
+  initUI();
+  distanceRequest = createDefaultRequest();
+  calculateDistances();
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/distance-matrix-advanced/highlight/style.css b/dist/samples/distance-matrix-advanced/highlight/style.css
new file mode 100644
index 00000000..1134ef8d
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/highlight/style.css
@@ -0,0 +1,337 @@
+@charset "UTF-8";
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#container {
+  height: 100%;
+  display: flex;
+}
+
+#sidebar {
+  flex-basis: 12rem;
+  flex-grow: 1;
+  max-width: 30rem;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+#map {
+  flex-basis: 70vw;
+  flex-grow: 5;
+  height: 100%;
+}
+
+#sidebar {
+  flex-basis: 18rem;
+  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12);
+  z-index: 1;
+}
+
+#mapContainer {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 70vw;
+  flex-grow: 5;
+}
+
+.tableContainer {
+  max-height: 35%;
+  min-height: 150px;
+  overflow-y: auto;
+  font-size: 13px;
+}
+.tableContainer table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tableContainer tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+.tableContainer tr:nth-child(odd) {
+  background-color: #ffffff;
+}
+.tableContainer thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.tableContainer th {
+  background: #eee;
+  font-weight: bold;
+}
+.tableContainer td {
+  white-space: nowrap;
+}
+.tableContainer th, .tableContainer td {
+  text-align: center;
+  padding: 8px 16px;
+}
+.tableContainer tr td:first-child span, .tableContainer tr td:nth-child(2) span {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  color: white;
+  text-align: center;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  font-size: 80%;
+  font-weight: 600;
+  line-height: 14px;
+}
+.tableContainer tr td:first-child span {
+  background-image: url("https://images.woosmap.com/marker-blue.svg");
+}
+.tableContainer tr td:first-child {
+  position: relative;
+}
+.tableContainer tr td:first-child:after {
+  position: absolute;
+  right: 0;
+  color: #222;
+  content: "→";
+  top: 12px;
+}
+.tableContainer tr td:nth-child(2) span {
+  background-image: url("https://images.woosmap.com/marker-red.svg");
+}
+
+#innerWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0 10px 10px;
+}
+
+input,
+select {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+}
+
+.travelModeSelector {
+  display: flex;
+  align-content: flex-start;
+  justify-content: space-between;
+  max-width: 140px;
+  text-align: center;
+  height: 48px;
+}
+.travelModeSelector .travelMode {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  z-index: 0;
+}
+.travelModeSelector .travelMode button {
+  display: flex;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  list-style: none;
+  margin: 0;
+  outline: 0;
+  overflow: visible;
+  padding: 0;
+  vertical-align: baseline;
+  position: relative;
+}
+.travelModeSelector .travelMode .iconTravelMode {
+  width: 24px;
+  height: 24px;
+  margin: 12px 9px 11px 9px;
+}
+.travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelModeSelector .travelMode .iconTravelMode__CYCLING {
+  display: block;
+}
+.travelModeSelector .travelMode .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode .iconTravelMode__CYCLING__selected {
+  display: none;
+}
+.travelMode__selected .travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__CYCLING {
+  display: none;
+}
+.travelModeSelector .travelMode__selected button {
+  cursor: default;
+}
+.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING {
+  display: none;
+}
+.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING__selected {
+  display: block;
+}
+.travelModeSelector .travelMode__selected::after {
+  background-color: #3d5afe;
+}
+.travelModeSelector .travelMode::after,
+.travelModeSelector .travelMode button::after {
+  content: "";
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  margin: 6px 3px 5px 3px;
+  height: 36px;
+  width: 36px;
+}
+.travelModeSelector .travelMode:hover button:after {
+  background-color: rgba(60, 64, 67, 0.04);
+}
+
+.directionsOptions {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  height: 100%;
+  background: #fff;
+  display: flex;
+  font-size: 13px;
+}
+.directionsOptions__list {
+  width: 50%;
+  height: 100%;
+}
+.directionsOptions__header {
+  font-weight: 600;
+  line-height: 24px;
+  display: flex;
+}
+.directionsOptions__input {
+  height: 24px;
+  display: flex;
+  align-items: baseline;
+}
+.directionsOptions__content {
+  padding: 10px 0;
+}
+.directionsOptions__content:first-child {
+  padding-top: 0;
+}
+
+.addLocation {
+  font-size: 0.75em;
+  display: flex;
+  color: #222;
+  cursor: pointer;
+}
+.addLocation:hover {
+  text-decoration: underline;
+}
+.addLocation div {
+  margin-left: 5px;
+}
+.addLocation__selected {
+  color: #3d5afe;
+}
+.addLocation__selected svg path {
+  fill: #3d5afe;
+}
+
+.sectionHeader {
+  background: #f1f1f1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #eeeeee;
+  margin: 20px -10px 5px;
+  padding: 5px 10px;
+  color: #222;
+}
+.sectionHeader span {
+  font-size: 0.85em;
+  font-weight: 600;
+}
+.sectionHeader:first-child {
+  margin-top: 0;
+}
+
+.customCounter {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  width: 100%;
+}
+
+.customCounter li {
+  counter-increment: step-counter;
+  line-height: 14px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+}
+.customCounter li span {
+  flex-grow: 1;
+}
+
+.customCounter li::before {
+  content: counter(step-counter);
+  margin-right: 5px;
+  font-size: 80%;
+  color: #fff;
+  background-position: bottom;
+  font-weight: 600;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.customCounter__destinations li::before {
+  background-image: url(https://images.woosmap.com/marker-red.svg);
+}
+
+.customCounter__origins li::before {
+  background-image: url(https://images.woosmap.com/marker-blue.svg);
+}
+
+.clear-searchButton {
+  display: block;
+  height: 18px;
+  width: 22px;
+  background: none;
+  border: none;
+  vertical-align: middle;
+  pointer-events: all;
+  cursor: pointer;
+}
+.clear-searchButton .clear-icon {
+  color: inherit;
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+}
+
+#map.cursor-crosshair .mapboxgl-canvas-container {
+  cursor: crosshair !important;
+}
+
+#errorMessage {
+  color: #ff1744;
+  font-size: 12px;
+  max-width: 200px;
+  display: none;
+  position: absolute;
+  top: 0;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  margin: 10px;
+  padding: 5px;
+  overflow: hidden;
+  z-index: 1;
+}
+
diff --git a/dist/samples/distance-matrix-advanced/iframe/index.html b/dist/samples/distance-matrix-advanced/iframe/index.html
new file mode 100644
index 00000000..66efa284
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/iframe/index.html
@@ -0,0 +1,968 @@
+
+
+  
+    Distance Matrix - Advanced
+    
+    
+
+    
+    
+  
+  
+    

+      
+      

+        

+        

+        

+      

+    

+
+    
+  
+
diff --git a/dist/samples/distance-matrix-advanced/jsfiddle/demo.css b/dist/samples/distance-matrix-advanced/jsfiddle/demo.css
new file mode 100644
index 00000000..1134ef8d
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/jsfiddle/demo.css
@@ -0,0 +1,337 @@
+@charset "UTF-8";
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#container {
+  height: 100%;
+  display: flex;
+}
+
+#sidebar {
+  flex-basis: 12rem;
+  flex-grow: 1;
+  max-width: 30rem;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+#map {
+  flex-basis: 70vw;
+  flex-grow: 5;
+  height: 100%;
+}
+
+#sidebar {
+  flex-basis: 18rem;
+  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12);
+  z-index: 1;
+}
+
+#mapContainer {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 70vw;
+  flex-grow: 5;
+}
+
+.tableContainer {
+  max-height: 35%;
+  min-height: 150px;
+  overflow-y: auto;
+  font-size: 13px;
+}
+.tableContainer table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tableContainer tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+.tableContainer tr:nth-child(odd) {
+  background-color: #ffffff;
+}
+.tableContainer thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.tableContainer th {
+  background: #eee;
+  font-weight: bold;
+}
+.tableContainer td {
+  white-space: nowrap;
+}
+.tableContainer th, .tableContainer td {
+  text-align: center;
+  padding: 8px 16px;
+}
+.tableContainer tr td:first-child span, .tableContainer tr td:nth-child(2) span {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  color: white;
+  text-align: center;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  font-size: 80%;
+  font-weight: 600;
+  line-height: 14px;
+}
+.tableContainer tr td:first-child span {
+  background-image: url("https://images.woosmap.com/marker-blue.svg");
+}
+.tableContainer tr td:first-child {
+  position: relative;
+}
+.tableContainer tr td:first-child:after {
+  position: absolute;
+  right: 0;
+  color: #222;
+  content: "→";
+  top: 12px;
+}
+.tableContainer tr td:nth-child(2) span {
+  background-image: url("https://images.woosmap.com/marker-red.svg");
+}
+
+#innerWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0 10px 10px;
+}
+
+input,
+select {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+}
+
+.travelModeSelector {
+  display: flex;
+  align-content: flex-start;
+  justify-content: space-between;
+  max-width: 140px;
+  text-align: center;
+  height: 48px;
+}
+.travelModeSelector .travelMode {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  z-index: 0;
+}
+.travelModeSelector .travelMode button {
+  display: flex;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  list-style: none;
+  margin: 0;
+  outline: 0;
+  overflow: visible;
+  padding: 0;
+  vertical-align: baseline;
+  position: relative;
+}
+.travelModeSelector .travelMode .iconTravelMode {
+  width: 24px;
+  height: 24px;
+  margin: 12px 9px 11px 9px;
+}
+.travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelModeSelector .travelMode .iconTravelMode__CYCLING {
+  display: block;
+}
+.travelModeSelector .travelMode .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode .iconTravelMode__CYCLING__selected {
+  display: none;
+}
+.travelMode__selected .travelModeSelector .travelMode .iconTravelMode__DRIVING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__WALKING, .travelMode__selected .travelModeSelector .travelMode .iconTravelMode__CYCLING {
+  display: none;
+}
+.travelModeSelector .travelMode__selected button {
+  cursor: default;
+}
+.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING {
+  display: none;
+}
+.travelModeSelector .travelMode__selected .iconTravelMode__DRIVING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__WALKING__selected, .travelModeSelector .travelMode__selected .iconTravelMode__CYCLING__selected {
+  display: block;
+}
+.travelModeSelector .travelMode__selected::after {
+  background-color: #3d5afe;
+}
+.travelModeSelector .travelMode::after,
+.travelModeSelector .travelMode button::after {
+  content: "";
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  margin: 6px 3px 5px 3px;
+  height: 36px;
+  width: 36px;
+}
+.travelModeSelector .travelMode:hover button:after {
+  background-color: rgba(60, 64, 67, 0.04);
+}
+
+.directionsOptions {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  height: 100%;
+  background: #fff;
+  display: flex;
+  font-size: 13px;
+}
+.directionsOptions__list {
+  width: 50%;
+  height: 100%;
+}
+.directionsOptions__header {
+  font-weight: 600;
+  line-height: 24px;
+  display: flex;
+}
+.directionsOptions__input {
+  height: 24px;
+  display: flex;
+  align-items: baseline;
+}
+.directionsOptions__content {
+  padding: 10px 0;
+}
+.directionsOptions__content:first-child {
+  padding-top: 0;
+}
+
+.addLocation {
+  font-size: 0.75em;
+  display: flex;
+  color: #222;
+  cursor: pointer;
+}
+.addLocation:hover {
+  text-decoration: underline;
+}
+.addLocation div {
+  margin-left: 5px;
+}
+.addLocation__selected {
+  color: #3d5afe;
+}
+.addLocation__selected svg path {
+  fill: #3d5afe;
+}
+
+.sectionHeader {
+  background: #f1f1f1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #eeeeee;
+  margin: 20px -10px 5px;
+  padding: 5px 10px;
+  color: #222;
+}
+.sectionHeader span {
+  font-size: 0.85em;
+  font-weight: 600;
+}
+.sectionHeader:first-child {
+  margin-top: 0;
+}
+
+.customCounter {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  width: 100%;
+}
+
+.customCounter li {
+  counter-increment: step-counter;
+  line-height: 14px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+}
+.customCounter li span {
+  flex-grow: 1;
+}
+
+.customCounter li::before {
+  content: counter(step-counter);
+  margin-right: 5px;
+  font-size: 80%;
+  color: #fff;
+  background-position: bottom;
+  font-weight: 600;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.customCounter__destinations li::before {
+  background-image: url(https://images.woosmap.com/marker-red.svg);
+}
+
+.customCounter__origins li::before {
+  background-image: url(https://images.woosmap.com/marker-blue.svg);
+}
+
+.clear-searchButton {
+  display: block;
+  height: 18px;
+  width: 22px;
+  background: none;
+  border: none;
+  vertical-align: middle;
+  pointer-events: all;
+  cursor: pointer;
+}
+.clear-searchButton .clear-icon {
+  color: inherit;
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+}
+
+#map.cursor-crosshair .mapboxgl-canvas-container {
+  cursor: crosshair !important;
+}
+
+#errorMessage {
+  color: #ff1744;
+  font-size: 12px;
+  max-width: 200px;
+  display: none;
+  position: absolute;
+  top: 0;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  margin: 10px;
+  padding: 5px;
+  overflow: hidden;
+  z-index: 1;
+}
+
diff --git a/dist/samples/distance-matrix-advanced/jsfiddle/demo.details b/dist/samples/distance-matrix-advanced/jsfiddle/demo.details
new file mode 100644
index 00000000..4dd40253
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Distance Matrix - Advanced
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/distance-matrix-advanced/jsfiddle/demo.html b/dist/samples/distance-matrix-advanced/jsfiddle/demo.html
new file mode 100644
index 00000000..4583f6dc
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/jsfiddle/demo.html
@@ -0,0 +1,318 @@
+
+
+  
+    Distance Matrix - Advanced
+    
+    
+
+    
+  
+  
+    

+      
+      

+        

+        

+        

+      

+    

+
+    
+  
+
diff --git a/dist/samples/distance-matrix-advanced/jsfiddle/demo.js b/dist/samples/distance-matrix-advanced/jsfiddle/demo.js
new file mode 100644
index 00000000..1a46f5c5
--- /dev/null
+++ b/dist/samples/distance-matrix-advanced/jsfiddle/demo.js
@@ -0,0 +1,359 @@
+let map;
+let bounds;
+let distanceService;
+let distanceRequest;
+let markersArray = [];
+let originsList;
+let destinationsList;
+const origins = [];
+const destinations = [];
+
+function createMarker(position, label, url) {
+  return new woosmap.map.Marker({
+    map,
+    position,
+    icon: {
+      url,
+      labelOrigin: new woosmap.map.Point(13, 15),
+      scaledSize: {
+        height: 38,
+        width: 26,
+      },
+    },
+    label: {
+      text: label,
+      color: "white",
+    },
+  });
+}
+
+function clearMarkers() {
+  for (const marker of markersArray) {
+    marker.setMap(null);
+  }
+
+  markersArray = [];
+}
+
+function displayMatrixMarkers(origins, destinations) {
+  clearMarkers();
+  origins.forEach((origin, index) => {
+    bounds.extend(origin);
+    markersArray.push(
+      createMarker(
+        origin,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-blue.svg",
+      ),
+    );
+  });
+  destinations.forEach((destination, index) => {
+    bounds.extend(destination);
+    markersArray.push(
+      createMarker(
+        destination,
+        (index + 1).toString(),
+        "https://images.woosmap.com/marker-red.svg",
+      ),
+    );
+  });
+  map.fitBounds(bounds, { top: 70, bottom: 40, left: 50, right: 50 }, true);
+}
+
+function createDefaultRequest() {
+  const origin1 = { lat: 45.4642, lng: 9.19 };
+  const origin2 = { lat: 45.75, lng: 4.85 };
+  const destinationA = { lat: 42.6976, lng: 9.45 };
+  const destinationB = {
+    lat: 41.9028,
+    lng: 12.4964,
+  };
+
+  addLatLngToList(originsList, origin1);
+  origins.push(origin1);
+  addLatLngToList(originsList, origin2);
+  origins.push(origin2);
+  addLatLngToList(destinationsList, destinationA);
+  destinations.push(destinationA);
+  addLatLngToList(destinationsList, destinationB);
+  destinations.push(destinationB);
+  return {
+    origins,
+    destinations,
+    travelMode: woosmap.map.TravelMode.DRIVING,
+    unitSystem: woosmap.map.UnitSystem.METRIC,
+    avoidHighways: false,
+    avoidTolls: false,
+    elements: "duration_distance",
+  };
+}
+
+function addLatLngToList(element, location) {
+  const locationElement = document.createElement("li");
+
+  locationElement.innerHTML = `lat: ${location.lat.toFixed(4)}, lng: ${location.lng.toFixed(4)}`;
+
+  const removeButton = document.createElement("button");
+
+  removeButton.classList.add("clear-searchButton");
+  removeButton.innerHTML =
+    ' ';
+  removeButton.addEventListener("click", () => {
+    element.removeChild(locationElement);
+    if (element === originsList) {
+      origins.splice(origins.indexOf(location), 1);
+    } else {
+      destinations.splice(destinations.indexOf(location), 1);
+    }
+
+    calculateDistances();
+  });
+  locationElement.appendChild(removeButton);
+  element.appendChild(locationElement);
+}
+
+function handleResponse(response) {
+  displayMatrixMarkers(distanceRequest.origins, distanceRequest.destinations);
+  createTable(response);
+  displayOrHideError("");
+}
+
+function createTable(response) {
+  let table =
+    "";
+
+  response.rows.forEach((row, fromIndex) => {
+    row.elements.forEach((element, toIndex) => {
+      if (element.status === "OK") {
+        const time = element.duration ? element.duration.text : "N/A";
+        const distance = element.distance ? element.distance.text : "N/A";
+
+        table += ``;
+      }
+    });
+  });
+  table += "
FromToTimeDistance
${fromIndex + 1}${toIndex + 1}${time}${distance}
";
+
+  const tableContainer = document.querySelector(".tableContainer");
+
+  tableContainer.innerHTML = table;
+  tableContainer.style.display = "block";
+}
+
+function displayOrHideError(error) {
+  const errorElement = document.getElementById("errorMessage");
+
+  if (error === "") {
+    errorElement.style.display = "none";
+  } else {
+    errorElement.innerHTML = error;
+    errorElement.style.display = "block";
+
+    const tableContainer = document.querySelector(".tableContainer");
+
+    tableContainer.innerHTML = "";
+    tableContainer.style.display = "none";
+  }
+}
+
+function calculateDistances() {
+  distanceService
+    .getDistanceMatrix(distanceRequest)
+    .then(handleResponse)
+    .catch((error) => {
+      console.error("Error calculating distances:", error);
+      displayOrHideError(error);
+    });
+}
+
+function toggleTravelMode(travelMode) {
+  document
+    .querySelectorAll(".travelMode")
+    .forEach((el) => el.classList.remove("travelMode__selected"));
+  travelMode.classList.add("travelMode__selected");
+}
+
+function updateTravelModeButtons() {
+  document.querySelectorAll(".travelMode").forEach((el) =>
+    el.addEventListener("click", () => {
+      toggleTravelMode(el);
+      distanceRequest.travelMode = el.dataset.travelmode;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateAvoidance() {
+  document.querySelectorAll(".avoid").forEach((el) =>
+    el.addEventListener("click", () => {
+      const avoidHighways = document.getElementById("avoidHighways");
+      const avoidTolls = document.getElementById("avoidTolls");
+      const avoidFerries = document.getElementById("avoidFerries");
+
+      distanceRequest.avoidHighways = avoidHighways.checked;
+      distanceRequest.avoidTolls = avoidTolls.checked;
+      distanceRequest.avoidFerries = avoidFerries.checked;
+      calculateDistances();
+    }),
+  );
+}
+
+function updateDistanceUnit() {
+  document.querySelectorAll('input[name="distanceUnits"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.unitSystem = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateMethod() {
+  document.querySelectorAll('input[name="method"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.method = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateElements() {
+  document.querySelectorAll('input[name="elements"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      distanceRequest.elements = el.value;
+      calculateDistances();
+    });
+  });
+}
+
+function updateLanguage() {
+  const languageSelect = document.getElementById("language");
+
+  languageSelect.addEventListener("change", () => {
+    distanceRequest.language = languageSelect.value;
+    calculateDistances();
+  });
+}
+
+function isValidDate(date) {
+  return date.getTime && typeof date.getTime === "function";
+}
+
+function updateDepartureTime() {
+  const departureTimeElement = document.getElementById("departure-time");
+  const datetimeRadioButton = document.getElementById("datetime");
+
+  if (!departureTimeElement) {
+    return;
+  }
+
+  departureTimeElement.disabled = true;
+  document.querySelectorAll('input[name="departureTime"]').forEach((el) => {
+    el.addEventListener("change", () => {
+      const selectedOption = el.value;
+
+      switch (selectedOption) {
+        case "empty":
+          delete distanceRequest.departureTime;
+          departureTimeElement.disabled = true;
+          break;
+        case "now":
+          distanceRequest.departureTime = "now";
+          departureTimeElement.disabled = true;
+          break;
+        case "datetime":
+          if (departureTimeElement.value) {
+            const newDate = new Date(departureTimeElement.value);
+
+            distanceRequest.departureTime = isValidDate(newDate)
+              ? newDate
+              : undefined;
+          } else {
+            distanceRequest.departureTime = undefined;
+          }
+
+          departureTimeElement.disabled = false;
+          break;
+      }
+
+      calculateDistances();
+    });
+  });
+  departureTimeElement.addEventListener("change", () => {
+    if (datetimeRadioButton) {
+      datetimeRadioButton.checked = true;
+    }
+
+    const newDate = new Date(departureTimeElement.value);
+
+    distanceRequest.departureTime = isValidDate(newDate) ? newDate : undefined;
+    calculateDistances();
+  });
+}
+
+function registerAddButton(selector, list, locations) {
+  const button = document.querySelector(selector);
+
+  button.addEventListener("click", () => {
+    let _a, _b;
+
+    if (button.classList.contains("addLocation__selected")) {
+      button.classList.remove("addLocation__selected");
+      (_a = document.getElementById("map")) === null || _a === void 0
+        ? void 0
+        : _a.classList.remove("cursor-crosshair");
+      woosmap.map.event.clearListeners(map, "click");
+      return;
+    }
+
+    button.classList.add("addLocation__selected");
+    (_b = document.getElementById("map")) === null || _b === void 0
+      ? void 0
+      : _b.classList.add("cursor-crosshair");
+    woosmap.map.event.addListenerOnce(map, "click", (e) => {
+      let _a;
+
+      (_a = document.getElementById("map")) === null || _a === void 0
+        ? void 0
+        : _a.classList.remove("cursor-crosshair");
+      button.classList.remove("addLocation__selected");
+
+      const location = e.latlng;
+
+      locations.push(location);
+      addLatLngToList(list, location);
+      calculateDistances();
+    });
+  });
+}
+
+function initUI() {
+  updateTravelModeButtons();
+  updateAvoidance();
+  updateDistanceUnit();
+  updateMethod();
+  updateElements();
+  updateDepartureTime();
+  updateLanguage();
+  originsList = document.getElementById("origins");
+  destinationsList = document.getElementById("destinations");
+  registerAddButton(
+    ".addLocation__destinations",
+    destinationsList,
+    destinations,
+  );
+  registerAddButton(".addLocation__origins", originsList, origins);
+}
+
+function initMap() {
+  map = new woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 45.53, lng: 2.4 },
+    zoom: 10,
+  });
+  distanceService = new woosmap.map.DistanceService();
+  bounds = new woosmap.map.LatLngBounds();
+  initUI();
+  distanceRequest = createDefaultRequest();
+  calculateDistances();
+}
+
+window.initMap = initMap;
diff --git a/dist/samples/distance-matrix/app/package.json b/dist/samples/distance-matrix/app/package.json
index a4f70e27..95f4c8c0 100644
--- a/dist/samples/distance-matrix/app/package.json
+++ b/dist/samples/distance-matrix/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "distance-matrix",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/draw-shapes-events/app/package.json b/dist/samples/draw-shapes-events/app/package.json
index 74b09045..6159052c 100644
--- a/dist/samples/draw-shapes-events/app/package.json
+++ b/dist/samples/draw-shapes-events/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "draw-shapes-events",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/draw-shapes-events/app/style.css b/dist/samples/draw-shapes-events/app/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/draw-shapes-events/app/style.css
+++ b/dist/samples/draw-shapes-events/app/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/draw-shapes-events/docs/style.css b/dist/samples/draw-shapes-events/docs/style.css
index 1062df5f..9ade7527 100644
--- a/dist/samples/draw-shapes-events/docs/style.css
+++ b/dist/samples/draw-shapes-events/docs/style.css
@@ -4,6 +4,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/draw-shapes-events/highlight/style.css b/dist/samples/draw-shapes-events/highlight/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/draw-shapes-events/highlight/style.css
+++ b/dist/samples/draw-shapes-events/highlight/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/draw-shapes-events/iframe/index.html b/dist/samples/draw-shapes-events/iframe/index.html
index 9fcc76ac..b26f2b75 100644
--- a/dist/samples/draw-shapes-events/iframe/index.html
+++ b/dist/samples/draw-shapes-events/iframe/index.html
@@ -132,6 +132,21 @@
         height: 100%;
         margin: 0;
         padding: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
       }
       #container {
         height: 100%;
diff --git a/dist/samples/draw-shapes-events/jsfiddle/demo.css b/dist/samples/draw-shapes-events/jsfiddle/demo.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/draw-shapes-events/jsfiddle/demo.css
+++ b/dist/samples/draw-shapes-events/jsfiddle/demo.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/draw-shapes/app/package.json b/dist/samples/draw-shapes/app/package.json
index 954f41ff..123aa729 100644
--- a/dist/samples/draw-shapes/app/package.json
+++ b/dist/samples/draw-shapes/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "draw-shapes",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/event-simple/app/package.json b/dist/samples/event-simple/app/package.json
index e91c89b0..12249c84 100644
--- a/dist/samples/event-simple/app/package.json
+++ b/dist/samples/event-simple/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "event-simple",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/indoor-directions-service/app/.eslintrc.json b/dist/samples/indoor-directions-service/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-directions-service/app/.gitignore b/dist/samples/indoor-directions-service/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-directions-service/app/README.md b/dist/samples/indoor-directions-service/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-directions-service/app/env.d.ts b/dist/samples/indoor-directions-service/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-directions-service/app/index.html b/dist/samples/indoor-directions-service/app/index.html
new file mode 100644
index 00000000..d6fe4a8a
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Directions Service
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-directions-service/app/index.ts b/dist/samples/indoor-directions-service/app/index.ts
new file mode 100644
index 00000000..424af1c8
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/index.ts
@@ -0,0 +1,65 @@
+let map: woosmap.map.Map;
+let indoorDirectionsRequest: woosmap.map.IndoorDirectionRequest;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let venue: string;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService: woosmap.map.IndoorService =
+    new window.woosmap.map.IndoorService();
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+
+      if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+        indoorDirectionsRequest = {
+          venueId: indoorRenderer.getVenue()?.venue_id || "gdn_doc",
+          origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+          originLevel: 0,
+          destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+          destinationLevel: 0,
+          language: "en",
+          units: "metric",
+          originId: null,
+          destinationId: null,
+        };
+
+        indoorService.directions(
+          indoorDirectionsRequest,
+          (result: woosmap.map.IndoorDirectionResult) => {
+            indoorRenderer.setDirections(result);
+            hideLoader();
+          },
+        );
+      }
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-directions-service/app/package.json b/dist/samples/indoor-directions-service/app/package.json
new file mode 100644
index 00000000..1ce6f77a
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-directions-service",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-directions-service/app/style.css b/dist/samples/indoor-directions-service/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-directions-service/app/tsconfig.json b/dist/samples/indoor-directions-service/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-directions-service/app/vite.config.js b/dist/samples/indoor-directions-service/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-directions-service/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-directions-service/docs/index.html b/dist/samples/indoor-directions-service/docs/index.html
new file mode 100644
index 00000000..2a72c26a
--- /dev/null
+++ b/dist/samples/indoor-directions-service/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Directions Service
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-directions-service/docs/index.js b/dist/samples/indoor-directions-service/docs/index.js
new file mode 100644
index 00000000..b0ab55fb
--- /dev/null
+++ b/dist/samples/indoor-directions-service/docs/index.js
@@ -0,0 +1,53 @@
+// [START woosmap_indoor_directions_service]
+let map;
+let indoorDirectionsRequest;
+let indoorRenderer;
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService = new window.woosmap.map.IndoorService();
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    let _a;
+
+    console.log(venue);
+    if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+      indoorDirectionsRequest = {
+        venueId:
+          ((_a = indoorRenderer.getVenue()) === null || _a === void 0
+            ? void 0
+            : _a.venue_id) || "gdn_doc",
+        origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+        originLevel: 0,
+        destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+        destinationLevel: 0,
+        language: "en",
+        units: "metric",
+        originId: null,
+        destinationId: null,
+      };
+      indoorService.directions(indoorDirectionsRequest, (result) => {
+        indoorRenderer.setDirections(result);
+        hideLoader();
+      });
+    }
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_directions_service]
diff --git a/dist/samples/indoor-directions-service/docs/index.ts b/dist/samples/indoor-directions-service/docs/index.ts
new file mode 100644
index 00000000..a3566ed0
--- /dev/null
+++ b/dist/samples/indoor-directions-service/docs/index.ts
@@ -0,0 +1,67 @@
+// [START woosmap_indoor_directions_service]
+let map: woosmap.map.Map;
+let indoorDirectionsRequest: woosmap.map.IndoorDirectionRequest;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let venue: string;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService: woosmap.map.IndoorService =
+    new window.woosmap.map.IndoorService();
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+
+      if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+        indoorDirectionsRequest = {
+          venueId: indoorRenderer.getVenue()?.venue_id || "gdn_doc",
+          origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+          originLevel: 0,
+          destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+          destinationLevel: 0,
+          language: "en",
+          units: "metric",
+          originId: null,
+          destinationId: null,
+        };
+
+        indoorService.directions(
+          indoorDirectionsRequest,
+          (result: woosmap.map.IndoorDirectionResult) => {
+            indoorRenderer.setDirections(result);
+            hideLoader();
+          },
+        );
+      }
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_directions_service]
+
+export {};
diff --git a/dist/samples/indoor-directions-service/docs/style.css b/dist/samples/indoor-directions-service/docs/style.css
new file mode 100644
index 00000000..9fdba8c4
--- /dev/null
+++ b/dist/samples/indoor-directions-service/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_directions_service] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_directions_service] */
\ No newline at end of file
diff --git a/dist/samples/indoor-directions-service/highlight/highlight.html b/dist/samples/indoor-directions-service/highlight/highlight.html
new file mode 100644
index 00000000..a633b2ef
--- /dev/null
+++ b/dist/samples/indoor-directions-service/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-directions-service/highlight/index.html b/dist/samples/indoor-directions-service/highlight/index.html
new file mode 100644
index 00000000..a140c4dc
--- /dev/null
+++ b/dist/samples/indoor-directions-service/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Directions Service
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-directions-service/highlight/index.js b/dist/samples/indoor-directions-service/highlight/index.js
new file mode 100644
index 00000000..a37dc01b
--- /dev/null
+++ b/dist/samples/indoor-directions-service/highlight/index.js
@@ -0,0 +1,51 @@
+let map;
+let indoorDirectionsRequest;
+let indoorRenderer;
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService = new window.woosmap.map.IndoorService();
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    let _a;
+
+    console.log(venue);
+    if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+      indoorDirectionsRequest = {
+        venueId:
+          ((_a = indoorRenderer.getVenue()) === null || _a === void 0
+            ? void 0
+            : _a.venue_id) || "gdn_doc",
+        origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+        originLevel: 0,
+        destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+        destinationLevel: 0,
+        language: "en",
+        units: "metric",
+        originId: null,
+        destinationId: null,
+      };
+      indoorService.directions(indoorDirectionsRequest, (result) => {
+        indoorRenderer.setDirections(result);
+        hideLoader();
+      });
+    }
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-directions-service/highlight/index.ts b/dist/samples/indoor-directions-service/highlight/index.ts
new file mode 100644
index 00000000..424af1c8
--- /dev/null
+++ b/dist/samples/indoor-directions-service/highlight/index.ts
@@ -0,0 +1,65 @@
+let map: woosmap.map.Map;
+let indoorDirectionsRequest: woosmap.map.IndoorDirectionRequest;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let venue: string;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService: woosmap.map.IndoorService =
+    new window.woosmap.map.IndoorService();
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+
+      if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+        indoorDirectionsRequest = {
+          venueId: indoorRenderer.getVenue()?.venue_id || "gdn_doc",
+          origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+          originLevel: 0,
+          destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+          destinationLevel: 0,
+          language: "en",
+          units: "metric",
+          originId: null,
+          destinationId: null,
+        };
+
+        indoorService.directions(
+          indoorDirectionsRequest,
+          (result: woosmap.map.IndoorDirectionResult) => {
+            indoorRenderer.setDirections(result);
+            hideLoader();
+          },
+        );
+      }
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-directions-service/highlight/style.css b/dist/samples/indoor-directions-service/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-directions-service/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-directions-service/iframe/index.html b/dist/samples/indoor-directions-service/iframe/index.html
new file mode 100644
index 00000000..65104c03
--- /dev/null
+++ b/dist/samples/indoor-directions-service/iframe/index.html
@@ -0,0 +1,146 @@
+
+
+  
+    Indoor Directions Service
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-directions-service/jsfiddle/demo.css b/dist/samples/indoor-directions-service/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-directions-service/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-directions-service/jsfiddle/demo.details b/dist/samples/indoor-directions-service/jsfiddle/demo.details
new file mode 100644
index 00000000..54e868ad
--- /dev/null
+++ b/dist/samples/indoor-directions-service/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Directions Service
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-directions-service/jsfiddle/demo.html b/dist/samples/indoor-directions-service/jsfiddle/demo.html
new file mode 100644
index 00000000..efd87918
--- /dev/null
+++ b/dist/samples/indoor-directions-service/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Directions Service
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-directions-service/jsfiddle/demo.js b/dist/samples/indoor-directions-service/jsfiddle/demo.js
new file mode 100644
index 00000000..a37dc01b
--- /dev/null
+++ b/dist/samples/indoor-directions-service/jsfiddle/demo.js
@@ -0,0 +1,51 @@
+let map;
+let indoorDirectionsRequest;
+let indoorRenderer;
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+  indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: venue,
+  });
+
+  const indoorService = new window.woosmap.map.IndoorService();
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    let _a;
+
+    console.log(venue);
+    if (indoorRenderer !== null && indoorRenderer.getVenue() !== null) {
+      indoorDirectionsRequest = {
+        venueId:
+          ((_a = indoorRenderer.getVenue()) === null || _a === void 0
+            ? void 0
+            : _a.venue_id) || "gdn_doc",
+        origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
+        originLevel: 0,
+        destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
+        destinationLevel: 0,
+        language: "en",
+        units: "metric",
+        originId: null,
+        destinationId: null,
+      };
+      indoorService.directions(indoorDirectionsRequest, (result) => {
+        indoorRenderer.setDirections(result);
+        hideLoader();
+      });
+    }
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-map-advanced/app/.eslintrc.json b/dist/samples/indoor-map-advanced/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-advanced/app/.gitignore b/dist/samples/indoor-map-advanced/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-map-advanced/app/README.md b/dist/samples/indoor-map-advanced/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-map-advanced/app/env.d.ts b/dist/samples/indoor-map-advanced/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-map-advanced/app/index.html b/dist/samples/indoor-map-advanced/app/index.html
new file mode 100644
index 00000000..7b986136
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Map Renderer (Explore configuration options)
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-advanced/app/index.ts b/dist/samples/indoor-map-advanced/app/index.ts
new file mode 100644
index 00000000..29c6f701
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/index.ts
@@ -0,0 +1,41 @@
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-map-advanced/app/package.json b/dist/samples/indoor-map-advanced/app/package.json
new file mode 100644
index 00000000..a4ceb220
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-map-advanced",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-advanced/app/style.css b/dist/samples/indoor-map-advanced/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-advanced/app/tsconfig.json b/dist/samples/indoor-map-advanced/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-advanced/app/vite.config.js b/dist/samples/indoor-map-advanced/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-map-advanced/docs/index.html b/dist/samples/indoor-map-advanced/docs/index.html
new file mode 100644
index 00000000..cfe1cdf4
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Map Renderer (Explore configuration options)
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-map-advanced/docs/index.js b/dist/samples/indoor-map-advanced/docs/index.js
new file mode 100644
index 00000000..581a8a31
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/docs/index.js
@@ -0,0 +1,30 @@
+// [START woosmap_indoor_map_advanced]
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_map_advanced]
diff --git a/dist/samples/indoor-map-advanced/docs/index.ts b/dist/samples/indoor-map-advanced/docs/index.ts
new file mode 100644
index 00000000..69ee79b4
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/docs/index.ts
@@ -0,0 +1,43 @@
+// [START woosmap_indoor_map_advanced]
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_map_advanced]
+
+export {};
diff --git a/dist/samples/indoor-map-advanced/docs/style.css b/dist/samples/indoor-map-advanced/docs/style.css
new file mode 100644
index 00000000..4883c2f7
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_map_advanced] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_map_advanced] */
\ No newline at end of file
diff --git a/dist/samples/indoor-map-advanced/highlight/highlight.html b/dist/samples/indoor-map-advanced/highlight/highlight.html
new file mode 100644
index 00000000..7feaa30b
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-map-advanced/highlight/index.html b/dist/samples/indoor-map-advanced/highlight/index.html
new file mode 100644
index 00000000..1ea5f297
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Map Renderer (Explore configuration options)
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-advanced/highlight/index.js b/dist/samples/indoor-map-advanced/highlight/index.js
new file mode 100644
index 00000000..cc1a600d
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/highlight/index.js
@@ -0,0 +1,28 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-map-advanced/highlight/index.ts b/dist/samples/indoor-map-advanced/highlight/index.ts
new file mode 100644
index 00000000..29c6f701
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/highlight/index.ts
@@ -0,0 +1,41 @@
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-map-advanced/highlight/style.css b/dist/samples/indoor-map-advanced/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-advanced/iframe/index.html b/dist/samples/indoor-map-advanced/iframe/index.html
new file mode 100644
index 00000000..828d826c
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/iframe/index.html
@@ -0,0 +1,130 @@
+
+
+  
+    Indoor Map Renderer (Explore configuration options)
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-advanced/jsfiddle/demo.css b/dist/samples/indoor-map-advanced/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-advanced/jsfiddle/demo.details b/dist/samples/indoor-map-advanced/jsfiddle/demo.details
new file mode 100644
index 00000000..2edb19e6
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Map Renderer (Explore configuration options)
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-map-advanced/jsfiddle/demo.html b/dist/samples/indoor-map-advanced/jsfiddle/demo.html
new file mode 100644
index 00000000..23de5d91
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Map Renderer (Explore configuration options)
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-advanced/jsfiddle/demo.js b/dist/samples/indoor-map-advanced/jsfiddle/demo.js
new file mode 100644
index 00000000..cc1a600d
--- /dev/null
+++ b/dist/samples/indoor-map-advanced/jsfiddle/demo.js
@@ -0,0 +1,28 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+    highlightPOIByRef: "tropiques",
+    useInfoWindow: true,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-map-simple/app/.eslintrc.json b/dist/samples/indoor-map-simple/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-simple/app/.gitignore b/dist/samples/indoor-map-simple/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-map-simple/app/README.md b/dist/samples/indoor-map-simple/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-map-simple/app/env.d.ts b/dist/samples/indoor-map-simple/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-map-simple/app/index.html b/dist/samples/indoor-map-simple/app/index.html
new file mode 100644
index 00000000..c0278b1d
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Map Renderer
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-simple/app/index.ts b/dist/samples/indoor-map-simple/app/index.ts
new file mode 100644
index 00000000..5818c22e
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/index.ts
@@ -0,0 +1,39 @@
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-map-simple/app/package.json b/dist/samples/indoor-map-simple/app/package.json
new file mode 100644
index 00000000..3c39c6fd
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-map-simple",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-simple/app/style.css b/dist/samples/indoor-map-simple/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-simple/app/tsconfig.json b/dist/samples/indoor-map-simple/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-map-simple/app/vite.config.js b/dist/samples/indoor-map-simple/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-map-simple/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-map-simple/docs/index.html b/dist/samples/indoor-map-simple/docs/index.html
new file mode 100644
index 00000000..d455c262
--- /dev/null
+++ b/dist/samples/indoor-map-simple/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Map Renderer
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-map-simple/docs/index.js b/dist/samples/indoor-map-simple/docs/index.js
new file mode 100644
index 00000000..bdce366e
--- /dev/null
+++ b/dist/samples/indoor-map-simple/docs/index.js
@@ -0,0 +1,28 @@
+// [START woosmap_indoor_map_simple]
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_map_simple]
diff --git a/dist/samples/indoor-map-simple/docs/index.ts b/dist/samples/indoor-map-simple/docs/index.ts
new file mode 100644
index 00000000..7493235c
--- /dev/null
+++ b/dist/samples/indoor-map-simple/docs/index.ts
@@ -0,0 +1,41 @@
+// [START woosmap_indoor_map_simple]
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_map_simple]
+
+export {};
diff --git a/dist/samples/indoor-map-simple/docs/style.css b/dist/samples/indoor-map-simple/docs/style.css
new file mode 100644
index 00000000..cafa8cf9
--- /dev/null
+++ b/dist/samples/indoor-map-simple/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_map_simple] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_map_simple] */
\ No newline at end of file
diff --git a/dist/samples/indoor-map-simple/highlight/highlight.html b/dist/samples/indoor-map-simple/highlight/highlight.html
new file mode 100644
index 00000000..f02811c2
--- /dev/null
+++ b/dist/samples/indoor-map-simple/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-map-simple/highlight/index.html b/dist/samples/indoor-map-simple/highlight/index.html
new file mode 100644
index 00000000..7e1790bb
--- /dev/null
+++ b/dist/samples/indoor-map-simple/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Map Renderer
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-simple/highlight/index.js b/dist/samples/indoor-map-simple/highlight/index.js
new file mode 100644
index 00000000..5580213f
--- /dev/null
+++ b/dist/samples/indoor-map-simple/highlight/index.js
@@ -0,0 +1,26 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-map-simple/highlight/index.ts b/dist/samples/indoor-map-simple/highlight/index.ts
new file mode 100644
index 00000000..5818c22e
--- /dev/null
+++ b/dist/samples/indoor-map-simple/highlight/index.ts
@@ -0,0 +1,39 @@
+let map: woosmap.map.Map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 19.5,
+    },
+  );
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log(venue);
+      hideLoader();
+    },
+  );
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-map-simple/highlight/style.css b/dist/samples/indoor-map-simple/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-simple/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-simple/iframe/index.html b/dist/samples/indoor-map-simple/iframe/index.html
new file mode 100644
index 00000000..d5442f4d
--- /dev/null
+++ b/dist/samples/indoor-map-simple/iframe/index.html
@@ -0,0 +1,128 @@
+
+
+  
+    Indoor Map Renderer
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-simple/jsfiddle/demo.css b/dist/samples/indoor-map-simple/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-map-simple/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-map-simple/jsfiddle/demo.details b/dist/samples/indoor-map-simple/jsfiddle/demo.details
new file mode 100644
index 00000000..b9918910
--- /dev/null
+++ b/dist/samples/indoor-map-simple/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Map Renderer
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-map-simple/jsfiddle/demo.html b/dist/samples/indoor-map-simple/jsfiddle/demo.html
new file mode 100644
index 00000000..5df6e48c
--- /dev/null
+++ b/dist/samples/indoor-map-simple/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Map Renderer
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-map-simple/jsfiddle/demo.js b/dist/samples/indoor-map-simple/jsfiddle/demo.js
new file mode 100644
index 00000000..5580213f
--- /dev/null
+++ b/dist/samples/indoor-map-simple/jsfiddle/demo.js
@@ -0,0 +1,26 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 19.5,
+  });
+
+  const indoorRenderer = new woosmap.map.IndoorRenderer({
+    venue: "wgs_doc",
+    defaultFloor: 3,
+  });
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log(venue);
+    hideLoader();
+  });
+  indoorRenderer.setMap(map);
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-navigation-widget/app/.eslintrc.json b/dist/samples/indoor-navigation-widget/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-navigation-widget/app/.gitignore b/dist/samples/indoor-navigation-widget/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-navigation-widget/app/README.md b/dist/samples/indoor-navigation-widget/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-navigation-widget/app/env.d.ts b/dist/samples/indoor-navigation-widget/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-navigation-widget/app/index.html b/dist/samples/indoor-navigation-widget/app/index.html
new file mode 100644
index 00000000..a43a2e72
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Navigation Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-navigation-widget/app/index.ts b/dist/samples/indoor-navigation-widget/app/index.ts
new file mode 100644
index 00000000..ae1dd222
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/index.ts
@@ -0,0 +1,67 @@
+let map: woosmap.map.Map;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let indoorNavigation: woosmap.map.NavigationWidget;
+let indoorService: woosmap.map.IndoorService;
+let venue: string;
+
+function initMap(): void {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    { center: { lat: 43.6066, lng: 3.9218 } },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request: woosmap.map.IndoorDirectionRequest = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-navigation-widget/app/package.json b/dist/samples/indoor-navigation-widget/app/package.json
new file mode 100644
index 00000000..cbb370f1
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-navigation-widget",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-navigation-widget/app/style.css b/dist/samples/indoor-navigation-widget/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-navigation-widget/app/tsconfig.json b/dist/samples/indoor-navigation-widget/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-navigation-widget/app/vite.config.js b/dist/samples/indoor-navigation-widget/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-navigation-widget/docs/index.html b/dist/samples/indoor-navigation-widget/docs/index.html
new file mode 100644
index 00000000..174d0567
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Navigation Widget
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-navigation-widget/docs/index.js b/dist/samples/indoor-navigation-widget/docs/index.js
new file mode 100644
index 00000000..72ef8d6b
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/docs/index.js
@@ -0,0 +1,61 @@
+// [START woosmap_indoor_navigation_widget]
+let map;
+let indoorRenderer;
+let indoorNavigation;
+let indoorService;
+// [START woosmap_indoor_navigation_widegt]
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+  });
+
+  const conf = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_navigation_widegt]
diff --git a/dist/samples/indoor-navigation-widget/docs/index.ts b/dist/samples/indoor-navigation-widget/docs/index.ts
new file mode 100644
index 00000000..84a78952
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/docs/index.ts
@@ -0,0 +1,69 @@
+// [START woosmap_indoor_navigation_widget]
+let map: woosmap.map.Map;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let indoorNavigation: woosmap.map.NavigationWidget;
+let indoorService: woosmap.map.IndoorService;
+let venue: string;
+
+function initMap(): void {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    { center: { lat: 43.6066, lng: 3.9218 } },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request: woosmap.map.IndoorDirectionRequest = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_navigation_widget]
+
+export {};
diff --git a/dist/samples/indoor-navigation-widget/docs/style.css b/dist/samples/indoor-navigation-widget/docs/style.css
new file mode 100644
index 00000000..57e05294
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_navigation_widget] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_navigation_widget] */
\ No newline at end of file
diff --git a/dist/samples/indoor-navigation-widget/highlight/highlight.html b/dist/samples/indoor-navigation-widget/highlight/highlight.html
new file mode 100644
index 00000000..a5ef33d3
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-navigation-widget/highlight/index.html b/dist/samples/indoor-navigation-widget/highlight/index.html
new file mode 100644
index 00000000..ef6d0efe
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Navigation Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-navigation-widget/highlight/index.js b/dist/samples/indoor-navigation-widget/highlight/index.js
new file mode 100644
index 00000000..e0dae098
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/highlight/index.js
@@ -0,0 +1,58 @@
+let map;
+let indoorRenderer;
+let indoorNavigation;
+let indoorService;
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+  });
+
+  const conf = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-navigation-widget/highlight/index.ts b/dist/samples/indoor-navigation-widget/highlight/index.ts
new file mode 100644
index 00000000..ae1dd222
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/highlight/index.ts
@@ -0,0 +1,67 @@
+let map: woosmap.map.Map;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let indoorNavigation: woosmap.map.NavigationWidget;
+let indoorService: woosmap.map.IndoorService;
+let venue: string;
+
+function initMap(): void {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    { center: { lat: 43.6066, lng: 3.9218 } },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request: woosmap.map.IndoorDirectionRequest = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-navigation-widget/highlight/style.css b/dist/samples/indoor-navigation-widget/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-navigation-widget/iframe/index.html b/dist/samples/indoor-navigation-widget/iframe/index.html
new file mode 100644
index 00000000..1811af44
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/iframe/index.html
@@ -0,0 +1,146 @@
+
+
+  
+    Indoor Navigation Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-navigation-widget/jsfiddle/demo.css b/dist/samples/indoor-navigation-widget/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-navigation-widget/jsfiddle/demo.details b/dist/samples/indoor-navigation-widget/jsfiddle/demo.details
new file mode 100644
index 00000000..ada59875
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Navigation Widget
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-navigation-widget/jsfiddle/demo.html b/dist/samples/indoor-navigation-widget/jsfiddle/demo.html
new file mode 100644
index 00000000..817cabd3
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Navigation Widget
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-navigation-widget/jsfiddle/demo.js b/dist/samples/indoor-navigation-widget/jsfiddle/demo.js
new file mode 100644
index 00000000..e0dae098
--- /dev/null
+++ b/dist/samples/indoor-navigation-widget/jsfiddle/demo.js
@@ -0,0 +1,58 @@
+let map;
+let indoorRenderer;
+let indoorNavigation;
+let indoorService;
+let venue;
+
+function initMap() {
+  venue = "gdn_doc";
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+  });
+
+  const conf = {
+    venue: venue,
+    responsive: "desktop",
+  };
+
+  indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    indoorService = new window.woosmap.map.IndoorService();
+
+    const request = {
+      venueId: "gdn_doc",
+      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      originLevel: 0,
+      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destinationLevel: 0,
+      units: "metric",
+      originId: null,
+      destinationId: null,
+    };
+
+    indoorService.directions(request, (response) => {
+      if (response) {
+        indoorRenderer.setDirections(response);
+        indoorNavigation = new window.woosmap.map.NavigationWidget(
+          indoorRenderer,
+          exitNavigation,
+        );
+        indoorNavigation.setMap(map);
+        hideLoader();
+      }
+    });
+  });
+}
+
+const exitNavigation = () => {
+  indoorNavigation.setMap(null);
+  indoorRenderer.setDirections(null);
+};
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-widget-advanced/app/.eslintrc.json b/dist/samples/indoor-widget-advanced/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-advanced/app/.gitignore b/dist/samples/indoor-widget-advanced/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-widget-advanced/app/README.md b/dist/samples/indoor-widget-advanced/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-widget-advanced/app/env.d.ts b/dist/samples/indoor-widget-advanced/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-widget-advanced/app/index.html b/dist/samples/indoor-widget-advanced/app/index.html
new file mode 100644
index 00000000..740400e4
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Widget - Explore more widget configuration options
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-advanced/app/index.ts b/dist/samples/indoor-widget-advanced/app/index.ts
new file mode 100644
index 00000000..310b3dfd
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/index.ts
@@ -0,0 +1,57 @@
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 5,
+    },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-widget-advanced/app/package.json b/dist/samples/indoor-widget-advanced/app/package.json
new file mode 100644
index 00000000..18e0ae5d
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-widget-advanced",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-advanced/app/style.css b/dist/samples/indoor-widget-advanced/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-advanced/app/tsconfig.json b/dist/samples/indoor-widget-advanced/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-advanced/app/vite.config.js b/dist/samples/indoor-widget-advanced/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-widget-advanced/docs/index.html b/dist/samples/indoor-widget-advanced/docs/index.html
new file mode 100644
index 00000000..eb81cdeb
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Widget - Explore more widget configuration options
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-widget-advanced/docs/index.js b/dist/samples/indoor-widget-advanced/docs/index.js
new file mode 100644
index 00000000..182dcb33
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/docs/index.js
@@ -0,0 +1,39 @@
+// [START woosmap_indoor_widget_advanced]
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 5,
+  });
+
+  const conf = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_widget_advanced]
diff --git a/dist/samples/indoor-widget-advanced/docs/index.ts b/dist/samples/indoor-widget-advanced/docs/index.ts
new file mode 100644
index 00000000..05ac8754
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/docs/index.ts
@@ -0,0 +1,59 @@
+// [START woosmap_indoor_widget_advanced]
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 5,
+    },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_widget_advanced]
+
+export {};
diff --git a/dist/samples/indoor-widget-advanced/docs/style.css b/dist/samples/indoor-widget-advanced/docs/style.css
new file mode 100644
index 00000000..a9f0b4d2
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_widget_advanced] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_widget_advanced] */
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-advanced/highlight/highlight.html b/dist/samples/indoor-widget-advanced/highlight/highlight.html
new file mode 100644
index 00000000..84bd79df
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-widget-advanced/highlight/index.html b/dist/samples/indoor-widget-advanced/highlight/index.html
new file mode 100644
index 00000000..816a76e6
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Widget - Explore more widget configuration options
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-advanced/highlight/index.js b/dist/samples/indoor-widget-advanced/highlight/index.js
new file mode 100644
index 00000000..f70d1619
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/highlight/index.js
@@ -0,0 +1,37 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 5,
+  });
+
+  const conf = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-widget-advanced/highlight/index.ts b/dist/samples/indoor-widget-advanced/highlight/index.ts
new file mode 100644
index 00000000..310b3dfd
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/highlight/index.ts
@@ -0,0 +1,57 @@
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      center: { lat: 43.6066, lng: 3.9218 },
+      zoom: 5,
+    },
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-widget-advanced/highlight/style.css b/dist/samples/indoor-widget-advanced/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-advanced/iframe/index.html b/dist/samples/indoor-widget-advanced/iframe/index.html
new file mode 100644
index 00000000..1b337097
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/iframe/index.html
@@ -0,0 +1,136 @@
+
+
+  
+    Indoor Widget - Explore more widget configuration options
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-advanced/jsfiddle/demo.css b/dist/samples/indoor-widget-advanced/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-advanced/jsfiddle/demo.details b/dist/samples/indoor-widget-advanced/jsfiddle/demo.details
new file mode 100644
index 00000000..57fc875d
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Widget - Explore more widget configuration options
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-widget-advanced/jsfiddle/demo.html b/dist/samples/indoor-widget-advanced/jsfiddle/demo.html
new file mode 100644
index 00000000..57af8040
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Widget - Explore more widget configuration options
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-advanced/jsfiddle/demo.js b/dist/samples/indoor-widget-advanced/jsfiddle/demo.js
new file mode 100644
index 00000000..f70d1619
--- /dev/null
+++ b/dist/samples/indoor-widget-advanced/jsfiddle/demo.js
@@ -0,0 +1,37 @@
+let map;
+
+function initMap() {
+  map = new window.woosmap.map.Map(document.getElementById("map"), {
+    center: { lat: 43.6066, lng: 3.9218 },
+    zoom: 5,
+  });
+
+  const conf = {
+    centerMap: false,
+    defaultFloor: 3, //Render map with default floor
+    highlightPOIByRef: "tropiques",
+    venue: "wgs_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-widget-simple/app/.eslintrc.json b/dist/samples/indoor-widget-simple/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-simple/app/.gitignore b/dist/samples/indoor-widget-simple/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/indoor-widget-simple/app/README.md b/dist/samples/indoor-widget-simple/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/indoor-widget-simple/app/env.d.ts b/dist/samples/indoor-widget-simple/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/env.d.ts
@@ -0,0 +1,12 @@
+/// 
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/indoor-widget-simple/app/index.html b/dist/samples/indoor-widget-simple/app/index.html
new file mode 100644
index 00000000..7dc78f4d
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-simple/app/index.ts b/dist/samples/indoor-widget-simple/app/index.ts
new file mode 100644
index 00000000..acbadfa3
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/index.ts
@@ -0,0 +1,60 @@
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  console.log("init map");
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {},
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+
+      map.fitBounds(
+        new woosmap.map.LatLngBounds(
+          { lat: 48.88115758013444, lng: 2.3562935123187856 },
+          { lat: 48.87945292784522, lng: 2.3539262034398405 },
+        ),
+      );
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-widget-simple/app/package.json b/dist/samples/indoor-widget-simple/app/package.json
new file mode 100644
index 00000000..6c936336
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "indoor-widget-simple",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.20.0",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-simple/app/style.css b/dist/samples/indoor-widget-simple/app/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-simple/app/tsconfig.json b/dist/samples/indoor-widget-simple/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-simple/app/vite.config.js b/dist/samples/indoor-widget-simple/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/indoor-widget-simple/docs/index.html b/dist/samples/indoor-widget-simple/docs/index.html
new file mode 100644
index 00000000..704caea1
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/docs/index.html
@@ -0,0 +1,27 @@
+
+
+
+  
+    Indoor Widget
+    
+    
+
+    
+    
+  
+  
+    
+    

+      

+      
+      

+    

+    
+
+    
+  
+
+
diff --git a/dist/samples/indoor-widget-simple/docs/index.js b/dist/samples/indoor-widget-simple/docs/index.js
new file mode 100644
index 00000000..d5d477e5
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/docs/index.js
@@ -0,0 +1,42 @@
+// [START woosmap_indoor_Widget_simple]
+let map;
+
+function initMap() {
+  console.log("init map");
+  map = new window.woosmap.map.Map(document.getElementById("map"), {});
+
+  // [START woosmap_indoor_widget_simple]
+  const conf = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    map.fitBounds(
+      new woosmap.map.LatLngBounds(
+        { lat: 48.88115758013444, lng: 2.3562935123187856 },
+        { lat: 48.87945292784522, lng: 2.3539262034398405 },
+      ),
+    );
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
+// [END woosmap_indoor_widget_simple]
diff --git a/dist/samples/indoor-widget-simple/docs/index.ts b/dist/samples/indoor-widget-simple/docs/index.ts
new file mode 100644
index 00000000..c388f950
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/docs/index.ts
@@ -0,0 +1,62 @@
+// [START woosmap_indoor_Widget_simple]
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  console.log("init map");
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {},
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+
+      map.fitBounds(
+        new woosmap.map.LatLngBounds(
+          { lat: 48.88115758013444, lng: 2.3562935123187856 },
+          { lat: 48.87945292784522, lng: 2.3539262034398405 },
+        ),
+      );
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_indoor_Widget_simple]
+
+export {};
diff --git a/dist/samples/indoor-widget-simple/docs/style.css b/dist/samples/indoor-widget-simple/docs/style.css
new file mode 100644
index 00000000..ecb1d604
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/docs/style.css
@@ -0,0 +1,52 @@
+/* [START woosmap_indoor_widget_simple] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* [END woosmap_indoor_widget_simple] */
\ No newline at end of file
diff --git a/dist/samples/indoor-widget-simple/highlight/highlight.html b/dist/samples/indoor-widget-simple/highlight/highlight.html
new file mode 100644
index 00000000..41ebf792
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/highlight/highlight.html
@@ -0,0 +1,1197 @@
+
+
+  
+    Highlight
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        

+          

+            

+              

+                
+
+                
+
+                
+                
+                

+                  
+                

+              

+            

+            

+              

+                

+              

+              

+                

+              

+              

+                

+              

+              

+                

+              

+            

+          

+        

+      

+      

+        
+      

+    

+    
+  
+
diff --git a/dist/samples/indoor-widget-simple/highlight/index.html b/dist/samples/indoor-widget-simple/highlight/index.html
new file mode 100644
index 00000000..67fc91b0
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/highlight/index.html
@@ -0,0 +1,23 @@
+
+
+  
+    Indoor Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-simple/highlight/index.js b/dist/samples/indoor-widget-simple/highlight/index.js
new file mode 100644
index 00000000..0cfbc3ca
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/highlight/index.js
@@ -0,0 +1,39 @@
+let map;
+
+function initMap() {
+  console.log("init map");
+  map = new window.woosmap.map.Map(document.getElementById("map"), {});
+
+  const conf = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    map.fitBounds(
+      new woosmap.map.LatLngBounds(
+        { lat: 48.88115758013444, lng: 2.3562935123187856 },
+        { lat: 48.87945292784522, lng: 2.3539262034398405 },
+      ),
+    );
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/indoor-widget-simple/highlight/index.ts b/dist/samples/indoor-widget-simple/highlight/index.ts
new file mode 100644
index 00000000..acbadfa3
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/highlight/index.ts
@@ -0,0 +1,60 @@
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  console.log("init map");
+  map = new window.woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {},
+  );
+
+  const conf: woosmap.map.IndoorRendererOptions = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+
+  const widgetConf: woosmap.map.IndoorWidgetOptions = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener(
+    "indoor_feature_selected",
+    (feature: woosmap.map.GeoJSONFeature) => {
+      console.log("Feature: ", feature);
+    },
+  );
+
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener(
+    "indoor_venue_loaded",
+    (venue: woosmap.map.Venue) => {
+      console.log("Venue: ", venue);
+
+      map.fitBounds(
+        new woosmap.map.LatLngBounds(
+          { lat: 48.88115758013444, lng: 2.3562935123187856 },
+          { lat: 48.87945292784522, lng: 2.3539262034398405 },
+        ),
+      );
+      hideLoader();
+    },
+  );
+}
+
+const hideLoader = () => {
+  (document.querySelector(".progress") as HTMLElement).remove();
+};
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/indoor-widget-simple/highlight/style.css b/dist/samples/indoor-widget-simple/highlight/style.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/highlight/style.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-simple/iframe/index.html b/dist/samples/indoor-widget-simple/iframe/index.html
new file mode 100644
index 00000000..40c60ad4
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/iframe/index.html
@@ -0,0 +1,135 @@
+
+
+  
+    Indoor Widget
+    
+    
+
+    
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-simple/jsfiddle/demo.css b/dist/samples/indoor-widget-simple/jsfiddle/demo.css
new file mode 100644
index 00000000..6c5bbe2b
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/jsfiddle/demo.css
@@ -0,0 +1,50 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+#app {
+  height: 100%;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  height: 3px;
+  z-index: 1;
+  background-color: #3D5AFE;
+  animation: progress 2s infinite;
+}
+@keyframes progress {
+  0% {
+    width: 0;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  75% {
+    width: 0;
+    left: 100%;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
diff --git a/dist/samples/indoor-widget-simple/jsfiddle/demo.details b/dist/samples/indoor-widget-simple/jsfiddle/demo.details
new file mode 100644
index 00000000..300467df
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Indoor Widget
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/indoor-widget-simple/jsfiddle/demo.html b/dist/samples/indoor-widget-simple/jsfiddle/demo.html
new file mode 100644
index 00000000..bc0f8166
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/jsfiddle/demo.html
@@ -0,0 +1,22 @@
+
+
+  
+    Indoor Widget
+    
+    
+
+    
+  
+  
+    

+      

+      
+      

+    

+
+    
+  
+
diff --git a/dist/samples/indoor-widget-simple/jsfiddle/demo.js b/dist/samples/indoor-widget-simple/jsfiddle/demo.js
new file mode 100644
index 00000000..0cfbc3ca
--- /dev/null
+++ b/dist/samples/indoor-widget-simple/jsfiddle/demo.js
@@ -0,0 +1,39 @@
+let map;
+
+function initMap() {
+  console.log("init map");
+  map = new window.woosmap.map.Map(document.getElementById("map"), {});
+
+  const conf = {
+    defaultFloor: 0, //Render map with default floor
+    venue: "gdn_doc",
+    responsive: "desktop",
+  };
+  const widgetConf = {
+    units: "metric", // Define the distance unit for route distance calculation
+  };
+  const indoorRenderer = new woosmap.map.IndoorWidget(widgetConf, conf);
+
+  indoorRenderer.setMap(map);
+  // Indoor event that is triggered when the user click on a POI.
+  indoorRenderer.addListener("indoor_feature_selected", (feature) => {
+    console.log("Feature: ", feature);
+  });
+  // Indoor event that is triggered when the indoor venue is loaded.
+  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+    console.log("Venue: ", venue);
+    map.fitBounds(
+      new woosmap.map.LatLngBounds(
+        { lat: 48.88115758013444, lng: 2.3562935123187856 },
+        { lat: 48.87945292784522, lng: 2.3539262034398405 },
+      ),
+    );
+    hideLoader();
+  });
+}
+
+const hideLoader = () => {
+  document.querySelector(".progress").remove();
+};
+
+window.initMap = initMap;
diff --git a/dist/samples/infowindow-simple/app/package.json b/dist/samples/infowindow-simple/app/package.json
index d103c56a..dc2b11f2 100644
--- a/dist/samples/infowindow-simple/app/package.json
+++ b/dist/samples/infowindow-simple/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "infowindow-simple",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/localities-api-autocomplete-advanced/app/package.json b/dist/samples/localities-api-autocomplete-advanced/app/package.json
index 6fb3dfa6..e9c8070a 100644
--- a/dist/samples/localities-api-autocomplete-advanced/app/package.json
+++ b/dist/samples/localities-api-autocomplete-advanced/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "localities-api-autocomplete-advanced",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/localities-api-autocomplete/app/package.json b/dist/samples/localities-api-autocomplete/app/package.json
index 6abbb16a..98ea19ae 100644
--- a/dist/samples/localities-api-autocomplete/app/package.json
+++ b/dist/samples/localities-api-autocomplete/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "localities-api-autocomplete",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/localities-autocomplete/app/package.json b/dist/samples/localities-autocomplete/app/package.json
index 4165a566..094c7945 100644
--- a/dist/samples/localities-autocomplete/app/package.json
+++ b/dist/samples/localities-autocomplete/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "localities-autocomplete",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/localities-geocode/app/package.json b/dist/samples/localities-geocode/app/package.json
index 7f85be30..51e74880 100644
--- a/dist/samples/localities-geocode/app/package.json
+++ b/dist/samples/localities-geocode/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "localities-geocode",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-clustering-geojson/app/package.json b/dist/samples/map-clustering-geojson/app/package.json
index 266d09a3..ddf6dc23 100644
--- a/dist/samples/map-clustering-geojson/app/package.json
+++ b/dist/samples/map-clustering-geojson/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-clustering-geojson",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-clustering-stores/app/package.json b/dist/samples/map-clustering-stores/app/package.json
index 3a41ea7f..e762871d 100644
--- a/dist/samples/map-clustering-stores/app/package.json
+++ b/dist/samples/map-clustering-stores/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-clustering-stores",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-events/app/package.json b/dist/samples/map-events/app/package.json
index 349f8b96..d8f6a6cd 100644
--- a/dist/samples/map-events/app/package.json
+++ b/dist/samples/map-events/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-events",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-events/app/style.css b/dist/samples/map-events/app/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/map-events/app/style.css
+++ b/dist/samples/map-events/app/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/map-events/docs/style.css b/dist/samples/map-events/docs/style.css
index 2d966e2b..db61d7fb 100644
--- a/dist/samples/map-events/docs/style.css
+++ b/dist/samples/map-events/docs/style.css
@@ -4,6 +4,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/map-events/highlight/style.css b/dist/samples/map-events/highlight/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/map-events/highlight/style.css
+++ b/dist/samples/map-events/highlight/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/map-events/iframe/index.html b/dist/samples/map-events/iframe/index.html
index 940ac42f..ac43b273 100644
--- a/dist/samples/map-events/iframe/index.html
+++ b/dist/samples/map-events/iframe/index.html
@@ -88,6 +88,21 @@
         height: 100%;
         margin: 0;
         padding: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
       }
       #container {
         height: 100%;
diff --git a/dist/samples/map-events/jsfiddle/demo.css b/dist/samples/map-events/jsfiddle/demo.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/map-events/jsfiddle/demo.css
+++ b/dist/samples/map-events/jsfiddle/demo.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/map-style-lightgrey/app/package.json b/dist/samples/map-style-lightgrey/app/package.json
index bd9bcef9..63dea04c 100644
--- a/dist/samples/map-style-lightgrey/app/package.json
+++ b/dist/samples/map-style-lightgrey/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-style-lightgrey",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-style-night/app/package.json b/dist/samples/map-style-night/app/package.json
index c9486837..5b22cf94 100644
--- a/dist/samples/map-style-night/app/package.json
+++ b/dist/samples/map-style-night/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-style-night",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-style-pois/app/package.json b/dist/samples/map-style-pois/app/package.json
index 3860b538..ff0934fa 100644
--- a/dist/samples/map-style-pois/app/package.json
+++ b/dist/samples/map-style-pois/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-style-pois",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/map-style-retro/app/package.json b/dist/samples/map-style-retro/app/package.json
index 4b679941..6f7a40cb 100644
--- a/dist/samples/map-style-retro/app/package.json
+++ b/dist/samples/map-style-retro/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "map-style-retro",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/marker-click-event/app/package.json b/dist/samples/marker-click-event/app/package.json
index d8971aff..6b14f892 100644
--- a/dist/samples/marker-click-event/app/package.json
+++ b/dist/samples/marker-click-event/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "marker-click-event",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/marker-label/app/package.json b/dist/samples/marker-label/app/package.json
index 2e059cf0..1f360993 100644
--- a/dist/samples/marker-label/app/package.json
+++ b/dist/samples/marker-label/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "marker-label",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/marker-simple/app/package.json b/dist/samples/marker-simple/app/package.json
index 3faf31cc..4c87a88a 100644
--- a/dist/samples/marker-simple/app/package.json
+++ b/dist/samples/marker-simple/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "marker-simple",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-circles/app/package.json b/dist/samples/render-shapes-circles/app/package.json
index c025e05d..3221f01a 100644
--- a/dist/samples/render-shapes-circles/app/package.json
+++ b/dist/samples/render-shapes-circles/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-circles",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-data-events/app/package.json b/dist/samples/render-shapes-data-events/app/package.json
index ea957587..7d6e5491 100644
--- a/dist/samples/render-shapes-data-events/app/package.json
+++ b/dist/samples/render-shapes-data-events/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-data-events",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-data-events/app/style.css b/dist/samples/render-shapes-data-events/app/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/render-shapes-data-events/app/style.css
+++ b/dist/samples/render-shapes-data-events/app/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/render-shapes-data-events/docs/style.css b/dist/samples/render-shapes-data-events/docs/style.css
index e5383a76..bbf7cdcd 100644
--- a/dist/samples/render-shapes-data-events/docs/style.css
+++ b/dist/samples/render-shapes-data-events/docs/style.css
@@ -4,6 +4,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/render-shapes-data-events/highlight/style.css b/dist/samples/render-shapes-data-events/highlight/style.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/render-shapes-data-events/highlight/style.css
+++ b/dist/samples/render-shapes-data-events/highlight/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/render-shapes-data-events/iframe/index.html b/dist/samples/render-shapes-data-events/iframe/index.html
index dcb5e07c..be167594 100644
--- a/dist/samples/render-shapes-data-events/iframe/index.html
+++ b/dist/samples/render-shapes-data-events/iframe/index.html
@@ -99,6 +99,21 @@
         height: 100%;
         margin: 0;
         padding: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
       }
       #container {
         height: 100%;
diff --git a/dist/samples/render-shapes-data-events/jsfiddle/demo.css b/dist/samples/render-shapes-data-events/jsfiddle/demo.css
index 5c8f3341..bdb17909 100644
--- a/dist/samples/render-shapes-data-events/jsfiddle/demo.css
+++ b/dist/samples/render-shapes-data-events/jsfiddle/demo.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/render-shapes-data/app/package.json b/dist/samples/render-shapes-data/app/package.json
index 3bf245db..7039ca5f 100644
--- a/dist/samples/render-shapes-data/app/package.json
+++ b/dist/samples/render-shapes-data/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-data",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-geojson/app/package.json b/dist/samples/render-shapes-geojson/app/package.json
index 356aef6a..c4e900c1 100644
--- a/dist/samples/render-shapes-geojson/app/package.json
+++ b/dist/samples/render-shapes-geojson/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-geojson",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-polygons/app/package.json b/dist/samples/render-shapes-polygons/app/package.json
index 3cfc44dc..d2d5d3df 100644
--- a/dist/samples/render-shapes-polygons/app/package.json
+++ b/dist/samples/render-shapes-polygons/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-polygons",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/render-shapes-polylines/app/package.json b/dist/samples/render-shapes-polylines/app/package.json
index 05133c22..5258e880 100644
--- a/dist/samples/render-shapes-polylines/app/package.json
+++ b/dist/samples/render-shapes-polylines/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "render-shapes-polylines",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/store-locator-widget-baidu/app/package.json b/dist/samples/store-locator-widget-baidu/app/package.json
index 3eb2f119..4c920e0b 100644
--- a/dist/samples/store-locator-widget-baidu/app/package.json
+++ b/dist/samples/store-locator-widget-baidu/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "store-locator-widget-baidu",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/store-locator-widget-custom-filters/app/package.json b/dist/samples/store-locator-widget-custom-filters/app/package.json
index e15a38e8..21c630be 100644
--- a/dist/samples/store-locator-widget-custom-filters/app/package.json
+++ b/dist/samples/store-locator-widget-custom-filters/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "store-locator-widget-custom-filters",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/store-locator-widget-custom-renderer/app/package.json b/dist/samples/store-locator-widget-custom-renderer/app/package.json
index fb9bdb8e..ed503814 100644
--- a/dist/samples/store-locator-widget-custom-renderer/app/package.json
+++ b/dist/samples/store-locator-widget-custom-renderer/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "store-locator-widget-custom-renderer",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/store-locator-widget-events/app/package.json b/dist/samples/store-locator-widget-events/app/package.json
index d116a651..8fe1f62b 100644
--- a/dist/samples/store-locator-widget-events/app/package.json
+++ b/dist/samples/store-locator-widget-events/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "store-locator-widget-events",
   "description": "Samples for Woosmap Map JS API",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "keywords": [
     "woosmap",
     "javascript",
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/woosmap.map": "^1.4.7",
+    "@types/woosmap.map": "^1.4.8",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
diff --git a/dist/samples/store-locator-widget-events/app/style.css b/dist/samples/store-locator-widget-events/app/style.css
index 5dbdaf9c..946f830c 100644
--- a/dist/samples/store-locator-widget-events/app/style.css
+++ b/dist/samples/store-locator-widget-events/app/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/store-locator-widget-events/docs/style.css b/dist/samples/store-locator-widget-events/docs/style.css
index ff113b4c..290cd78f 100644
--- a/dist/samples/store-locator-widget-events/docs/style.css
+++ b/dist/samples/store-locator-widget-events/docs/style.css
@@ -4,6 +4,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/store-locator-widget-events/highlight/style.css b/dist/samples/store-locator-widget-events/highlight/style.css
index 5dbdaf9c..946f830c 100644
--- a/dist/samples/store-locator-widget-events/highlight/style.css
+++ b/dist/samples/store-locator-widget-events/highlight/style.css
@@ -3,6 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 #container {
diff --git a/dist/samples/store-locator-widget-events/iframe/index.html b/dist/samples/store-locator-widget-events/iframe/index.html
index 4d306b43..47344755 100644
--- a/dist/samples/store-locator-widget-events/iframe/index.html
+++ b/dist/samples/store-locator-widget-events/iframe/index.html
@@ -129,12 +129,6 @@
       O();