Add viewbox-bounded search and enable Dutch quick-search chips

- Pass the currently visible map bounds as a Nominatim viewbox so
  results are restricted to what the user can see (bounded=1).
- Increase default result limit from 8 to 20.
- Enable the quick-search chip row with localized Dutch labels
  (Supermarkt, Café, Kroeg, Camping, Park, Restaurant, Vegan,
  Hotel, Parkeerplek).

app.py

@@ -60,13 +60,34 @@ def search():
     params = {
         "q": query,
         "format": "jsonv2",
-        "limit": 8,
+        "limit": 20,
         "addressdetails": 1,
         "extratags": 1,
         "namedetails": 1,
         "dedupe": 1,
     }
 
+    # Restrict results to the area currently visible on the map.
+    # Expected format: "left,top,right,bottom" (lon,lat pairs).
+    viewbox = request.args.get("viewbox", "").strip()
+
+    if viewbox:
+        parts = [p.strip() for p in viewbox.split(",")]
+
+        if len(parts) == 4:
+            try:
+                left, top, right, bottom = (
+                    float(p) for p in parts
+                )
+
+                params["viewbox"] = "{},{},{},{}".format(
+                    left, top, right, bottom
+                )
+                params["bounded"] = 1
+
+            except ValueError:
+                pass
+
     try:
         results = nominatim_request(
             NOMINATIM_SEARCH_URL,

templates/index.html

@@ -699,51 +699,72 @@
 
 <div class="bottom-ui">
 
-    <!--<div class="chips">
+    <div class="chips">
 
         <button
             class="chip"
-            data-search="restaurants"
+            data-search="supermarket"
         >
-            🍴 Restaurants
+            🛒 Supermarkt
         </button>
 
         <button
             class="chip"
-            data-search="hotels"
+            data-search="cafe"
         >
-            🛏 Hotels
+            ☕ Café
         </button>
 
         <button
             class="chip"
-            data-search="attractions"
+            data-search="pub"
         >
-            📷 Attractions
+            🍺 Kroeg
         </button>
 
         <button
             class="chip"
-            data-search="museums"
+            data-search="camping"
         >
-            🏛 Museums
+            ⛺ Camping
         </button>
 
         <button
             class="chip"
-            data-search="public transport"
+            data-search="park"
         >
-            🚆 Public transport
+            🌳 Park
         </button>
 
         <button
             class="chip"
-            data-search="pharmacies"
+            data-search="restaurant"
         >
-            💊 Pharmacies
+            🍴 Restaurant
         </button>
 
-    </div>-->
+        <button
+            class="chip"
+            data-search="vegan restaurant"
+        >
+            🥗 Vegan
+        </button>
+
+        <button
+            class="chip"
+            data-search="hotel"
+        >
+            🛏 Hotel
+        </button>
+
+        <button
+            class="chip"
+            data-search="parking"
+        >
+            🅿️ Parkeerplek
+        </button>
+
+    </div>
 
 
     <div class="search-box">
@@ -944,6 +965,18 @@
         clearMarkers();
 
 
+        // Build a viewbox from the currently visible map area so
+        // results are restricted to what the user can see.
+        const visibleBounds = map.getBounds();
+
+        const viewbox = [
+            visibleBounds.getWest(),
+            visibleBounds.getNorth(),
+            visibleBounds.getEast(),
+            visibleBounds.getSouth()
+        ].join(",");
+
+
         try {
 
             const response =
@@ -951,7 +984,9 @@
                     "/search?q=" +
                     encodeURIComponent(
                         query + ", "
-                    )
+                    ) +
+                    "&viewbox=" +
+                    encodeURIComponent(viewbox)
                 );