Merge pull request #78 from Woosmap/dev/localities-nearby

feat: nearby - improve the demo for updating center and radius

samples/localities-nearby-poi/index.njk

@@ -11,7 +11,7 @@
                 </div>
                 <div class="sectionHeader"><span>Radius</span></div>
                 <div class="radius__container">
-                    <input type="range" id="radius" min="10" max="50000" value="1000"><label id="radius-label" for="radius">1&thinsp;km</label>
+                    <input type="range" id="radius" min="100" max="10000" value="1000" step="100"><label id="radius-label" contenteditable="true">1&thinsp;km</label>
                 </div>
 
                 <div class="sectionHeader"><span>Results</span> <span is="pagination"><button id="page-previous" disabled>&#8249;</button><button id="page-next" disabled>&#8250;</button></span></div>

samples/localities-nearby-poi/index.ts

@@ -134,6 +134,10 @@ function initMap() {
   );
   localitiesService = new woosmap.map.LocalitiesService();
 
+  map.addListener("click", (e) => {
+    handleRadius(nearbyRequest.radius || 1000, e.latlng);
+  });
+
   autocompleteRequest = {
     input: "",
     types: ["locality", "postal_code"],
@@ -214,7 +218,8 @@ function handleRadius(
     18 - (Math.log(radiusValue / 10) / Math.log(50000 / 10)) * (18 - 7),
   );
   map.flyTo({ center: center || nearbyCircle.getCenter(), zoom: zoomLevel });
-  performNearbyRequest();
+  nearbyRequest.radius = radiusValue;
+  performNearbyRequest(new woosmap.map.LatLng(center || nearbyCircle.getCenter()));
 }
 
 function initUI() {
@@ -252,11 +257,7 @@ function performNearbyRequest(
   newQuery = true,
 ) {
   const requestCenter = overrideCenter || map.getCenter();
-  const radiusElement = document.getElementById("radius") as HTMLInputElement;
   nearbyRequest.location = requestCenter;
-  nearbyRequest.radius = radiusElement
-    ? parseInt(radiusElement.value)
-    : 1000;
   nearbyRequest.categories = "";
   if (categories.size > 0) {
     nearbyRequest.categories = Array.from(categories).join("|");
@@ -265,6 +266,17 @@ function performNearbyRequest(
     nearbyRequest.page = 1;
   }
 
+  results.innerHTML = "";
+
+  if (nearbyRequest.radius && nearbyRequest.radius > 50000) {
+    results.innerHTML = "<li style='color: red;'><b>Radius should be less than or equal to 50km.</b></li>";
+    return;
+  }
+  else if (nearbyRequest.radius && nearbyRequest.radius < 10) {
+    results.innerHTML = "<li style='color: red;'><b>Radius should be greater than or equal to 10m.</b></li>";
+    return;
+  }
+
   //@ts-ignore
   localitiesService.nearby(nearbyRequest).then((responseJson) => {
     drawNearbyZone(requestCenter, nearbyRequest.radius);
@@ -302,8 +314,6 @@ function updatePagination(pagination: woosmap.map.localities.LocalitiesNearbyPag
 }
 
 function updateResults(response: woosmap.map.localities.LocalitiesNearbyResponse, center) {
-  results.innerHTML = "";
-
   updatePagination(response.pagination);
   response.results.forEach((result:woosmap.map.localities.LocalitiesNearbyResult) => {
     const distance = measure(
@@ -461,6 +471,54 @@ function debounce(func: (...args: any[]) => void, wait: number) {
   };
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+  const radiusInput = document.getElementById('radius') as HTMLInputElement;
+  const radiusLabel = document.getElementById('radius-label') as HTMLLabelElement;
+
+  if (!radiusInput || !radiusLabel) {
+      console.error('Elements not found in the DOM.');
+      return;
+  }
+
+  // Update the range input when the label content is modified
+  radiusLabel.addEventListener('blur', () => {
+      const parsedValue = parseLabel(radiusLabel.textContent || '');
+      if (parsedValue !== null) {
+          radiusInput.value = parsedValue.toString();
+          handleRadius(parsedValue)
+      } else {
+          // Revert to the current range value if parsing fails
+          radiusLabel.textContent = formatValue(parseInt(radiusInput.value, 10));
+      }
+  });
+
+  radiusLabel.addEventListener('keypress', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+          e.preventDefault(); // Prevent line breaks
+          radiusLabel.blur(); // Trigger the blur event to validate and update
+      }
+  });
+
+  // Format the value in meters to "km" or "m" for display
+  const formatValue = (value: number): string => {
+      return value >= 1000 ? `${value / 1000} km` : `${value} m`;
+  };
+
+  // Parse the label content back to meters
+  const parseLabel = (label: string): number | null => {
+      const kmMatch = label.match(/^(\d+(?:\.\d+)?)\s*km$/i);
+      const mMatch = label.match(/^(\d+)\s*m$/i);
+
+      if (kmMatch) {
+          return Math.round(parseFloat(kmMatch[1]) * 1000); // Convert km to meters
+      } else if (mMatch) {
+          return parseInt(mMatch[1], 10); // Keep value in meters
+      }
+      return null; // Invalid input
+  };
+});
+
+
 declare global {
   interface Window {
     initMap: () => void;

samples/localities-nearby-poi/style.scss

@@ -153,4 +153,13 @@ ol#results {
   }
 }
 
+#radius {
+  flex: 1; /* Take all remaining space */
+}
+
+#radius-label {
+    border: 1px dashed #ccc;
+    outline: none;
+}
+
 /* [END woosmap_localities_nearby_poi] */