diff --git a/samples/demo-airport/demo-airport.json b/samples/demo-airport/demo-airport.json
new file mode 100644
index 00000000..9d4a3d66
--- /dev/null
+++ b/samples/demo-airport/demo-airport.json
@@ -0,0 +1,14 @@
+{
+ "title": "Woosmap Demo - Aiport",
+ "description": "TBD",
+ "category": "Localities",
+ "tag": "demo_airport",
+ "name": "demo-airport",
+ "callback": "initMap",
+ "pagination": {
+ "data": "mode",
+ "size": 1,
+ "alias": "mode"
+ },
+ "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}
\ No newline at end of file
diff --git a/samples/demo-airport/index.njk b/samples/demo-airport/index.njk
new file mode 100644
index 00000000..06316c39
--- /dev/null
+++ b/samples/demo-airport/index.njk
@@ -0,0 +1,109 @@
+---json
+{
+"parkings": [
+ { "ref": "p1", "name": "Parking 1 (Via Voiture)", "shortname": "Parking"},
+ { "ref": "dm", "name": "Dépose Minute (Via Taxi)", "shortname": "Dépose Minute"},
+ { "ref": "nv", "name": "Navette (Via Transport public)", "shortname": "Navette"}
+],
+"gates": [
+ { "ref": "gate21", "name": "Porte 21", "shortname": "21"},
+ { "ref": "gate22", "name": "Porte 22", "shortname": "22"},
+ { "ref": "gate23", "name": "Porte 23", "shortname": "23"},
+ { "ref": "gate24", "name": "Porte 24", "shortname": "24"},
+ { "ref": "gate25", "name": "Porte 25", "shortname": "25"},
+ { "ref": "gate26", "name": "Porte 26", "shortname": "26"},
+ { "ref": "gate27", "name": "Porte 27", "shortname": "27"},
+ { "ref": "gate28", "name": "Porte 28", "shortname": "28"},
+ { "ref": "gate29", "name": "Porte 29", "shortname": "29"}
+]
+}
+---
+{% extends '../../src/_includes/layout.njk' %}
+{% block html %}
+
+
+
+
+
+ {% svgIcon 'search.svg' %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/samples/demo-airport/index.ts b/samples/demo-airport/index.ts
new file mode 100644
index 00000000..f5ecef7c
--- /dev/null
+++ b/samples/demo-airport/index.ts
@@ -0,0 +1,616 @@
+// [START woosmap_demo_airport]
+const componentsRestriction: woosmap.map.localities.LocalitiesComponentRestrictions =
+ { country: [] };
+let parkingRef = "";
+let gateRef = "";
+let parkingName = "";
+let gateName = "";
+let startingPoint: woosmap.map.LatLngLiteral | undefined | null;
+const woosmap_key = "YOUR_API_KEY";
+let debouncedAutocomplete: (
+ ...args: any[]
+) => Promise;
+let inputElement: HTMLInputElement;
+let suggestionsList: HTMLUListElement;
+let clearSearchBtn: HTMLButtonElement;
+let map: woosmap.map.Map;
+let markerAddress: woosmap.map.Marker;
+let detailsHTML: HTMLElement;
+let routeDetailsContainer: HTMLElement;
+let directionsRenderer: woosmap.map.DirectionsRenderer;
+let directionsService: woosmap.map.DirectionsService;
+let indoorRenderer: woosmap.map.IndoorRenderer;
+let indoorService: woosmap.map.IndoorService;
+let transitService: woosmap.map.TransitService;
+let transitRenderer: woosmap.map.TransitRenderer;
+
+function initMap(): void {
+ map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+ center: {
+ lat: 48.8534,
+ lng: 2.3488,
+ },
+ disableDefaultUI: true,
+ gestureHandling: "greedy",
+ zoom: 5,
+ styles: [
+ {
+ featureType: "poi",
+ stylers: [{ visibility: "off" }],
+ },
+ ],
+ });
+ init();
+
+ manageSelector();
+
+ directionsRenderer = new woosmap.map.DirectionsRenderer();
+ directionsService = new woosmap.map.DirectionsService();
+
+ transitRenderer = new woosmap.map.TransitRenderer();
+ transitService = new woosmap.map.TransitService();
+
+
+ transitRenderer.setMap(map);
+
+ indoorMap();
+}
+
+function indoorMap() {
+
+ const originIcon = {
+ url: ``,
+ scaledSize: {
+ height: 1,
+ width: 1,
+ }
+ };
+ const directionsIcons = {
+ //destinationIcon: destinationIcon,
+ originIcon: originIcon,
+ };
+
+ const conf = {
+ defaultFloor: 0,
+ venue: "2g_leo",
+ directionsIcons: directionsIcons
+ };
+
+ indoorRenderer = new woosmap.map.IndoorRenderer(conf);
+ indoorService = new woosmap.map.IndoorService();
+
+ indoorRenderer.setMap(map);
+}
+
+function createAddressMarker(
+ addressDetail: woosmap.map.localities.LocalitiesDetailsResult
+) {
+ if (markerAddress) {
+ markerAddress.setMap(null);
+ }
+ if (addressDetail && addressDetail.geometry) {
+ markerAddress = new woosmap.map.Marker({
+ position: addressDetail.geometry.location,
+ icon: {
+ url: "https://images.woosmap.com/marker.png",
+ scaledSize: {
+ height: 59,
+ width: 37,
+ },
+ },
+ });
+ markerAddress.setMap(map);
+ panMap(addressDetail);
+ }
+}
+
+function init(): void {
+ inputElement = document.getElementById(
+ "autocomplete-input"
+ ) as HTMLInputElement;
+ suggestionsList = document.getElementById(
+ "suggestions-list"
+ ) as HTMLUListElement;
+ clearSearchBtn = document.getElementsByClassName(
+ "clear-searchButton"
+ )[0] as HTMLButtonElement;
+ routeDetailsContainer = document.querySelector(
+ ".routeDetails"
+ ) as HTMLElement;
+ detailsHTML = document.querySelector(
+ ".routeDetails .routeOptions"
+ ) as HTMLElement;
+ if (inputElement && suggestionsList) {
+ inputElement.addEventListener("input", handleAutocomplete);
+ inputElement.addEventListener("keydown", (event) => {
+ if (event.key === "Enter") {
+ const firstLi = suggestionsList.querySelector("li");
+ if (firstLi) {
+ firstLi.click();
+ }
+ }
+ });
+ }
+ clearSearchBtn.addEventListener("click", () => {
+ inputElement.value = "";
+ suggestionsList.style.display = "none";
+ clearSearchBtn.style.display = "none";
+ detailsHTML.style.display = "none";
+ inputElement.focus();
+ markerAddress.setMap(null);
+ });
+
+ debouncedAutocomplete = debouncePromise(autocompleteAddress, 0);
+}
+
+function handleAutocomplete(): void {
+ if (inputElement && suggestionsList) {
+ let input = inputElement.value;
+ input = input.replace('"', '\\"').replace(/^\s+|\s+$/g, "");
+ const componentsArgs: string = (componentsRestriction.country as string[])
+ .map((country) => `country:${country}`)
+ .join("|");
+ if (input !== "") {
+ debouncedAutocomplete(input, componentsArgs, woosmap_key)
+ .then(({ localities }) => displaySuggestions(localities))
+ .catch((error) =>
+ console.error("Error autocomplete localities:", error)
+ );
+ } else {
+ suggestionsList.style.display = "none";
+ clearSearchBtn.style.display = "none";
+ }
+ }
+}
+
+function displaySuggestions(
+ localitiesPredictions: woosmap.map.localities.LocalitiesPredictions[]
+) {
+ if (inputElement && suggestionsList) {
+ suggestionsList.innerHTML = "";
+ if (localitiesPredictions.length > 0) {
+ localitiesPredictions.forEach((locality) => {
+ const li = document.createElement("li");
+ li.innerHTML = formatPredictionList(locality) ?? "";
+ li.addEventListener("click", () => {
+ inputElement.value = locality.description ?? "";
+ requestDetailsAddress(locality.public_id);
+ suggestionsList.style.display = "none";
+ });
+ suggestionsList.appendChild(li);
+ });
+ suggestionsList.style.display = "block";
+ clearSearchBtn.style.display = "block";
+ } else {
+ suggestionsList.style.display = "none";
+ }
+ }
+}
+
+function formatPredictionList(locality): string {
+ const prediction = locality;
+ const predictionClass = "no-viewpoint";
+ const matched_substrings = prediction.matched_substrings;
+ let formatted_name = "";
+ if (
+ prediction.matched_substrings &&
+ prediction.matched_substrings.description
+ ) {
+ formatted_name = bold_matched_substring(
+ prediction["description"],
+ matched_substrings.description
+ );
+ } else {
+ formatted_name = prediction["description"];
+ }
+
+ let html = "";
+ html += `${formatted_name}
`;
+
+ return html;
+}
+
+function bold_matched_substring(string: string, matched_substrings: string[]) {
+ matched_substrings = matched_substrings.reverse();
+ for (const substring of matched_substrings) {
+ const char = string.substring(
+ substring["offset"],
+ substring["offset"] + substring["length"]
+ );
+ string = `${string.substring(
+ 0,
+ substring["offset"]
+ )}${char}${string.substring(
+ substring["offset"] + substring["length"]
+ )}`;
+ }
+ return string;
+}
+
+function autocompleteAddress(
+ input: string,
+ components: string
+): Promise {
+ const args = {
+ key: woosmap_key,
+ input,
+ no_deprecated_fields: "true",
+ types: "locality|address",
+ components,
+ };
+ if (components !== "") {
+ if (args["components"]) {
+ args["components"] = components;
+ }
+ }
+ return fetch(
+ `https://api.woosmap.com/localities/autocomplete/?${buildQueryString(args)}`
+ ).then((response) => response.json());
+}
+
+function buildQueryString(params: object) {
+ const queryStringParts = [];
+
+ for (const key in params) {
+ if (params[key]) {
+ const value = params[key];
+ queryStringParts.push(
+ `${encodeURIComponent(key)}=${encodeURIComponent(value)}` as never
+ );
+ }
+ }
+ return queryStringParts.join("&");
+}
+
+type DebouncePromiseFunction = (
+ ...args: Args
+) => Promise;
+
+function debouncePromise(
+ fn: (...args: Args) => Promise,
+ delay: number
+): DebouncePromiseFunction {
+ let timeoutId: ReturnType | null = null;
+ let latestResolve: ((value: T | PromiseLike) => void) | null = null;
+ let latestReject: ((reason?: any) => void) | null = null;
+
+ return function (...args: Args): Promise {
+ return new Promise((resolve, reject) => {
+ if (timeoutId !== null) {
+ clearTimeout(timeoutId);
+ }
+ latestResolve = resolve;
+ latestReject = reject;
+ timeoutId = setTimeout(() => {
+ fn(...args)
+ .then((result) => {
+ if (latestResolve === resolve && latestReject === reject) {
+ resolve(result);
+ }
+ })
+ .catch((error) => {
+ if (latestResolve === resolve && latestReject === reject) {
+ reject(error);
+ }
+ });
+ }, delay);
+ });
+ };
+}
+
+function manageSelector() {
+ const parkingElements = document.querySelectorAll(".parking");
+ parkingElements.forEach((parkingElement: Element) => {
+ parkingElement.addEventListener("click", () => {
+ console.log("event click: ", parkingElement);
+ parkingElements.forEach((parkingElement: Element) => {
+ parkingElement.classList.remove("active");
+ });
+ toggleParking(parkingElement);
+ calculateRoute();
+ hideDropdowns();
+ });
+ });
+
+ const gateElements = document.querySelectorAll(".gate");
+ gateElements.forEach((gateElement: Element) => {
+ gateElement.addEventListener("click", () => {
+ console.log("event click: ", gateElement);
+ gateElements.forEach((gateElement: Element) => {
+ gateElement.classList.remove("active");
+ });
+ toggleGate(gateElement);
+ calculateRoute();
+ hideDropdowns();
+ });
+ });
+
+ const dropdownButtons = document.querySelectorAll(
+ ".dropdown .dropdown-button"
+ );
+ dropdownButtons.forEach((button: Element) =>
+ button.addEventListener("click", toggleDropdown)
+ );
+
+ // Hide dropdowns when clicking outside
+ const dropdowns = document.querySelectorAll(".dropdown");
+ document.addEventListener("click", (event: Event) => {
+ dropdowns.forEach((dropdown: Element) => {
+ if (!dropdown.contains(event.target as Node)) {
+ hideDropdown(dropdown);
+ }
+ });
+ });
+}
+
+function toggleDropdown(event: Event) {
+ event.stopPropagation();
+ const dropdown = (event.target as Element).closest(".dropdown");
+ if (dropdown) {
+ if (dropdown.classList.contains("active")) {
+ hideDropdown(dropdown);
+ } else {
+ showDropdown(dropdown);
+ hideUnselectDropdowns(dropdown);
+ }
+ }
+}
+
+function hideDropdown(dropdown: Element) {
+ const dropdownContent = dropdown.querySelector(
+ ".dropdown-content"
+ ) as HTMLElement;
+ dropdownContent?.classList.remove("visible");
+ dropdown.classList.remove("active");
+}
+
+function hideDropdowns() {
+ const dropdowns = document.querySelectorAll(".dropdown");
+ document.addEventListener("click", (event: Event) => {
+ dropdowns.forEach((dropdown: Element) => {
+ hideDropdown(dropdown);
+ });
+ });
+}
+
+function hideUnselectDropdowns(selectedDropdown) {
+ const dropdowns = document.querySelectorAll(".dropdown");
+ dropdowns.forEach((dropdown: Element) => {
+ if (dropdown != selectedDropdown) {
+ hideDropdown(dropdown);
+ }
+ });
+}
+
+function showDropdown(dropdown: Element) {
+ const dropdownContent = dropdown.querySelector(
+ ".dropdown-content"
+ ) as HTMLElement;
+ dropdownContent?.classList.add("visible");
+ dropdown.classList.add("active");
+}
+
+function toggleParking(parking: Element) {
+ const isActive = parking.classList.toggle("active");
+ const parkingref = (parking as HTMLElement).dataset.parkingref;
+ const parkingname = (parking as HTMLElement).dataset.parkingname;
+
+ if (parkingref && parkingname) {
+ if (isActive) {
+ parkingRef = parkingref;
+ parkingName = parkingname;
+ } else {
+ parkingRef = "";
+ parkingName = "";
+ }
+ updateSelectorText();
+ handleAutocomplete();
+ }
+}
+
+function toggleGate(gate: Element) {
+ const isActive = gate.classList.toggle("active");
+ const gateref = (gate as HTMLElement).dataset.gateref;
+ const gatename = (gate as HTMLElement).dataset.gatename;
+
+ if (gateref && gatename) {
+ if (isActive) {
+ gateRef = gateref;
+ gateName = gatename;
+ } else {
+ gateRef = "";
+ gateName = "";
+ }
+ updateSelectorText();
+ handleAutocomplete();
+ }
+}
+
+function updateSelectorText() {
+
+ const parkingDropdownText = document.getElementById(
+ "parkingDropdownButton"
+ ) as HTMLElement;
+ if (parkingName) {
+ parkingDropdownText.textContent = parkingName;
+ } else {
+ parkingDropdownText.textContent = "Choisissez un parking";
+ }
+
+ const gateDropdownText = document.getElementById(
+ "gateDropdownButton"
+ ) as HTMLElement;
+ if (gateName) {
+ gateDropdownText.textContent = gateName;
+ } else {
+ gateDropdownText.textContent = "Choisissez une porte";
+ }
+}
+
+function requestDetailsAddress(public_id: string) {
+ getLocalitiesDetails(public_id).then(
+ (addressDetails: woosmap.map.localities.LocalitiesDetailsResponse) => {
+ displaySection(routeDetailsContainer);
+ if (addressDetails) {
+ createAddressMarker(addressDetails.result);
+ startingPoint = addressDetails.result.geometry?.location;
+ calculateRoute();
+ }
+ }
+ );
+}
+
+function displaySection(section: HTMLElement, mode = "block"): void {
+ section.style.display = mode;
+}
+
+function calculateRoute() {
+ if (startingPoint && parkingRef && gateRef) {
+
+
+ const parkingLocation = { lat: 49.0058196, lng: 2.6040213 };
+ const dropingLocation = { lat: 49.0059366, lng: 2.6031107 };
+ const transitLocation = { lat: 49.0056312, lng: 2.6029861 };
+ let waypoint = parkingLocation;
+
+ let outdoorDuration = 0;
+ let indoorDuration = 0;
+
+ if(parkingRef != "nv")
+ {
+ if(parkingRef != "p1")
+ {
+ waypoint = dropingLocation;
+ }
+ transitRenderer.setMap(null);
+ const directionsRequest = {
+ origin: startingPoint,
+ destination: waypoint,
+ provideRouteAlternatives: false,
+ travelMode: woosmap.map.TravelMode.DRIVING,
+ };
+
+ directionsService.route(directionsRequest, (result, status) => {
+ if (status === "OK") {
+ outdoorDuration = result.routes[0].legs[0].duration.value;
+ directionsRenderer.setDirections(result);
+ directionsRenderer.setMap(map);
+ fillRouteDetails(outdoorDuration, indoorDuration);
+ } else {
+ console.log("Directions request failed with status :" + status);
+ }
+ });
+ }
+ else{
+ waypoint = transitLocation;
+ directionsRenderer.setMap(null);
+ const transitRouteRequest = {
+ origin: startingPoint,
+ destination: waypoint
+ }
+ transitService.route(transitRouteRequest).then((response) => {
+ outdoorDuration = response.routes[0].duration;
+ transitRenderer.setRoutes(response.routes);
+ transitRenderer.setMap(map);
+ fillRouteDetails(outdoorDuration, indoorDuration);
+ }).catch((error) => {
+ console.error("Error calculating transit route:", error);
+ });
+ }
+
+ const origin = new woosmap.map.LatLng(waypoint.lat, waypoint.lng);
+ console.log("DEBUG", origin);
+
+ indoorService.directions(
+ {
+ venueId: "2g_leo",
+ originId: "ref:" + parkingRef,
+ destinationId: "ref:" + gateRef,
+ units: "metric",
+ },
+ (result) => {
+ indoorDuration = result.routes[0].legs[0].duration.value;
+ indoorRenderer.setDirections(result);
+ fillRouteDetails(outdoorDuration, indoorDuration);
+ }
+ );
+ fillRouteDetails(outdoorDuration, indoorDuration);
+ }
+}
+
+function panMap(addressDetail: woosmap.map.localities.LocalitiesDetailsResult) {
+ let geometry;
+ if (addressDetail && addressDetail.geometry) {
+ geometry = addressDetail.geometry;
+ }
+ if (
+ addressDetail &&
+ addressDetail.geometry &&
+ addressDetail.geometry.viewport
+ ) {
+ const { viewport } = geometry;
+ const bounds = {
+ east: viewport.northeast.lng,
+ south: viewport.southwest.lat,
+ north: viewport.northeast.lat,
+ west: viewport.southwest.lng,
+ };
+ map.fitBounds(bounds);
+ map.panTo(addressDetail.geometry.location);
+ } else {
+ let zoom = 17;
+ if (addressDetail.types[0] === "address") {
+ zoom = 18;
+ }
+ map.setZoom(zoom);
+ map.panTo(geometry.location);
+ }
+}
+
+function fillRouteDetails(outdoorDuration: number, indoorDuration: number) {
+ const details: string[] = [];
+ detailsHTML.innerHTML = "";
+ detailsHTML.style.display = "block";
+
+ const durationText = Math.trunc((outdoorDuration + indoorDuration)/3600) + " h " + Math.round((outdoorDuration + indoorDuration - Math.trunc((outdoorDuration + indoorDuration)/3600)*3600)/60) + " min"
+ const durationOutdoorText = Math.trunc(outdoorDuration/3600) + " h " + Math.round((outdoorDuration - Math.trunc(outdoorDuration/3600)*3600)/60) + " min"
+ const durationIndoorText = Math.trunc(indoorDuration/3600) + " h " + Math.round((indoorDuration - Math.trunc(indoorDuration/3600)*3600)/60) + " min"
+
+ if (true) {
+ details.push(
+ `Temps de trajet : ${durationText}
`,
+ );
+ }
+ if (true) {
+ details.push(
+ `Outdoor : ${durationOutdoorText}
`,
+ );
+ details.push(
+ `Indoor : ${durationIndoorText}
`,
+ );
+ }
+ detailsHTML.innerHTML = details.join("");
+}
+
+function getLocalitiesDetails(
+ publicId: string
+): Promise {
+ const args = {
+ key: woosmap_key,
+ public_id: publicId,
+ };
+ return fetch(
+ `https://api.woosmap.com/localities/details/?${buildQueryString(args)}`
+ ).then((response) => response.json());
+}
+
+declare global {
+ interface Window {
+ initMap: () => void;
+ }
+}
+window.initMap = initMap;
+
+// [END woosmap_demo_airport]
+
+export {};
diff --git a/samples/demo-airport/style.scss b/samples/demo-airport/style.scss
new file mode 100644
index 00000000..238dbdb3
--- /dev/null
+++ b/samples/demo-airport/style.scss
@@ -0,0 +1,224 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_demo_airport] */
+@include meta.load-css("../../shared/scss/_default.scss");
+@include meta.load-css("../../shared/scss/_autocomplete_input.scss");
+@include meta.load-css("../../shared/scss/_autocomplete_list.scss");
+@include meta.load-css("../../shared/scss/_dropdown.scss");
+@import "../../shared/scss/mixins.scss";
+
+#app {
+ height: 100%;
+ font-size: 13px;
+}
+
+body {
+ background-color: #eee;
+ overflow-y: hidden;
+}
+
+.bold {
+ font-weight: 700;
+}
+
+#poiSelector {
+ position: absolute;
+ top: 10px;
+ left: 335px;
+ width: 200px;
+}
+
+#parkingDropdownButton {
+ width: 200px;
+}
+
+#gateDropdownButton {
+ width: 200px;
+}
+
+#poiSelector2 {
+ position: absolute;
+ top: 10px;
+ left: 540px;
+ width: 200px;
+}
+
+
+
+.parking {
+ .parking-name {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ .active-icon-wrapper {
+ display: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.054 8.958 3.65 6.555A2.112 2.112 0 1 0 .663 9.543l3.86 3.86a2.11 2.11 0 0 0 2.054.543c.38-.084.74-.274 1.033-.568l7.77-7.77a2.114 2.114 0 0 0-2.987-2.99l-6.34 6.34z'%3E%3C/path%3E%3C/svg%3E");
+ height: 10px;
+ width: 10px;
+ background-position: 50%;
+ background-size: contain;
+ }
+
+ &.active {
+ .active-icon-wrapper {
+ display: flex;
+ }
+ }
+}
+
+.gate {
+ .gate-name {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ .active-icon-wrapper {
+ display: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.054 8.958 3.65 6.555A2.112 2.112 0 1 0 .663 9.543l3.86 3.86a2.11 2.11 0 0 0 2.054.543c.38-.084.74-.274 1.033-.568l7.77-7.77a2.114 2.114 0 0 0-2.987-2.99l-6.34 6.34z'%3E%3C/path%3E%3C/svg%3E");
+ height: 10px;
+ width: 10px;
+ background-position: 50%;
+ background-size: contain;
+ }
+
+ &.active {
+ .active-icon-wrapper {
+ display: flex;
+ }
+ }
+}
+
+.country {
+ .country-name {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ .flag-icon {
+ height: 20px;
+ width: 20px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ margin-right: 8px;
+
+ &-fr {
+ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/flags/4x3/fr.svg);
+ }
+
+ &-gb {
+ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/flags/4x3/gb.svg);
+ }
+ }
+
+ .active-icon-wrapper {
+ display: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.054 8.958 3.65 6.555A2.112 2.112 0 1 0 .663 9.543l3.86 3.86a2.11 2.11 0 0 0 2.054.543c.38-.084.74-.274 1.033-.568l7.77-7.77a2.114 2.114 0 0 0-2.987-2.99l-6.34 6.34z'%3E%3C/path%3E%3C/svg%3E");
+ height: 10px;
+ width: 10px;
+ background-position: 50%;
+ background-size: contain;
+ }
+
+ &.active {
+ .active-icon-wrapper {
+ display: flex;
+ }
+ }
+}
+
+.routeDetails {
+ display: none;
+ position: absolute;
+ right: 10px;
+ bottom: 25px;
+ border-radius: 6px;
+ max-width: 240px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
+ z-index: 1;
+ overflow: hidden;
+
+ .info {
+ padding: 12px 16px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ background-color: #fff;
+ }
+
+ .routeOptions {
+ overflow-y: auto;
+ max-height: 240px;
+ font-size: 12px;
+ padding-top: 12px;
+ background-color: #fff;
+
+ .option-detail {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 12px 8px 12px;
+ margin: 0;
+
+ &-label {
+ color: rgba(0, 0, 0, 0.5);
+ margin-right: 4px;
+ }
+ }
+ }
+}
+
+.addressDetails {
+ display: none;
+ position: absolute;
+ right: 10px;
+ bottom: 25px;
+ border-radius: 6px;
+ max-width: 240px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
+ z-index: 1;
+ overflow: hidden;
+
+ .info {
+ padding: 12px 16px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ background-color: #fff;
+ }
+
+ .addressOptions {
+ overflow-y: auto;
+ max-height: 240px;
+ font-size: 12px;
+ padding-top: 12px;
+ background-color: #fff;
+
+ .option-detail {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 12px 8px 12px;
+ margin: 0;
+
+ &-label {
+ color: rgba(0, 0, 0, 0.5);
+ margin-right: 4px;
+ }
+ }
+ }
+}
+
+.address-components {
+ padding: 0 0 18px 0;
+ background-color: rgba(0, 0, 0, 0.03);
+}
+
+.address-components .title {
+ color: rgba(0, 0, 0, 0.5);
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ padding: 16px 12px 10px 12px;
+}
+
+/* [END woosmap_demo_airport] */
diff --git a/samples/samples.11tydata.js b/samples/samples.11tydata.js
index 3a12cf07..4a2a2306 100644
--- a/samples/samples.11tydata.js
+++ b/samples/samples.11tydata.js
@@ -3,7 +3,7 @@ const _ = require("lodash");
const data = {
..._.pick(
{
- WOOSMAP_PUBLIC_API_KEY: "woos-48c80350-88aa-333e-835a-07f4b658a9a4",
+ WOOSMAP_PUBLIC_API_KEY: "woos-4fdc8f8d-e161-3fb8-9a57-e1759c71716a",
...process.env,
},
["WOOSMAP_PUBLIC_API_KEY"],