From fb422bbcb0c26c11a4bea3716c3766442fc58100 Mon Sep 17 00:00:00 2001 From: Leo PERNELLE Date: Tue, 7 Jan 2025 17:27:02 +0100 Subject: [PATCH] feat: minor changes based en feedbacks --- samples/localities-search/index.njk | 4 +- samples/localities-search/index.ts | 85 +++++++++++++++------------- samples/localities-search/style.scss | 4 +- 3 files changed, 50 insertions(+), 43 deletions(-) diff --git a/samples/localities-search/index.njk b/samples/localities-search/index.njk index fcc6a071..62f41209 100644 --- a/samples/localities-search/index.njk +++ b/samples/localities-search/index.njk @@ -15,8 +15,8 @@ -
-
+
+
diff --git a/samples/localities-search/index.ts b/samples/localities-search/index.ts index c60e9aaa..9eecd287 100644 --- a/samples/localities-search/index.ts +++ b/samples/localities-search/index.ts @@ -6,7 +6,7 @@ let localitiesService: woosmap.map.LocalitiesService; let debouncedLocalitiesSearch: (...args: any[]) => Promise; let input: string; let detailsHTML: HTMLElement; -let addressDetailsContainer: HTMLElement; +let detailsResultContainer: HTMLElement; const woosmap_key = "YOUR_API_KEY"; @@ -16,6 +16,17 @@ function initMap(): void { { center: { lat: 51.507445, lng: -0.127765 }, zoom: 8, + styles: [ + { + featureType: "point_of_interest", + elementType: "all", + stylers: [ + { + visibility: "on", + }, + ], + }, + ], } ); infoWindow = new woosmap.map.InfoWindow({}); @@ -26,7 +37,7 @@ function initMap(): void { const fetchLocalitiesSearch = async (input: any): Promise => { const center = map.getCenter(); - const radius = (map.getZoom() > 10) ? "10000" : "100000" + const radius = map.getZoom() > 10 ? (map.getZoom() > 14 ? "1000" : "10000") : "100000"; try { const response = await fetch( ` @@ -39,35 +50,33 @@ https://api.woosmap.com/localities/search?types=point_of_interest|locality|admin } }; -function fillAddressDetails( - addressDetails: any -) { +function fillDetailsResult(detailsResult: any) { const details: string[] = []; detailsHTML.innerHTML = ""; detailsHTML.style.display = "block"; - if (addressDetails.formatted_address) { + if (detailsResult.formatted_address) { details.push( - `

Formatted_address:${addressDetails.formatted_address}

` + `

Formatted_address:${detailsResult.formatted_address}

` ); - } else if (addressDetails.name) + } else if (detailsResult.name) details.push( - `

Name:${addressDetails.name}

` + `

Name:${detailsResult.name}

` ); - if (addressDetails.types && addressDetails.types[0]) { + if (detailsResult.types && detailsResult.types[0]) { details.push( - `

Type: ${addressDetails.types[0]}

` + `

Type: ${detailsResult.types[0]}

` ); } - if (addressDetails.categories) + if (detailsResult.categories) details.push( - `

Categories:${addressDetails.categories[0]}

` + `

Categories:${detailsResult.categories[0]}

` ); - if (addressDetails.geometry) { + if (detailsResult.geometry) { details.push( - `
Latitude: ${addressDetails.geometry.location.lat.toString()}
Longitude: ${addressDetails.geometry.location.lng.toString()}
` + `
Latitude: ${detailsResult.geometry.location.lat.toString()}
Longitude: ${detailsResult.geometry.location.lng.toString()}
` ); - if (addressDetails.address_components) { - const compoHtml = addressDetails.address_components + if (detailsResult.address_components) { + const compoHtml = detailsResult.address_components .map( (compo) => `

${compo.types.find((item) => item.includes("division")) || compo.types[0]}: ${compo.long_name}

` @@ -90,11 +99,11 @@ const suggestionsList = document.getElementById( const clearSearchBtn = document.getElementsByClassName( "clear-searchButton" )[0] as HTMLButtonElement; -addressDetailsContainer = document.querySelector( - ".addressDetails" +detailsResultContainer = document.querySelector( + ".detailsResult" ) as HTMLElement; detailsHTML = document.querySelector( - ".addressDetails .addressOptions" + ".detailsResult .detailsOptions" ) as HTMLElement; if (inputElement && suggestionsList) { inputElement.addEventListener("input", handleAutocomplete); @@ -123,7 +132,7 @@ function handleAutocomplete(): void { input = inputElement.value; if (input) { debouncedLocalitiesSearch(input) - .then((localities) => displaySuggestions(localities)) + .then((results) => displaySuggestions(results)) .catch((error) => console.error("Error autocomplete localities:", error) ); @@ -137,7 +146,7 @@ function handleAutocomplete(): void { function handleDetails(publicId: string) { localitiesService .getDetails({ publicId }) - .then((locality) => displayLocality(locality.result)) + .then((response) => displayResult(response.result)) .catch((error) => console.error("Error getting locality details:", error)); } @@ -145,18 +154,16 @@ function displaySection(section: HTMLElement, mode = "block"): void { section.style.display = mode; } -function displayLocality( - locality: woosmap.map.localities.LocalitiesDetailsResult -) { - fillAddressDetails(locality); - displaySection(addressDetailsContainer); +function displayResult(result: woosmap.map.localities.LocalitiesDetailsResult) { + fillDetailsResult(result); + displaySection(detailsResultContainer); if (marker) { marker.setMap(null); infoWindow.close(); } - if (locality?.geometry) { + if (result?.geometry) { marker = new woosmap.map.Marker({ - position: locality.geometry.location, + position: result.geometry.location, icon: { url: "https://images.woosmap.com/marker.png", scaledSize: { @@ -167,10 +174,10 @@ function displayLocality( }); marker.setMap(map); infoWindow.setContent( - `${locality.formatted_address ?? locality.name}` + `${result.formatted_address ?? result.name}` ); infoWindow.open(map, marker); - map.flyTo({ center: locality.geometry.location, zoom: 14 }); + map.flyTo({ center: result.geometry.location, zoom: 14 }); } } @@ -179,30 +186,30 @@ function displaySuggestions(localitiesPredictions: any) { if (inputElement && suggestionsList) { suggestionsList.innerHTML = ""; if (localitiesPredictions.results.length > 0 && input) { - localitiesPredictions.results.forEach((locality) => { + localitiesPredictions.results.forEach((result) => { const li = document.createElement("li"); const title = document.createElement("div"); const desc = document.createElement("span"); - title.textContent = locality.title ?? ""; + title.textContent = result.title ?? ""; title.className = "localities-search-title"; - desc.textContent = locality.description ?? ""; + desc.textContent = result.description ?? ""; desc.className = "localities-search-description"; li.addEventListener("click", () => { - inputElement.value = locality.title ?? ""; + inputElement.value = result.title ?? ""; suggestionsList.style.display = "none"; - handleDetails(locality.public_id); + handleDetails(result.public_id); }); suggestionsList.appendChild(li); li.appendChild(title); title.appendChild(desc); - if (locality.categories) { + if (result.categories) { const category = document.createElement("span"); - category.textContent = locality.categories[0]; + category.textContent = result.categories[0]; category.className = "localities-search-category"; title.appendChild(category); } else { const type = document.createElement("span"); - type.textContent = locality.types[0]; + type.textContent = result.types[0]; type.className = "localities-search-type"; title.appendChild(type); } diff --git a/samples/localities-search/style.scss b/samples/localities-search/style.scss index 4ddc5753..7b7368b1 100644 --- a/samples/localities-search/style.scss +++ b/samples/localities-search/style.scss @@ -37,7 +37,7 @@ } -.addressDetails { +.detailsResult { display: none; position: absolute; right: 10px; @@ -54,7 +54,7 @@ background-color: #fff; } - .addressOptions { + .detailsOptions { overflow-y: auto; max-height: 240px; font-size: 12px;