Reuse the same region geometry when only changing category.

TODO.md

@@ -4,7 +4,7 @@
 - [x] Update screenshots to WhereRoulette logo.
 - [x] Add a favicon.
 - [x] Add a button to spin the wheel.
-- [] Add filter for different types of POIs.
+- [x] Add filter for different types of POIs.
 - [] Handle settlement types with no polygon types.
 - [] Improve logo, no AI weirdness and put "Where Roulette" in the number places.
 - [x] Add sound effect of roulette wheel spinning.
@@ -47,4 +47,13 @@
         - display using opening_hours.js
 - [] Add call to action to add more info to the POI when its incomplete.
 - [ ] When there is an option, divide the area into different neighborhoods. Then, spin for the neighborhood and further spin for the POI. Add cool animations.
-- [] filter out "undefined" results. These are nodes which have no name ect..
+- [] filter out "undefined" results. These are nodes which have no name ect..
+- [] Add other types of POI except for Points/Nodes.
+- [] Fix overpass query (right now "public_bookshelf" gets returned from the ).
+- [] Add overature places
+- [] Add overature regions
+- [] Add "open now" option.
+- [] Add more filtering options (eg: cuisine...)
+- [] Add mapillary images for the choosen POI.
+- [] Add [lib.reviews](https://lib.reviews/faq)
+- [] Add way to mute the sound.

app/src/index.html

@@ -154,6 +154,7 @@
     }
 
     .spin-button {
+      max-width: 200px;
       display: none;
       position: absolute;
       bottom: 20px;
@@ -180,6 +181,7 @@
     }
 
     .reveal-button {
+      max-width: 200px;
       display: none;
       position: absolute;
       bottom: 20px;

app/src/main.ts

@@ -7,7 +7,8 @@ import { fetchNominatimRelationData, fetchPoisInRelation } from "./overpass";
 import { confetti } from "@tsparticles/confetti"
 
 let selectedFeatureId: string | null = null;
-let selectedRegion: string | null = null;
+let selectedRegionId: string | null = null;
+let selectedRegionFeature: Feature | null = null;
 let boundingBox: [number, number, number, number] | null = null;
 // default selectedCategory is drinks
 let selectedCategory: string = "drinks";
@@ -22,15 +23,15 @@ export const categories: { [key: string]: { tag: string; emoji: string } } = {
 
 
 function updateUrlWithState() {
-  console.log('Updating URL with state selectedFeatureId:', selectedFeatureId, 'selectedRegion:', selectedRegion, "type:", selectedCategory);
+  console.log('Updating URL with state selectedFeatureId:', selectedFeatureId, 'selectedRegion:', selectedRegionId, "type:", selectedCategory);
   const queryParams = new URLSearchParams(window.location.search);
   if (selectedFeatureId) {
     queryParams.set('id', selectedFeatureId);
   } else {
     queryParams.delete('id');
   }
-  if (selectedRegion) {
-    queryParams.set('region', selectedRegion);
+  if (selectedRegionId) {
+    queryParams.set('region', selectedRegionId);
   } else {
     queryParams.delete('region');
   }
@@ -47,7 +48,7 @@ function updateUrlWithState() {
 async function restoreStateFromUrl() {
   const queryParams = new URLSearchParams(window.location.search);
   selectedFeatureId = queryParams.get('id');
-  selectedRegion = queryParams.get('region');
+  selectedRegionId = queryParams.get('region');
   // check if the type object is a key in the categories object and if not use the default value and log an error
   // check for a type parameter in the URL and if not use the default value and log an error
   if (queryParams.has('type')) {
@@ -60,8 +61,8 @@ async function restoreStateFromUrl() {
   }
   filterControl.updateFilterControlIcon(selectedCategory);
 
-  if (selectedRegion) {
-    pois = await fetchPoisForCurrentArea();
+  if (selectedRegionId) {
+    pois = await fetchPoisForAreaID(Number(selectedRegionId));
     if (selectedFeatureId) {
       // get some user input to avoid the error: `Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.`
       // The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
@@ -82,8 +83,24 @@ async function restoreStateFromUrl() {
 }
 
 
+async function fetchPoisForAreaID(selectedRegionId: number): Promise<FeatureCollection> {
+  const area = await fetchNominatimRelationData(selectedRegionId);
+  boundingBox = area.bbox;
+  if (boundingBox) {
+    recenterMapOnRegion();
+  }
+  const pois = await processArea(area);
+  return pois;
+}
+
 async function fetchPoisForCurrentArea(): Promise<FeatureCollection> {
-  const area = await fetchNominatimRelationData(Number(selectedRegion));
+  if (!selectedRegionFeature) {
+    console.error('No selected region geometry found');
+    return {} as FeatureCollection<Geometry, GeoJsonProperties>;
+  }
+  const area = selectedRegionFeature;
+  // TODO: fix this and don't ignore it!
+  // @ts-ignore
   boundingBox = area.bbox;
   if (boundingBox) {
     recenterMapOnRegion();
@@ -196,7 +213,7 @@ geocoderControl.on('result', async (event: any) => {
   hideSpinButton();
   clearBoundary();
   clearPoints();
-  selectedRegion = event.result.properties.osm_id;
+  selectedRegionId = event.result.properties.osm_id;
   resetselectedFeature();
   updateUrlWithState();
   processArea(event.result);
@@ -205,6 +222,7 @@ geocoderControl.on('result', async (event: any) => {
 
 async function processArea(carmen: any): Promise<FeatureCollection<Geometry, GeoJsonProperties>> {
   hideAllContainers()
+  console.log('Processing area:', carmen.place_name);
   // result geo could be a point, polygon, or multiline polygon.
   // In this first version, we will only handle polygons and log the rest... #MVP
   if (carmen.geometry.type !== 'Polygon' && carmen.geometry.type !== 'MultiPolygon') {
@@ -222,13 +240,22 @@ async function processArea(carmen: any): Promise<FeatureCollection<Geometry, Geo
   }
   boundingBox = carmen.bbox;
   displayBoundaryOnMap(carmen.geometry)
-  selectedRegion = carmen.properties.osm_id;
+  selectedRegionFeature = carmen
+  selectedRegionId = carmen.properties.osm_id;
   console.log('Fetching pois for category:', selectedCategory, categories[selectedCategory].emoji);
   pois = await fetchPoisInRelation(carmen.properties.osm_id, selectedCategory);
   displayPointsOnMap(pois);
   return pois;
 }
 
+async function loadingPoisInRealtion(relationID: string, category: string) {
+  // show loading spinner
+
+  // fetch pois
+  pois = await fetchPoisInRelation(relationID, category)
+  displayPointsOnMap(pois)
+}
+
 const shareControl = new ShareControl("https://whereroulette.com", "Spin the wheel!", "WhereRoulette helps you choose a place to meet! 🌍 Powered by OSM ❤️‍🔥")
 map.addControl(geocoderControl, "top-right");
 map.addControl(new CustomAttributionControl({ compact: true }), "bottom-right");
@@ -247,8 +274,8 @@ document.getElementById("spin-button")?.addEventListener("click", async () => {
   const selectedPOI = await spinTheWheel(pois);
   selectedFeatureId = selectedPOI.properties?.id;
   updateUrlWithState();
-  console.log('Selected POI:', selectedPOI?.properties?.name);
   reveal(selectedPOI)
+  console.log('Selected POI:', selectedPOI?.properties?.name);
 })
 
 document.getElementById("reveal-button")?.addEventListener("click", async () => {
@@ -262,8 +289,8 @@ document.getElementById("reveal-button")?.addEventListener("click", async () =>
   }
   hideRevealButton();
   const selectedPOI = await spinTheRiggedWheel(selectedFeatureId, pois);
-  console.log('Selected POI:', selectedPOI.properties?.name);
   reveal(selectedPOI)
+  console.log('Selected POI:', selectedPOI.properties?.name);
 })
 
 document.getElementById("info-close-button")?.addEventListener("click", async () => {
@@ -470,8 +497,8 @@ export async function updateSelectedCategory(category: string) {
   }
   selectedCategory = category;
   console.log('Updating for category:', category);
-  if (selectedRegion) {
-    fullReload()
+  if (selectedRegionId) {
+    reload()
   }
   updateUrlWithState();
 }
@@ -507,21 +534,23 @@ function celebrate() {
   });
 }
 
-export function reload() {
+export function resetSpin() {
   // Resets the map state to spin the wheel again for the current region
   console.log('Reloading the wheel ready to spin again... 🔄');
   hideSpinButton();
+  hideRevealButton();
   resetselectedFeature();
   updateUrlWithState();
   recenterMapOnRegion();
   hideAllContainers();
   showSpinButton();
 }
 
-export async function fullReload() {
+export async function reload() {
   // Resets the map state and fetches new POIs based on the selectedCategory for the current region
   console.log('Full Reloading... fetching pois for new category:', categories[selectedCategory].emoji);
   hideSpinButton();
+  hideRevealButton();
   clearPoints();
   resetselectedFeature();
   hideAllContainers();
@@ -539,6 +568,7 @@ async function reveal(selectedFeature: Feature<Geometry, GeoJsonProperties>): Pr
   hideAllContainers();
   showResults(selectedFeature);
   if (selectedFeature.geometry.type === 'Point') {
+    // TODO: handle other geometries
     const coordinates = selectedFeature.geometry.coordinates
     map.flyTo({
       center: coordinates as [number, number],

app/src/overpass.ts

@@ -25,15 +25,15 @@ export function pubsInRelationQuery(relationID: number): string {
   return `[out:json];node(area:${relationID + 3600000000})["amenity"="pub"];out geom;`;
 }
 
-export function poisInRelationQuery(relationID: number, poiType: string): string {
+export function poisInRelationQuery(relationID: number, category: string): string {
   // use the categories object to get the correct tag to use in the query
   // export const categories = {
   //   "drinks": { "tag": '"amenity"~"pub|bar|biergarten"', "emoji": "🍺" },
   //   "cafe": { "tag": '"amenity"~"cafe"', "emoji": "☕" },
   //   "food": { "tag": '"amenity"~"restaurant|fast_food|food_court|ice_cream"', "emoji": "🍴" },
   //   "parks": { "tag": '"leisure"~"park|garden"', "emoji": "🌳" },
   // }
-  const query = `[out:json];node(area:${relationID + 3600000000})[${categories[poiType].tag}];out geom;`;
+  const query = `[out:json];node(area:${relationID + 3600000000})[${categories[category].tag}];out geom;`;
   return query;
 }
 
@@ -49,8 +49,8 @@ export async function fetchPubsInRelation(relationID: number) {
   return fc;
 }
 
-export async function fetchPoisInRelation(relationID: string, poiType: string) {
-  const query = poisInRelationQuery(parseInt(relationID), poiType);
+export async function fetchPoisInRelation(relationID: string, category: string) {
+  const query = poisInRelationQuery(parseInt(relationID), category);
   const osmData = await fetchOverpassData(query);
   const fc = parseOSMToGeoJSON(osmData)
   fc.features.forEach((feature, index) => {

app/src/ui.ts

@@ -2,7 +2,7 @@ import { library, icon } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion, faShareNodes, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import maplibregl from "maplibre-gl";
 import { Feature, Geometry, GeoJsonProperties } from "geojson";
-import { updateSelectedCategory, reload } from "./main";
+import { updateSelectedCategory, resetSpin } from "./main";
 
 // register the icons with the library for future use
 library.add(faQuestion, faShareNodes, faSpinner);
@@ -298,7 +298,7 @@ export function showResults(feature: Feature<Geometry, GeoJsonProperties>) {
   spinAgainButton.className = "spin-again-button";
   spinAgainButton.innerHTML = "Spin Again";
   spinAgainButton.onclick = () => {
-    reload();
+    resetSpin();
   };
   resultsContainer.appendChild(spinAgainButton);