1.17.2

Add more icons
Update Pinhead
2026-03-28 16:49:03 +04:00 · 2026-03-28 16:48:14 +04:00 · 2026-03-28 16:47:53 +04:00 · 2026-03-28 15:32:21 +04:00 · 2026-03-28 15:30:27 +04:00 · 2026-03-27 15:17:16 +04:00
40 changed files with 1867 additions and 173 deletions
--- a/app/components/app-header.gjs
+++ b/app/components/app-header.gjs
@@ -10,8 +10,13 @@ import CategoryChips from '#components/category-chips';

 export default class AppHeaderComponent extends Component {
  @service storage;
+  @service settings;
  @tracked isUserMenuOpen = false;
-  @tracked hasQuery = false;
+  @tracked searchQuery = '';
+
+  get hasQuery() {
+    return !!this.searchQuery;
+  }

  @action
  toggleUserMenu() {
@@ -25,30 +30,31 @@ export default class AppHeaderComponent extends Component {

  @action
  handleQueryChange(query) {
-    this.hasQuery = !!query;
+    this.searchQuery = query;
  }

  @action
-  handleChipSelect() {
-    // When a chip is selected, we might want to ensure the search box is cleared visually,
-    // although the route transition will happen.
-    // The SearchBox component manages its own state, so we rely on the route transition.
-    // However, if we want to clear the search box input from here, we'd need to control it.
-    // For now, let's just let the route change happen.
+  handleChipSelect(category) {
+    this.searchQuery = category.label;
+    // The existing logic in CategoryChips triggers the route transition.
+    // This update simply fills the search box.
  }

  <template>
    <header class="app-header">
      <div class="header-left">
        <SearchBox
+          @query={{this.searchQuery}}
          @onToggleMenu={{@onToggleMenu}}
          @onQueryChange={{this.handleQueryChange}}
        />
      </div>

-      <div class="header-center {{if this.hasQuery 'searching'}}">
-        <CategoryChips @onSelect={{this.handleChipSelect}} />
-      </div>
+      {{#if this.settings.showQuickSearchButtons}}
+        <div class="header-center {{if this.hasQuery 'searching'}}">
+          <CategoryChips @onSelect={{this.handleChipSelect}} />
+        </div>
+      {{/if}}

      <div class="header-right">
        <div class="user-menu-container">
--- a/app/components/app-menu/settings.gjs
+++ b/app/components/app-menu/settings.gjs
@@ -18,6 +18,11 @@ export default class AppMenuSettings extends Component {
    this.settings.updateMapKinetic(event.target.value === 'true');
  }

+  @action
+  toggleQuickSearchButtons(event) {
+    this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
+  }
+
  @action
  updatePhotonApi(event) {
    this.settings.updatePhotonApi(event.target.value);
@@ -36,6 +41,30 @@ export default class AppMenuSettings extends Component {

    <div class="sidebar-content">
      <section class="settings-section">
+        <div class="form-group">
+          <label for="show-quick-search">Quick search buttons visible</label>
+          <select
+            id="show-quick-search"
+            class="form-control"
+            {{on "change" this.toggleQuickSearchButtons}}
+          >
+            <option
+              value="true"
+              selected={{if this.settings.showQuickSearchButtons "selected"}}
+            >
+              Yes
+            </option>
+            <option
+              value="false"
+              selected={{unless
+                this.settings.showQuickSearchButtons
+                "selected"
+              }}
+            >
+              No
+            </option>
+          </select>
+        </div>
        <div class="form-group">
          <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
          <select
--- a/app/components/category-chips.gjs
+++ b/app/components/category-chips.gjs
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 import { POI_CATEGORIES } from '../utils/poi-categories';
+import { eq, and } from 'ember-truth-helpers';

 export default class CategoryChipsComponent extends Component {
  @service router;
@@ -41,6 +42,10 @@ export default class CategoryChipsComponent extends Component {
            class="category-chip"
            {{on "click" (fn this.searchCategory category)}}
            aria-label={{category.label}}
+            disabled={{and
+              (eq this.mapUi.loadingState.type "category")
+              (eq this.mapUi.loadingState.value category.id)
+            }}
          >
            <Icon @name={{category.icon}} @size={{16}} />
            <span>{{category.label}}</span>
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
 import 'ol/ol.css';
-import Map from 'ol/Map.js';
+import OlMap from 'ol/Map.js';
 import { defaults as defaultControls, Control } from 'ol/control.js';
 import { defaults as defaultInteractions, DragPan } from 'ol/interaction.js';
 import Kinetic from 'ol/Kinetic.js';
@@ -16,8 +16,10 @@ import Feature from 'ol/Feature.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
-import { Style, Circle, Fill, Stroke } from 'ol/style.js';
+import { Style, Circle, Fill, Stroke, Icon } from 'ol/style.js';
 import { apply } from 'ol-mapbox-style';
+import { getIcon } from '../utils/icons';
+import { getIconNameForTags } from '../utils/osm-icons';

 export default class MapComponent extends Component {
  @service osm;
@@ -28,6 +30,7 @@ export default class MapComponent extends Component {

  mapInstance;
  bookmarkSource;
+  searchResultsSource;
  selectedShapeSource;
  searchOverlay;
  searchOverlayElement;
@@ -110,6 +113,123 @@ export default class MapComponent extends Component {
      zIndex: 10, // Ensure it sits above the map tiles
    });

+    // Create a vector source and layer for search results
+    this.searchResultsSource = new VectorSource();
+    const cachedIconUrls = new Map();
+
+    const searchResultStyle = (feature) => {
+      const originalPlace = feature.get('originalPlace');
+
+      // If this place is currently selected, hide the search result marker
+      // because the main red drop pin will be shown instead.
+      const selectedPlace = this.mapUi.selectedPlace;
+      if (selectedPlace) {
+        const isSameOsmId =
+          originalPlace.osmId &&
+          selectedPlace.osmId &&
+          originalPlace.osmId === selectedPlace.osmId;
+        const isSameId =
+          originalPlace.id &&
+          selectedPlace.id &&
+          originalPlace.id === selectedPlace.id;
+        const isSameCoords =
+          originalPlace.lat === selectedPlace.lat &&
+          originalPlace.lon === selectedPlace.lon;
+
+        if (isSameOsmId || isSameId || isSameCoords) {
+          return new Style({}); // Empty style makes it invisible
+        }
+      }
+
+      // Some search results might be just the place object without separate tags
+      // If it's a raw place object, it might have osmTags property.
+      // Or it might be the tags object itself.
+      const tags = originalPlace.osmTags || originalPlace;
+      const iconName = getIconNameForTags(tags);
+
+      // Use 'default' key for the standard red dot marker. Use iconName as key if present.
+      const cacheKey = iconName || 'default';
+
+      if (!cachedIconUrls.has(cacheKey)) {
+        const markerColor =
+          getComputedStyle(document.documentElement)
+            .getPropertyValue('--marker-color-primary')
+            .trim() || '#ea4335';
+
+        // Default content: Red circle
+        let innerContent = `<circle cx="12" cy="12" r="8" fill="${markerColor}"/>`;
+
+        if (iconName) {
+          const rawSvg = getIcon(iconName);
+          if (rawSvg) {
+            // Pinhead icons are usually 15x15 viewBox="0 0 15 15".
+            // We want to center it on 12,12.
+            // A 12x12 icon centered at 12,12 means top-left at 6,6.
+            // However, since we are embedding a new SVG, we can just use x/y/width/height.
+            // But we need to strip the outer <svg> tag to embed the paths cleanly if we want full control,
+            // or we can nest the SVG. Nesting is safer.
+
+            // The rawSvg string contains <svg ...>...</svg>.
+            // We want to make it white. We can add a group with fill="white".
+            // But if the SVG has fill attributes, they override. Pinhead icons usually don't have fills.
+
+            // Let's strip the outer SVG tag to get the path content.
+            let content = rawSvg.trim();
+            const svgStart = content.indexOf('<svg');
+            const svgEnd = content.indexOf('>', svgStart);
+            const contentStart = svgEnd + 1;
+            const contentEnd = content.lastIndexOf('</svg>');
+
+            if (svgStart !== -1 && contentEnd !== -1) {
+              content = content.substring(contentStart, contentEnd);
+            }
+
+            // We render the red circle background, then the icon on top.
+            // Icon is scaled down slightly to fit nicely inside the circle.
+            // 15x15 scaled by 0.8 is 12x12.
+            // Translate to 6,6 to center.
+            innerContent = `
+              <circle cx="12" cy="12" r="8" fill="${markerColor}"/>
+              <g transform="translate(6, 6) scale(0.8)" fill="white">
+                ${content}
+              </g>
+            `;
+          }
+        }
+
+        const svg = `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 40" width="40" height="50">
+            <defs>
+              <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+                <feDropShadow dx="0" dy="2" stdDeviation="1.5" flood-color="black" flood-opacity="0.3"/>
+              </filter>
+            </defs>
+            <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 12 24 12 24C12 24 22 17.5 22 12C22 6.5 17.5 2 12 2Z" fill="white" filter="url(#shadow)"/>
+            ${innerContent}
+          </svg>
+        `;
+
+        cachedIconUrls.set(
+          cacheKey,
+          'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg.trim())
+        );
+      }
+
+      return new Style({
+        image: new Icon({
+          src: cachedIconUrls.get(cacheKey),
+          anchor: [0.5, 0.65],
+          scale: 1,
+        }),
+      });
+    };
+
+    const searchResultLayer = new VectorLayer({
+      source: this.searchResultsSource,
+      style: searchResultStyle,
+      zIndex: 11, // Above bookmarks (10)
+    });
+
    // Default view settings
    let center = [14.21683569, 27.060114248];
    let zoom = 2.661;
@@ -141,9 +261,14 @@ export default class MapComponent extends Component {
      projection: 'EPSG:3857',
    });

-    this.mapInstance = new Map({
+    this.mapInstance = new OlMap({
      target: element,
-      layers: [openfreemap, selectedShapeLayer, bookmarkLayer],
+      layers: [
+        openfreemap,
+        selectedShapeLayer,
+        searchResultLayer,
+        bookmarkLayer,
+      ],
      view: view,
      controls: defaultControls({
        zoom: true,
@@ -178,7 +303,7 @@ export default class MapComponent extends Component {
    const pinIcon = document.createElement('div');
    pinIcon.className = 'selected-pin';
    // Simple SVG for Map Pin
-    pinIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3" style="fill: #b31412; stroke: none;"></circle></svg>`;
+    pinIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3" style="fill: var(--marker-color-dark); stroke: none;"></circle></svg>`;

    const pinShadow = document.createElement('div');
    pinShadow.className = 'selected-pin-shadow';
@@ -464,11 +589,43 @@ export default class MapComponent extends Component {
    );
  });

+  updateSearchResults = modifier(() => {
+    if (!this.searchResultsSource) return;
+
+    this.searchResultsSource.clear();
+    const results = this.mapUi.searchResults;
+
+    if (!results || results.length === 0) return;
+
+    const features = [];
+    results.forEach((place) => {
+      if (place.lat && place.lon) {
+        const feature = new Feature({
+          geometry: new Point(fromLonLat([place.lon, place.lat])),
+          name: place.title,
+          id: place.id,
+          isSearchResult: true,
+          originalPlace: place,
+        });
+        features.push(feature);
+      }
+    });
+
+    if (features.length > 0) {
+      this.searchResultsSource.addFeatures(features);
+    }
+  });
+
  // Track the selected place from the UI Service (Router -> Map)
  updateSelectedPin = modifier(() => {
    const selected = this.mapUi.selectedPlace;
    const options = this.mapUi.selectionOptions || {};

+    // Force a redraw of the search results layer so it can hide/show the selected pin
+    if (this.searchResultsSource) {
+      this.searchResultsSource.changed();
+    }
+
    if (!this.selectedPinOverlay || !this.selectedPinElement) return;

    // Clear any previous shape
@@ -946,6 +1103,7 @@ export default class MapComponent extends Component {
      hitTolerance: 10,
    });
    let clickedBookmark = null;
+    let clickedSearchResult = null;
    let selectedFeatureName = null;

    if (features && features.length > 0) {
@@ -954,8 +1112,12 @@ export default class MapComponent extends Component {
        console.debug(f);
      }
      const bookmarkFeature = features.find((f) => f.get('isBookmark'));
+      const searchResultFeature = features.find((f) => f.get('isSearchResult'));
+
      if (bookmarkFeature) {
        clickedBookmark = bookmarkFeature.get('originalPlace');
+      } else if (searchResultFeature) {
+        clickedSearchResult = searchResultFeature.get('originalPlace');
      }
      // Also get visual props for standard map click logic later
      const props = features[0].getProperties();
@@ -964,16 +1126,30 @@ export default class MapComponent extends Component {
      }
    }

+    // Helper to transition with proper state
+    const transitionToPlace = (place) => {
+      // If we are currently in search mode OR have active search results,
+      // we want the "Back" button on the place details to return to the search results.
+      if (
+        this.router.currentRouteName === 'search' ||
+        (this.mapUi.currentSearch && this.mapUi.searchResults.length > 0)
+      ) {
+        this.mapUi.returnToSearch = true;
+      }
+      this.mapUi.preventNextZoom = true;
+      this.router.transitionTo('place', place);
+    };
+
    // Special handling when sidebar is OPEN
    if (this.args.isSidebarOpen) {
-      // If it's a bookmark, we allow "switching" to it even if sidebar is open
-      if (clickedBookmark) {
+      // If it's a bookmark or search result, we allow "switching" to it even if sidebar is open
+      const targetPlace = clickedBookmark || clickedSearchResult;
+      if (targetPlace) {
        console.debug(
-          'Clicked bookmark while sidebar open (switching):',
-          clickedBookmark
+          'Clicked feature while sidebar open (switching):',
+          targetPlace
        );
-        this.mapUi.preventNextZoom = true;
-        this.router.transitionTo('place', clickedBookmark);
+        transitionToPlace(targetPlace);
        return;
      }

@@ -987,8 +1163,13 @@ export default class MapComponent extends Component {
    // Normal behavior (sidebar is closed)
    if (clickedBookmark) {
      console.debug('Clicked bookmark:', clickedBookmark);
-      this.mapUi.preventNextZoom = true;
-      this.router.transitionTo('place', clickedBookmark);
+      transitionToPlace(clickedBookmark);
+      return;
+    }
+
+    if (clickedSearchResult) {
+      console.debug('Clicked search result:', clickedSearchResult);
+      transitionToPlace(clickedSearchResult);
      return;
    }

@@ -1029,6 +1210,7 @@ export default class MapComponent extends Component {
      lat: lat.toFixed(6),
      lon: lon.toFixed(6),
      q: null, // Clear q to force spatial search
+      category: null, // Clear category to force spatial search
      selected: selectedFeatureName || null,
    };

@@ -1041,6 +1223,7 @@ export default class MapComponent extends Component {
      {{this.setupMap}}
      {{this.updateInteractions}}
      {{this.updateBookmarks}}
+      {{this.updateSearchResults}}
      {{this.updateSelectedPin}}
      {{this.syncPulse}}
      {{this.syncCreationMode}}
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -146,7 +146,7 @@ export default class PlacesSidebar extends Component {

  get isNearbySearch() {
    const qp = this.router.currentRoute.queryParams;
-    return !qp.q && qp.lat && qp.lon;
+    return !qp.q && !qp.category && qp.lat && qp.lon;
  }

  <template>
--- a/app/components/search-box.gjs
+++ b/app/components/search-box.gjs
@@ -7,43 +7,55 @@ import { fn } from '@ember/helper';
 import { task, timeout } from 'ember-concurrency';
 import Icon from '#components/icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
-import eq from 'ember-truth-helpers/helpers/eq';
+import { POI_CATEGORIES } from '../utils/poi-categories';
+import { eq, or } from 'ember-truth-helpers';

 export default class SearchBoxComponent extends Component {
  @service photon;
+  @service osm;
  @service router;
  @service mapUi;
  @service map; // Assuming we might need map context, but mostly we use router

-  @tracked query = '';
+  @tracked _internalQuery = '';
  @tracked results = [];
  @tracked isFocused = false;
  @tracked isLoading = false;

+  get query() {
+    return this.args.query ?? this._internalQuery;
+  }
+
+  set query(value) {
+    this._internalQuery = value;
+  }
+
  get showPopover() {
    return this.isFocused && this.results.length > 0;
  }

  @action
  handleInput(event) {
-    this.query = event.target.value;
+    const value = event.target.value;
+    this.query = value;
    if (this.args.onQueryChange) {
-      this.args.onQueryChange(this.query);
+      this.args.onQueryChange(value);
    }

-    if (this.query.length < 2) {
+    if (value.length < 2) {
      this.results = [];
      return;
    }

-    this.searchTask.perform();
+    this.searchTask.perform(value);
  }

-
-  searchTask = task({ restartable: true }, async () => {
+  searchTask = task({ restartable: true }, async (term) => {
    await timeout(300);

-    if (this.query.length < 2) return;
+    const query = typeof term === 'string' ? term : this.query;
+
+    if (query.length < 2) return;

    this.isLoading = true;
    try {
@@ -52,8 +64,20 @@ export default class SearchBoxComponent extends Component {
      if (this.mapUi.currentCenter) {
        ({ lat, lon } = this.mapUi.currentCenter);
      }
-      const results = await this.photon.search(this.query, lat, lon);
-      this.results = results;
+
+      // Filter categories
+      const q = query.toLowerCase();
+      const categoryMatches = POI_CATEGORIES.filter((c) =>
+        c.label.toLowerCase().includes(q)
+      ).map((c) => ({
+        source: 'category',
+        title: c.label,
+        id: c.id,
+        icon: 'search',
+      }));
+
+      const results = await this.photon.search(query, lat, lon);
+      this.results = [...categoryMatches, ...results];
    } catch (e) {
      console.error('Search failed', e);
      this.results = [];
@@ -85,7 +109,7 @@ export default class SearchBoxComponent extends Component {
    event.preventDefault();
    if (!this.query) return;

-    let queryParams = { q: this.query, selected: null };
+    let queryParams = { q: this.query, selected: null, category: null };

    if (this.mapUi.currentCenter) {
      const { lat, lon } = this.mapUi.currentCenter;
@@ -99,7 +123,37 @@ export default class SearchBoxComponent extends Component {

  @action
  selectResult(place) {
+    if (place.source === 'category') {
+      this.query = place.title;
+      if (this.args.onQueryChange) {
+        this.args.onQueryChange(place.title);
+      }
+      this.results = [];
+
+      let lat = null,
+        lon = null;
+      if (this.mapUi.currentCenter) {
+        ({ lat, lon } = this.mapUi.currentCenter);
+        lat = lat?.toString();
+        lon = lon?.toString();
+      }
+
+      this.router.transitionTo('search', {
+        queryParams: {
+          q: place.title,
+          category: place.id,
+          selected: null,
+          lat: lat,
+          lon: lon,
+        },
+      });
+      return;
+    }
+
    this.query = place.title;
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange(place.title);
+    }
    this.results = []; // Hide popover

    // If it has an OSM ID, go to place details
@@ -117,6 +171,7 @@ export default class SearchBoxComponent extends Component {
          lat: place.lat,
          lon: place.lon,
          selected: null,
+          category: null,
        },
      });
    }
@@ -124,6 +179,11 @@ export default class SearchBoxComponent extends Component {

  @action
  clear() {
+    this.searchTask.cancelAll();
+    this.mapUi.stopLoading();
+    this.osm.cancelAll();
+    this.photon.cancelAll();
+
    this.query = '';
    this.results = [];
    if (this.args.onQueryChange) {
@@ -157,7 +217,16 @@ export default class SearchBoxComponent extends Component {
        />

        <button type="submit" class="search-submit-btn" aria-label="Search">
-          <Icon @name="search" @size={{20}} @color="#5f6368" />
+          {{#if
+            (or
+              (eq this.mapUi.loadingState.type "text")
+              (eq this.mapUi.loadingState.type "category")
+            )
+          }}
+            <Icon @name="loading-ring" @size={{20}} />
+          {{else}}
+            <Icon @name="search" @size={{20}} @color="#5f6368" />
+          {{/if}}
        </button>

        {{#if this.query}}
@@ -183,7 +252,11 @@ export default class SearchBoxComponent extends Component {
                  {{on "click" (fn this.selectResult result)}}
                >
                  <div class="result-icon">
-                    <Icon @name="map-pin" @size={{16}} @color="#666" />
+                    <Icon
+                      @name={{if result.icon result.icon "map-pin"}}
+                      @size={{16}}
+                      @color="#666"
+                    />
                  </div>
                  <div class="result-info">
                    <span class="result-title">{{result.title}}</span>
--- a/app/components/toast.gjs
+++ b/app/components/toast.gjs
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class ToastComponent extends Component {
+  @service toast;
+
+  <template>
+    {{#if this.toast.isVisible}}
+      <div class="toast-notification">
+        {{this.toast.message}}
+      </div>
+    {{/if}}
+  </template>
+}
--- a/app/icons/270-ring.svg
+++ b/app/icons/270-ring.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-ember-extension="1"><path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class IndexRoute extends Route {
+  @service mapUi;
+
+  activate() {
+    this.mapUi.clearSearchResults();
+  }
+}
--- a/app/routes/search.js
+++ b/app/routes/search.js
@@ -9,6 +9,7 @@ export default class SearchRoute extends Route {
  @service mapUi;
  @service storage;
  @service router;
+  @service toast;

  queryParams = {
    lat: { refreshModel: true },
@@ -22,97 +23,119 @@ export default class SearchRoute extends Route {
    const lat = params.lat ? parseFloat(params.lat) : null;
    const lon = params.lon ? parseFloat(params.lon) : null;
    let pois = [];
+    let loadingType = null;
+    let loadingValue = null;

-    // Case 0: Category Search (category parameter present)
-    if (params.category && lat && lon) {
-      // We need bounds. If we have active map state, use it.
-      let bounds = this.mapUi.currentBounds;
+    try {
+      // Case 0: Category Search (category parameter present)
+      if (params.category && lat && lon) {
+        loadingType = 'category';
+        loadingValue = params.category;
+        this.mapUi.startLoading(loadingType, loadingValue);

-      // If we don't have bounds (direct URL visit), estimate them from lat/lon/zoom(16)
-      // or just use a fixed box around the center.
-      if (!bounds) {
-        // Approximate 0.01 degrees ~ 1km at equator. A viewport is roughly 0.02x0.01 at zoom 16?
-        // Let's take a safe box of ~1km radius.
-        const delta = 0.01;
-        bounds = {
-          minLat: lat - delta,
-          maxLat: lat + delta,
-          minLon: lon - delta,
-          maxLon: lon + delta,
-        };
-      }
+        // We need bounds. If we have active map state, use it.
+        let bounds = this.mapUi.currentBounds;

-      pois = await this.osm.getCategoryPois(bounds, params.category);
-
-      // Sort by distance from center
-      pois = pois
-        .map((p) => ({
-          ...p,
-          _distance: getDistance(lat, lon, p.lat, p.lon),
-        }))
-        .sort((a, b) => a._distance - b._distance);
-    }
-    // Case 1: Text Search (q parameter present)
-    else if (params.q) {
-      // Search with Photon (using lat/lon for bias if available)
-      pois = await this.photon.search(params.q, lat, lon);
-
-      // Search local bookmarks by name
-      const queryLower = params.q.toLowerCase();
-      const localMatches = this.storage.savedPlaces.filter((p) => {
-        return (
-          p.title?.toLowerCase().includes(queryLower) ||
-          p.description?.toLowerCase().includes(queryLower)
-        );
-      });
-
-      // Merge local matches
-      localMatches.forEach((local) => {
-        const exists = pois.find(
-          (poi) =>
-            (local.osmId && poi.osmId === local.osmId) ||
-            (poi.id && poi.id === local.id)
-        );
-        if (!exists) {
-          pois.push(local);
+        // If we don't have bounds (direct URL visit), estimate them from lat/lon/zoom(16)
+        // or just use a fixed box around the center.
+        if (!bounds) {
+          // Approximate 0.01 degrees ~ 1km at equator. A viewport is roughly 0.02x0.01 at zoom 16?
+          // Let's take a safe box of ~1km radius.
+          const delta = 0.01;
+          bounds = {
+            minLat: lat - delta,
+            maxLat: lat + delta,
+            minLon: lon - delta,
+            maxLon: lon + delta,
+          };
        }
-      });
-    }
-    // Case 2: Nearby Search (lat/lon present, no q)
-    else if (lat && lon) {
-      const searchRadius = 50; // Default radius

-      // Fetch POIs from Overpass
-      pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
-
-      // Get cached/saved places in search radius
-      const localMatches = this.storage.savedPlaces.filter((p) => {
-        const dist = getDistance(lat, lon, p.lat, p.lon);
-        return dist <= searchRadius;
-      });
-
-      // Merge local matches
-      localMatches.forEach((local) => {
-        const exists = pois.find(
-          (poi) =>
-            (local.osmId && poi.osmId === local.osmId) ||
-            (poi.id && poi.id === local.id)
+        pois = await this.osm.getCategoryPois(
+          bounds,
+          params.category,
+          lat,
+          lon
        );

-        if (!exists) {
-          pois.push(local);
-        }
-      });
-
-      // Sort by distance from click
-      pois = pois
-        .map((p) => {
-          return {
+        // Sort by distance from center
+        pois = pois
+          .map((p) => ({
            ...p,
            _distance: getDistance(lat, lon, p.lat, p.lon),
-          };
-        })
-        .sort((a, b) => a._distance - b._distance);
+          }))
+          .sort((a, b) => a._distance - b._distance);
+      }
+      // Case 1: Text Search (q parameter present)
+      else if (params.q) {
+        loadingType = 'text';
+        loadingValue = params.q;
+        this.mapUi.startLoading(loadingType, loadingValue);
+
+        // Search with Photon (using lat/lon for bias if available)
+        pois = await this.photon.search(params.q, lat, lon);
+
+        // Search local bookmarks by name
+        const queryLower = params.q.toLowerCase();
+        const localMatches = this.storage.savedPlaces.filter((p) => {
+          return (
+            p.title?.toLowerCase().includes(queryLower) ||
+            p.description?.toLowerCase().includes(queryLower)
+          );
+        });
+
+        // Merge local matches
+        localMatches.forEach((local) => {
+          const exists = pois.find(
+            (poi) =>
+              (local.osmId && poi.osmId === local.osmId) ||
+              (poi.id && poi.id === local.id)
+          );
+          if (!exists) {
+            pois.push(local);
+          }
+        });
+      }
+      // Case 2: Nearby Search (lat/lon present, no q)
+      else if (lat && lon) {
+        // Nearby search does NOT trigger loading state (pulse is used instead)
+        const searchRadius = 50; // Default radius
+
+        // Fetch POIs from Overpass
+        pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
+
+        // Get cached/saved places in search radius
+        const localMatches = this.storage.savedPlaces.filter((p) => {
+          const dist = getDistance(lat, lon, p.lat, p.lon);
+          return dist <= searchRadius;
+        });
+
+        // Merge local matches
+        localMatches.forEach((local) => {
+          const exists = pois.find(
+            (poi) =>
+              (local.osmId && poi.osmId === local.osmId) ||
+              (poi.id && poi.id === local.id)
+          );
+
+          if (!exists) {
+            pois.push(local);
+          }
+        });
+
+        // Sort by distance from click
+        pois = pois
+          .map((p) => {
+            return {
+              ...p,
+              _distance: getDistance(lat, lon, p.lat, p.lon),
+            };
+          })
+          .sort((a, b) => a._distance - b._distance);
+      }
+    } finally {
+      if (loadingType && loadingValue) {
+        this.mapUi.stopLoading(loadingType, loadingValue);
+      }
    }

    // Check if any of these are already bookmarked
@@ -169,11 +192,20 @@ export default class SearchRoute extends Route {
    super.setupController(controller, model);
    // Ensure pulse is stopped if we reach here
    this.mapUi.stopSearch();
+    this.mapUi.setSearchResults(model);
+
+    // Store current search params to allow "Up" navigation from place details
+    const { q, category, lat, lon } = this.paramsFor('search');
+    this.mapUi.currentSearch = { q, category, lat, lon };
  }

  @action
-  error() {
+  error(error, transition) {
    this.mapUi.stopSearch();
-    return true; // Bubble error
+    this.toast.show('Search request failed. Please try again.');
+    if (transition) {
+      transition.abort();
+    }
+    return false; // Prevent bubble and stop transition
  }
 }
--- a/app/services/map-ui.js
+++ b/app/services/map-ui.js
@@ -12,6 +12,9 @@ export default class MapUiService extends Service {
  @tracked searchBoxHasFocus = false;
  @tracked selectionOptions = {};
  @tracked preventNextZoom = false;
+  @tracked searchResults = [];
+  @tracked currentSearch = null;
+  @tracked loadingState = null;

  selectPlace(place, options = {}) {
    this.selectedPlace = place;
@@ -24,6 +27,15 @@ export default class MapUiService extends Service {
    this.preventNextZoom = false;
  }

+  setSearchResults(results) {
+    this.searchResults = results || [];
+  }
+
+  clearSearchResults() {
+    this.searchResults = [];
+    this.currentSearch = null;
+  }
+
  startSearch() {
    this.isSearching = true;
    this.isCreating = false;
@@ -59,4 +71,26 @@ export default class MapUiService extends Service {
  updateBounds(bounds) {
    this.currentBounds = bounds;
  }
+
+  startLoading(type, value) {
+    this.loadingState = { type, value };
+  }
+
+  stopLoading(type = null, value = null) {
+    // If no arguments provided, force stop (legacy/cleanup)
+    if (!type && !value) {
+      this.loadingState = null;
+      return;
+    }
+
+    // Only clear if the current state matches the request
+    // This prevents a previous search from clearing the state of a new search
+    if (
+      this.loadingState &&
+      this.loadingState.type === type &&
+      this.loadingState.value === value
+    ) {
+      this.loadingState = null;
+    }
+  }
 }
--- a/app/services/osm.js
+++ b/app/services/osm.js
@@ -9,6 +9,13 @@ export default class OsmService extends Service {
  cachedResults = null;
  lastQueryKey = null;

+  cancelAll() {
+    if (this.controller) {
+      this.controller.abort();
+      this.controller = null;
+    }
+  }
+
  async getNearbyPois(lat, lon, radius = 50) {
    const queryKey = `${lat},${lon},${radius}`;

@@ -40,15 +47,26 @@ export default class OsmService extends Service {
    ];
    const typeKeysQuery = [`~"^(${typeKeys.join('|')})$"~".*"`];

+    const negativeFilters = {
+      public_transport: ['stop_area', 'platform'],
+    };
+
+    const negativeFiltersQuery = Object.entries(negativeFilters)
+      .map(([key, values]) => {
+        const valueRegex = `^(${values.join('|')})$`;
+        return `["${key}"!~"${valueRegex}"]`;
+      })
+      .join('');
+
    const query = `
 [out:json][timeout:25];
 (
  node(around:${radius},${lat},${lon})
-    [${typeKeysQuery}][~"^name"~"."];
+    [${typeKeysQuery}]${negativeFiltersQuery}[~"^name"~"."];
  way(around:${radius},${lat},${lon})
-    [${typeKeysQuery}][~"^name"~"."];
+    [${typeKeysQuery}]${negativeFiltersQuery}[~"^name"~"."];
  relation(around:${radius},${lat},${lon})
-    [${typeKeysQuery}][~"^name"~"."];
+    [${typeKeysQuery}]${negativeFiltersQuery}[~"^name"~"."];
 );
 out center;
    `.trim();
@@ -77,10 +95,23 @@ out center;
    }
  }

-  async getCategoryPois(bounds, categoryId) {
+  async getCategoryPois(bounds, categoryId, lat, lon) {
    const category = getCategoryById(categoryId);
    if (!category || !bounds) return [];

+    const queryKey = lat && lon ? `cat:${categoryId}:${lat}:${lon}` : null;
+
+    if (queryKey && this.lastQueryKey === queryKey && this.cachedResults) {
+      console.debug('Returning cached category results for:', queryKey);
+      return this.cachedResults;
+    }
+
+    if (this.controller) {
+      this.controller.abort();
+    }
+    this.controller = new AbortController();
+    const signal = this.controller.signal;
+
    const { minLat, minLon, maxLat, maxLon } = bounds;

    // Build the query parts for each filter string and type
@@ -104,18 +135,27 @@ out center;
 out center;
    `.trim();

-    // No caching for now as bounds change frequently
    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;

    try {
-      const res = await this.fetchWithRetry(url);
+      const res = await this.fetchWithRetry(url, { signal });
      if (!res.ok) throw new Error('Overpass request failed');
      const data = await res.json();
      const results = data.elements.map(this.normalizePoi);
+
+      if (queryKey) {
+        this.lastQueryKey = queryKey;
+        this.cachedResults = results;
+      }
+
      return results;
    } catch (e) {
+      if (e.name === 'AbortError') {
+        console.debug('Category search aborted');
+        return [];
+      }
      console.error('Category search failed', e);
-      return [];
+      throw e;
    }
  }

--- a/app/services/photon.js
+++ b/app/services/photon.js
@@ -5,6 +5,15 @@ import { humanizeOsmTag } from '../utils/format-text';
 export default class PhotonService extends Service {
  @service settings;

+  controller = null;
+
+  cancelAll() {
+    if (this.controller) {
+      this.controller.abort();
+      this.controller = null;
+    }
+  }
+
  get baseUrl() {
    return this.settings.photonApi;
  }
@@ -12,6 +21,12 @@ export default class PhotonService extends Service {
  async search(query, lat, lon, limit = 10) {
    if (!query || query.length < 2) return [];

+    if (this.controller) {
+      this.controller.abort();
+    }
+    this.controller = new AbortController();
+    const signal = this.controller.signal;
+
    const params = new URLSearchParams({
      q: query,
      limit: String(limit),
@@ -25,7 +40,7 @@ export default class PhotonService extends Service {
    const url = `${this.baseUrl}?${params.toString()}`;

    try {
-      const res = await this.fetchWithRetry(url);
+      const res = await this.fetchWithRetry(url, { signal });
      if (!res.ok) {
        throw new Error(`Photon request failed with status ${res.status}`);
      }
@@ -35,6 +50,9 @@ export default class PhotonService extends Service {

      return data.features.map((f) => this.normalizeFeature(f));
    } catch (e) {
+      if (e.name === 'AbortError') {
+        return [];
+      }
      console.error('Photon search error:', e);
      // Return empty array on error so UI doesn't break
      return [];
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -5,6 +5,7 @@ export default class SettingsService extends Service {
  @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
  @tracked mapKinetic = true;
  @tracked photonApi = 'https://photon.komoot.io/api/';
+  @tracked showQuickSearchButtons = true;

  overpassApis = [
    {
@@ -56,6 +57,13 @@ export default class SettingsService extends Service {
      this.mapKinetic = savedKinetic === 'true';
    }
    // Default is true (initialized in class field)
+
+    const savedShowQuickSearch = localStorage.getItem(
+      'marco:show-quick-search'
+    );
+    if (savedShowQuickSearch !== null) {
+      this.showQuickSearchButtons = savedShowQuickSearch === 'true';
+    }
  }

  updateOverpassApi(url) {
@@ -68,6 +76,11 @@ export default class SettingsService extends Service {
    localStorage.setItem('marco:map-kinetic', String(enabled));
  }

+  updateShowQuickSearchButtons(enabled) {
+    this.showQuickSearchButtons = enabled;
+    localStorage.setItem('marco:show-quick-search', String(enabled));
+  }
+
  updatePhotonApi(url) {
    this.photonApi = url;
  }
--- a/app/services/toast.js
+++ b/app/services/toast.js
@@ -0,0 +1,21 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ToastService extends Service {
+  @tracked message = null;
+  @tracked isVisible = false;
+  timeoutId = null;
+
+  show(message, duration = 3000) {
+    this.message = message;
+    this.isVisible = true;
+
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+
+    this.timeoutId = setTimeout(() => {
+      this.isVisible = false;
+    }, duration);
+  }
+}
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -6,6 +6,8 @@
  --sidebar-width: 350px;
  --link-color: #2a7fff;
  --link-color-visited: #6a4fbf;
+  --marker-color-primary: #ea4335;
+  --marker-color-dark: #b31412;
 }

 html,
@@ -75,6 +77,7 @@ body {

  /* Layout */
  display: grid;
+
  /* Desktop: 1fr auto 1fr ensures the center element is absolutely centered */
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'search chips user';
@@ -104,6 +107,7 @@ body {
  display: flex;
  align-items: center;
  grid-area: search;
+
  /* Ensure it sits at the start of its grid area */
  justify-self: start;
  width: 100%;
@@ -870,15 +874,15 @@ span.icon {
 .selected-pin {
  width: 40px;
  height: 40px;
-  color: #ea4335; /* Google Red */
+  color: var(--marker-color-primary);
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
 }

 .selected-pin svg {
  width: 100%;
  height: 100%;
-  fill: #ea4335;
-  stroke: #b31412; /* Darker red stroke */
+  fill: var(--marker-color-primary);
+  stroke: var(--marker-color-dark);
  stroke-width: 1;
 }

@@ -1262,12 +1266,15 @@ button.create-place {
 .category-chips-scroll {
  width: 100%;
  overflow-x: auto;
+
  /* Add padding for shadows */
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
+
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
+
  /* Remove top margin as spacing is handled by grid/layout */
  margin-top: 0;
 }
@@ -1279,6 +1286,7 @@ button.create-place {
 .category-chips-container {
  display: flex;
  gap: 8px;
+
  /* Padding on sides so first/last chip isn't flush with screen edge */
  padding: 0 4px;
  width: max-content; /* Ensure it scrolls */
@@ -1296,7 +1304,7 @@ button.create-place {
  color: #333;
  cursor: pointer;
  white-space: nowrap;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
  transition: background-color 0.2s;
 }

@@ -1307,3 +1315,42 @@ button.create-place {
 .category-chip:active {
  background: #eee;
 }
+
+.category-chip:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Toast Notification */
+.toast-notification {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgb(51 51 51 / 85%);
+  backdrop-filter: blur(4px);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 999px;
+  z-index: 9999;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  animation: fade-in-up 0.3s ease-out forwards;
+  text-align: center;
+  max-width: 90%;
+  font-size: 0.9rem;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -3,6 +3,7 @@ import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import AppHeader from '#components/app-header';
 import AppMenu from '#components/app-menu/index';
+import Toast from '#components/toast';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -89,6 +90,8 @@ export default class ApplicationComponent extends Component {
      <AppMenu @onClose={{this.closeAppMenu}} />
    {{/if}}

+    <Toast />
+
    {{outlet}}
  </template>
 }
--- a/app/templates/place.gjs
+++ b/app/templates/place.gjs
@@ -77,9 +77,11 @@ export default class PlaceTemplate extends Component {
  navigateBack(place) {
    // The sidebar calls this with null when "Back" is clicked.
    if (place === null) {
-      // If we came from search results, go back in history
-      if (this.mapUi.returnToSearch) {
-        window.history.back();
+      // If we have an active search context, return to it (UP navigation)
+      if (this.mapUi.returnToSearch && this.mapUi.currentSearch) {
+        this.router.transitionTo('search', {
+          queryParams: this.mapUi.currentSearch,
+        });
      } else {
        // Otherwise just close the sidebar (return to map index)
        this.router.transitionTo('index');
--- a/app/templates/search.gjs
+++ b/app/templates/search.gjs
@@ -11,6 +11,8 @@ export default class SearchTemplate extends Component {
  selectPlace(place) {
    if (place) {
      this.mapUi.returnToSearch = true;
+      // We don't need to manually set currentSearch here because
+      // it was already set in the route's setupController
      this.router.transitionTo('place', place);
    }
  }
--- a/app/utils/icons.js
+++ b/app/utils/icons.js
@@ -1,10 +1,14 @@
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
 import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
 import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
 import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
+import cigaretteWithSmokeCurl from '@waysidemapping/pinhead/dist/icons/cigarette_with_smoke_curl.svg?raw';
 import clock from 'feather-icons/dist/icons/clock.svg?raw';
 import edit from 'feather-icons/dist/icons/edit.svg?raw';
+import eyeglasses from '@waysidemapping/pinhead/dist/icons/eyeglasses.svg?raw';
 import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
+import fancyMirrorWithReflectionAndStars from '@waysidemapping/pinhead/dist/icons/fancy_mirror_with_reflection_and_stars.svg?raw';
+import familyRestroomSymbol from '@waysidemapping/pinhead/dist/icons/family_restroom_symbol.svg?raw';
 import gift from 'feather-icons/dist/icons/gift.svg?raw';
 import globe from 'feather-icons/dist/icons/globe.svg?raw';
 import heart from 'feather-icons/dist/icons/heart.svg?raw';
@@ -13,72 +17,219 @@ import info from 'feather-icons/dist/icons/info.svg?raw';
 import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
 import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
 import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+import lowriseBuilding from '@waysidemapping/pinhead/dist/icons/lowrise_building.svg?raw';
 import mail from 'feather-icons/dist/icons/mail.svg?raw';
 import map from 'feather-icons/dist/icons/map.svg?raw';
 import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import menu from 'feather-icons/dist/icons/menu.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import needleAndSpoolOfThread from '@waysidemapping/pinhead/dist/icons/needle_and_spool_of_thread.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import plus from 'feather-icons/dist/icons/plus.svg?raw';
-import server from 'feather-icons/dist/icons/server.svg?raw';
 import search from 'feather-icons/dist/icons/search.svg?raw';
+import server from 'feather-icons/dist/icons/server.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
 import target from 'feather-icons/dist/icons/target.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
+import villageBuildings from '@waysidemapping/pinhead/dist/icons/village_buildings.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import loadingRing from '../icons/270-ring.svg?raw';
+
+import angelfish from '@waysidemapping/pinhead/dist/icons/angelfish.svg?raw';
+import barbell from '@waysidemapping/pinhead/dist/icons/barbell.svg?raw';
+import climbingWall from '@waysidemapping/pinhead/dist/icons/climbing_wall.svg?raw';
+import banknote from '@waysidemapping/pinhead/dist/icons/banknote.svg?raw';
+import badgeShieldWithFire from '@waysidemapping/pinhead/dist/icons/badge_shield_with_fire.svg?raw';
+import beachUmbrellaInGround from '@waysidemapping/pinhead/dist/icons/beach_umbrella_in_ground.svg?raw';
+import beerMugWithFoam from '@waysidemapping/pinhead/dist/icons/beer_mug_with_foam.svg?raw';
+import burgerAndDrinkCupWithStraw from '@waysidemapping/pinhead/dist/icons/burger_and_drink_cup_with_straw.svg?raw';
+import bus from '@waysidemapping/pinhead/dist/icons/bus.svg?raw';
+import boxingGloveUp from '@waysidemapping/pinhead/dist/icons/boxing_glove_up.svg?raw';
 import camera from '@waysidemapping/pinhead/dist/icons/camera.svg?raw';
+import classicalBuilding from '@waysidemapping/pinhead/dist/icons/classical_building.svg?raw';
+import classicalBuildingWithDomeAndFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_dome_and_flag.svg?raw';
+import classicalBuildingWithFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_flag.svg?raw';
+import commercialBuilding from '@waysidemapping/pinhead/dist/icons/commercial_building.svg?raw';
+import clothesHanger from '@waysidemapping/pinhead/dist/icons/clothes_hanger.svg?raw';
+import cleaver from '@waysidemapping/pinhead/dist/icons/cleaver.svg?raw';
+import cloth from '@waysidemapping/pinhead/dist/icons/cloth.svg?raw';
+import cocktail from '@waysidemapping/pinhead/dist/icons/cocktail.svg?raw';
+import coffeeBean from '@waysidemapping/pinhead/dist/icons/coffee_bean.svg?raw';
+import comedyMaskAndTragedyMask from '@waysidemapping/pinhead/dist/icons/comedy_mask_and_tragedy_mask.svg?raw';
+import croissant from '@waysidemapping/pinhead/dist/icons/croissant.svg?raw';
 import cupAndSaucer from '@waysidemapping/pinhead/dist/icons/cup_and_saucer.svg?raw';
+import donut from '@waysidemapping/pinhead/dist/icons/donut.svg?raw';
+import film from '@waysidemapping/pinhead/dist/icons/film.svg?raw';
+import fingernailPolished from '@waysidemapping/pinhead/dist/icons/fingernail_polished.svg?raw';
+import fish from '@waysidemapping/pinhead/dist/icons/fish.svg?raw';
+import flagCheckered from '@waysidemapping/pinhead/dist/icons/flag_checkered.svg?raw';
+import flowerBouquet from '@waysidemapping/pinhead/dist/icons/flower_bouquet.svg?raw';
+import fort from '@waysidemapping/pinhead/dist/icons/fort.svg?raw';
 import forkAndKnife from '@waysidemapping/pinhead/dist/icons/fork_and_knife.svg?raw';
+import gravestone from '@waysidemapping/pinhead/dist/icons/gravestone.svg?raw';
+import grecianVase from '@waysidemapping/pinhead/dist/icons/grecian_vase.svg?raw';
+import greekCross from '@waysidemapping/pinhead/dist/icons/greek_cross.svg?raw';
+import iceCreamOnCone from '@waysidemapping/pinhead/dist/icons/ice_cream_on_cone.svg?raw';
+import jewel from '@waysidemapping/pinhead/dist/icons/jewel.svg?raw';
+import marketStall from '@waysidemapping/pinhead/dist/icons/market_stall.svg?raw';
+import memorialStoneWithInscription from '@waysidemapping/pinhead/dist/icons/memorial_stone_with_inscription.svg?raw';
+import mobilePhoneWithKeypadAndAntenna from '@waysidemapping/pinhead/dist/icons/mobile_phone_with_keypad_and_antenna.svg?raw';
+import molarTooth from '@waysidemapping/pinhead/dist/icons/molar_tooth.svg?raw';
+import openBook from '@waysidemapping/pinhead/dist/icons/open_book.svg?raw';
+import palace from '@waysidemapping/pinhead/dist/icons/palace.svg?raw';
+import personCricketBattingAtCricketBall from '@waysidemapping/pinhead/dist/icons/person_cricket_batting_at_cricket_ball.svg?raw';
+import personBoardingTramWithDestinationDisplayAndPantographOnTramTrack from '@waysidemapping/pinhead/dist/icons/person_boarding_tram_with_destination_display_and_pantograph_on_tram_track.svg?raw';
+import personJockeyingRacehorse from '@waysidemapping/pinhead/dist/icons/person_jockeying_racehorse.svg?raw';
+import personPlayingTennis from '@waysidemapping/pinhead/dist/icons/person_playing_tennis.svg?raw';
+import personRunning from '@waysidemapping/pinhead/dist/icons/person_running.svg?raw';
 import personSleepingInBed from '@waysidemapping/pinhead/dist/icons/person_sleeping_in_bed.svg?raw';
+import personSwimmingInWater from '@waysidemapping/pinhead/dist/icons/person_swimming_in_water.svg?raw';
+import personSwingingGolfClub from '@waysidemapping/pinhead/dist/icons/person_swinging_golf_club.svg?raw';
+import plantInRaisedPlanter from '@waysidemapping/pinhead/dist/icons/plant_in_raised_planter.svg?raw';
+import placeOfWorshipBuilding from '@waysidemapping/pinhead/dist/icons/place_of_worship_building.svg?raw';
+import playStructureWithSlide from '@waysidemapping/pinhead/dist/icons/play_structure_with_slide.svg?raw';
+import policeOfficerWithStopArm from '@waysidemapping/pinhead/dist/icons/police_officer_with_stop_arm.svg?raw';
+import planeTopRight from '@waysidemapping/pinhead/dist/icons/plane_top_right.svg?raw';
+import roundStructureWithFlag from '@waysidemapping/pinhead/dist/icons/round_structure_with_flag.svg?raw';
+import sailingShipInWater from '@waysidemapping/pinhead/dist/icons/sailing_ship_in_water.svg?raw';
+import scissorsOpen from '@waysidemapping/pinhead/dist/icons/scissors_open.svg?raw';
+import shipwreckInWater from '@waysidemapping/pinhead/dist/icons/shipwreck_in_water.svg?raw';
+import shoppingBag from '@waysidemapping/pinhead/dist/icons/shopping_bag.svg?raw';
 import shoppingBasket from '@waysidemapping/pinhead/dist/icons/shopping_basket.svg?raw';
+import tableTennisPaddle from '@waysidemapping/pinhead/dist/icons/table_tennis_paddle.svg?raw';
+import tattooMachine from '@waysidemapping/pinhead/dist/icons/tattoo_machine.svg?raw';
+import toolbox from '@waysidemapping/pinhead/dist/icons/toolbox.svg?raw';
+import treeAndBenchWithBackrest from '@waysidemapping/pinhead/dist/icons/tree_and_bench_with_backrest.svg?raw';
+import shoppingCart from '@waysidemapping/pinhead/dist/icons/shopping_cart.svg?raw';
+import wallHangingWithMountainsAndSun from '@waysidemapping/pinhead/dist/icons/wall_hanging_with_mountains_and_sun.svg?raw';
+import womensAndMensRestroomSymbol from '@waysidemapping/pinhead/dist/icons/womens_and_mens_restroom_symbol.svg?raw';
+
 import wikipedia from '../icons/wikipedia.svg?raw';
+import parkingP from '@waysidemapping/pinhead/dist/icons/parking_p.svg?raw';
+import car from '@waysidemapping/pinhead/dist/icons/car.svg?raw';

 const ICONS = {
-  'arrow-left': arrowLeft,
  activity,
+  angelfish,
+  'arrow-left': arrowLeft,
+  barbell,
+  banknote,
+  'badge-shield-with-fire': badgeShieldWithFire,
+  'beach-umbrella-in-ground': beachUmbrellaInGround,
+  'beer-mug-with-foam': beerMugWithFoam,
  bookmark,
+  'boxing-glove-up': boxingGloveUp,
+  'burger-and-drink-cup-with-straw': burgerAndDrinkCupWithStraw,
+  bus,
  camera,
  'check-square': checkSquare,
+  'cigarette-with-smoke-curl': cigaretteWithSmokeCurl,
+  climbing_wall: climbingWall,
+  'classical-building': classicalBuilding,
+  'classical-building-with-dome-and-flag': classicalBuildingWithDomeAndFlag,
+  'classical-building-with-flag': classicalBuildingWithFlag,
+  'commercial-building': commercialBuilding,
+  'clothes-hanger': clothesHanger,
+  cleaver,
+  cloth,
+  cocktail,
  clock,
+  'coffee-bean': coffeeBean,
+  'comedy-mask-and-tragedy-mask': comedyMaskAndTragedyMask,
+  croissant,
  'cup-and-saucer': cupAndSaucer,
+  donut,
  edit,
+  eyeglasses,
  facebook,
+  'fancy-mirror-with-reflection-and-stars': fancyMirrorWithReflectionAndStars,
+  'family-restroom-symbol': familyRestroomSymbol,
+  film,
+  'fingernail-polished': fingernailPolished,
+  fish,
+  'flag-checkered': flagCheckered,
+  'flower-bouquet': flowerBouquet,
+  'fork-and-knife': forkAndKnife,
+  fort,
  gift,
  globe,
+  gravestone,
+  'grecian-vase': grecianVase,
+  'greek-cross': greekCross,
  heart,
  home,
+  'ice-cream-on-cone': iceCreamOnCone,
  info,
  instagram,
-  'fork-and-knife': forkAndKnife,
+  jewel,
  'log-in': logIn,
  'log-out': logOut,
+  'lowrise-building': lowriseBuilding,
  mail,
  map,
  'map-pin': mapPin,
+  'market-stall': marketStall,
+  'memorial-stone-with-inscription': memorialStoneWithInscription,
  menu,
+  'mobile-phone-with-keypad-and-antenna': mobilePhoneWithKeypadAndAntenna,
+  'molar-tooth': molarTooth,
  navigation,
+  'needle-and-spool-of-thread': needleAndSpoolOfThread,
+  'open-book': openBook,
+  palace,
+  'person-cricket-batting-at-cricket-ball': personCricketBattingAtCricketBall,
+  'person-boarding-tram-with-destination-display-and-pantograph-on-tram-track':
+    personBoardingTramWithDestinationDisplayAndPantographOnTramTrack,
+  'person-jockeying-racehorse': personJockeyingRacehorse,
+  'person-playing-tennis': personPlayingTennis,
+  'person-running': personRunning,
  'person-sleeping-in-bed': personSleepingInBed,
+  'person-swimming-in-water': personSwimmingInWater,
+  'person-swinging-golf-club': personSwingingGolfClub,
  phone,
+  'plane-top-right': planeTopRight,
+  'plant-in-raised-planter': plantInRaisedPlanter,
+  'place-of-worship-building': placeOfWorshipBuilding,
+  'play-structure-with-slide': playStructureWithSlide,
+  'police-officer-with-stop-arm': policeOfficerWithStopArm,
  plus,
-  server,
+  'round-structure-with-flag': roundStructureWithFlag,
+  'sailing-ship-in-water': sailingShipInWater,
+  'scissors-open': scissorsOpen,
+  'shipwreck-in-water': shipwreckInWater,
+  'shopping-bag': shoppingBag,
  search,
+  server,
  settings,
  'shopping-basket': shoppingBasket,
+  'shopping-cart': shoppingCart,
+  'table-tennis-paddle': tableTennisPaddle,
+  'tattoo-machine': tattooMachine,
+  toolbox,
  target,
+  'tree-and-bench-with-backrest': treeAndBenchWithBackrest,
  user,
+  'village-buildings': villageBuildings,
+  'wall-hanging-with-mountains-and-sun': wallHangingWithMountainsAndSun,
+  'womens-and-mens-restroom-symbol': womensAndMensRestroomSymbol,
  wikipedia,
+  parking_p: parkingP,
+  car,
  x,
  zap,
+  'loading-ring': loadingRing,
 };

 const FILLED_ICONS = [
  'fork-and-knife',
  'wikipedia',
  'cup-and-saucer',
+  'coffee-bean',
  'shopping-basket',
  'camera',
  'person-sleeping-in-bed',
+  'loading-ring',
 ];

 export function getIcon(name) {
--- a/app/utils/osm-icons.js
+++ b/app/utils/osm-icons.js
@@ -0,0 +1,224 @@
+import { getIcon } from './icons';
+
+// Rules for mapping OSM tags to icons.
+// Rules are evaluated in order. The first rule where all specified tags match is used.
+export const POI_ICON_RULES = [
+  // Specific Cuisine
+  { tags: { cuisine: 'donut' }, icon: 'donut' },
+  { tags: { cuisine: 'doughnut' }, icon: 'donut' },
+  { tags: { cuisine: 'coffee_shop' }, icon: 'coffee-bean' },
+  { tags: { cuisine: 'coffee' }, icon: 'coffee-bean' },
+
+  // General Amenity/Shop Types
+  { tags: { amenity: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+  { tags: { cuisine: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+  { tags: { shop: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+
+  { tags: { amenity: 'cafe' }, icon: 'cup-and-saucer' },
+  { tags: { amenity: 'restaurant' }, icon: 'fork-and-knife' },
+  { tags: { amenity: 'fast_food' }, icon: 'burger-and-drink-cup-with-straw' },
+  { tags: { amenity: 'pub' }, icon: 'beer-mug-with-foam' },
+  { tags: { amenity: 'bar' }, icon: 'cocktail' },
+  { tags: { amenity: 'food_court' }, icon: 'fork-and-knife' },
+  { tags: { amenity: 'childcare' }, icon: 'family-restroom-symbol' },
+  { tags: { amenity: 'community_centre' }, icon: 'family-restroom-symbol' },
+  { tags: { amenity: 'social_centre' }, icon: 'family-restroom-symbol' },
+  { tags: { amenity: 'social_facility' }, icon: 'family-restroom-symbol' },
+
+  { tags: { amenity: 'bank' }, icon: 'banknote' },
+  { tags: { amenity: 'place_of_worship' }, icon: 'place-of-worship-building' },
+  { tags: { amenity: 'fire_station' }, icon: 'badge-shield-with-fire' },
+  { tags: { amenity: 'police' }, icon: 'police-officer-with-stop-arm' },
+  { tags: { amenity: 'toilets' }, icon: 'womens-and-mens-restroom-symbol' },
+  { tags: { amenity: 'school' }, icon: 'open-book' },
+  { tags: { amenity: 'driving_school' }, icon: 'car' },
+
+  { tags: { shop: 'coffee' }, icon: 'coffee-bean' },
+  { tags: { shop: 'tea' }, icon: 'coffee-bean' },
+  { tags: { shop: 'pastry' }, icon: 'donut' },
+
+  // Shopping
+  { tags: { shop: 'supermarket' }, icon: 'shopping-cart' },
+  { tags: { shop: 'convenience' }, icon: 'shopping-basket' },
+  { tags: { shop: 'grocery' }, icon: 'shopping-basket' },
+  { tags: { shop: 'greengrocer' }, icon: 'shopping-basket' },
+  { tags: { shop: 'bakery' }, icon: 'croissant' },
+  { tags: { shop: 'butcher' }, icon: 'cleaver' },
+  { tags: { shop: 'seafood' }, icon: 'fish' },
+  { tags: { shop: 'deli' }, icon: 'shopping-basket' },
+  { tags: { shop: 'clothes' }, icon: 'clothes-hanger' },
+  { tags: { shop: 'clothing' }, icon: 'clothes-hanger' },
+  { tags: { shop: 'hairdresser' }, icon: 'scissors-open' },
+  { tags: { shop: 'optician' }, icon: 'eyeglasses' },
+  { tags: { shop: 'fabric' }, icon: 'cloth' },
+  { tags: { shop: 'flea_market' }, icon: 'market-stall' },
+  { tags: { shop: 'kiosk' }, icon: 'shopping-basket' },
+  { tags: { shop: 'leather' }, icon: 'shopping-bag' },
+  { tags: { shop: 'tailor' }, icon: 'needle-and-spool-of-thread' },
+  { tags: { shop: 'jewelry' }, icon: 'jewel' },
+  { tags: { shop: 'jewellery' }, icon: 'jewel' },
+  { tags: { shop: 'tobacco' }, icon: 'cigarette-with-smoke-curl' },
+  { tags: { shop: 'cannabis' }, icon: 'cigarette-with-smoke-curl' },
+  { tags: { shop: 'florist' }, icon: 'flower-bouquet' },
+  { tags: { shop: 'garden_centre' }, icon: 'plant-in-raised-planter' },
+  { tags: { shop: 'estate_agent' }, icon: 'village-buildings' },
+  {
+    tags: { shop: 'mobile_phone' },
+    icon: 'mobile-phone-with-keypad-and-antenna',
+  },
+  { tags: { beauty: 'nails' }, icon: 'fingernail-polished' },
+  { tags: { shop: 'tattoo' }, icon: 'tattoo-machine' },
+  {
+    tags: { shop: 'beauty' },
+    icon: 'fancy-mirror-with-reflection-and-stars',
+  },
+  { tags: { craft: 'tailor' }, icon: 'needle-and-spool-of-thread' },
+  { tags: { office: 'estate_agent' }, icon: 'village-buildings' },
+  { tags: { office: true }, icon: 'commercial-building' },
+  { tags: { craft: true }, icon: 'toolbox' },
+  { tags: { shop: true }, icon: 'shopping-bag' },
+
+  // Natural
+  { tags: { natural: 'beach' }, icon: 'beach-umbrella-in-ground' },
+  { tags: { leisure: 'park' }, icon: 'tree-and-bench-with-backrest' },
+  { tags: { leisure: 'playground' }, icon: 'play-structure-with-slide' },
+
+  // Transport
+  { tags: { aeroway: 'aerodrome' }, icon: 'plane-top-right' },
+  { tags: { aeroway: 'heliport' }, icon: 'plane-top-right' },
+  { tags: { aeroway: 'helipad' }, icon: 'plane-top-right' },
+  { tags: { highway: 'bus_stop' }, icon: 'bus' },
+  { tags: { bus: true }, icon: 'bus' },
+  {
+    tags: { railway: 'tram_stop' },
+    icon: 'person-boarding-tram-with-destination-display-and-pantograph-on-tram-track',
+  },
+
+  // Tourism
+  { tags: { tourism: 'museum' }, icon: 'classical-building' },
+  { tags: { tourism: 'gallery' }, icon: 'wall-hanging-with-mountains-and-sun' },
+  { tags: { tourism: 'aquarium' }, icon: 'angelfish' },
+  { tags: { tourism: 'theme_park' }, icon: 'camera' },
+  { tags: { tourism: 'attraction' }, icon: 'camera' },
+  { tags: { tourism: 'viewpoint' }, icon: 'camera' },
+  { tags: { tourism: 'zoo' }, icon: 'camera' },
+  { tags: { tourism: 'artwork' }, icon: 'camera' },
+  { tags: { amenity: 'cinema' }, icon: 'film' },
+  { tags: { amenity: 'theatre' }, icon: 'camera' },
+  { tags: { amenity: 'arts_centre' }, icon: 'comedy-mask-and-tragedy-mask' },
+  { tags: { amenity: 'arts_center' }, icon: 'comedy-mask-and-tragedy-mask' },
+
+  // Historic
+  { tags: { historic: 'fort' }, icon: 'fort' },
+  { tags: { historic: 'castle' }, icon: 'palace' },
+  { tags: { historic: 'building' }, icon: 'classical-building-with-flag' },
+  { tags: { historic: 'archaeological_site' }, icon: 'grecian-vase' },
+  { tags: { historic: 'memorial' }, icon: 'memorial-stone-with-inscription' },
+  { tags: { historic: 'tomb' }, icon: 'gravestone' },
+  {
+    tags: { historic: 'monument' },
+    icon: 'classical-building-with-dome-and-flag',
+  },
+  { tags: { historic: 'ship' }, icon: 'sailing-ship-in-water' },
+  { tags: { historic: 'wreck' }, icon: 'shipwreck-in-water' },
+  { tags: { historic: 'ruins' }, icon: 'camera' },
+  { tags: { historic: 'ruin' }, icon: 'camera' },
+  { tags: { historic: 'yes' }, icon: 'camera' },
+
+  // Accommodation
+  { tags: { tourism: 'hotel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'hostel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'motel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'guest_house' }, icon: 'person-sleeping-in-bed' },
+
+  // Sports / Motorsports
+  { tags: { sport: 'motor' }, icon: 'flag-checkered' },
+  { tags: { sport: 'karting' }, icon: 'flag-checkered' },
+  { tags: { sport: 'motocross' }, icon: 'flag-checkered' },
+  {
+    tags: { sport: 'cricket' },
+    icon: 'person-cricket-batting-at-cricket-ball',
+  },
+  { tags: { sport: 'boxing' }, icon: 'boxing-glove-up' },
+  { tags: { sport: 'martial_arts' }, icon: 'boxing-glove-up' },
+  { tags: { sport: 'tennis' }, icon: 'person-playing-tennis' },
+  { tags: { sport: 'squash' }, icon: 'person-playing-tennis' },
+  { tags: { sport: 'padel' }, icon: 'person-playing-tennis' },
+  { tags: { sport: 'table_tennis' }, icon: 'table-tennis-paddle' },
+  { tags: { sport: 'climbing' }, icon: 'climbing_wall' },
+  { tags: { leisure: 'water_park' }, icon: 'person-swimming-in-water' },
+  { tags: { sport: 'swimming' }, icon: 'person-swimming-in-water' },
+  { tags: { sport: 'golf' }, icon: 'person-swinging-golf-club' },
+  { tags: { leisure: 'golf_course' }, icon: 'person-swinging-golf-club' },
+  { tags: { sport: 'horse_racing' }, icon: 'person-jockeying-racehorse' },
+  { tags: { sport: 'fitness' }, icon: 'barbell' },
+  { tags: { sport: 'fitness_centre' }, icon: 'barbell' },
+  { tags: { leisure: 'fitness_centre' }, icon: 'barbell' },
+
+  { tags: { sport: 'stadium' }, icon: 'round-structure-with-flag' },
+  { tags: { leisure: 'stadium' }, icon: 'round-structure-with-flag' },
+  { tags: { leisure: 'sports_centre' }, icon: 'person-running' },
+  { tags: { leisure: 'pitch' }, icon: 'person-running' },
+  { tags: { sport: true }, icon: 'person-running' },
+
+  // Healthcare
+  { tags: { amenity: 'dentist' }, icon: 'molar-tooth' },
+  { tags: { healthcare: 'dentist' }, icon: 'molar-tooth' },
+  { tags: { healthcare: true }, icon: 'greek-cross' },
+
+  // Parking
+  { tags: { amenity: 'parking' }, icon: 'parking_p' },
+
+  // Buildings
+  { tags: { building: 'commercial' }, icon: 'commercial-building' },
+  { tags: { building: 'apartments' }, icon: 'lowrise-building' },
+];
+
+/**
+ * Finds the appropriate icon name based on the place's OSM tags.
+ * @param {Object} tags - The OSM tags of the place.
+ * @returns {string|null} - The name of the icon or null if no match found.
+ */
+export function getIconNameForTags(tags) {
+  if (!tags) return null;
+
+  for (const rule of POI_ICON_RULES) {
+    let match = true;
+    for (const [key, expectedValue] of Object.entries(rule.tags)) {
+      const tagValue = tags[key];
+      if (!tagValue) {
+        match = false;
+        break;
+      }
+
+      // Check for exact match or if value is in a semicolon-separated list
+      // e.g. "donut;coffee_shop"
+      const values = tagValue.split(';').map((v) => v.trim());
+
+      // If expectedValue is boolean true, any value is a match
+      if (expectedValue === true) {
+        continue;
+      }
+
+      if (!values.includes(expectedValue)) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      return rule.icon;
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns the raw SVG string for the icon corresponding to the given tags.
+ * @param {Object} tags - The OSM tags.
+ * @returns {string|null} - The raw SVG string or null.
+ */
+export function getIconSvgForTags(tags) {
+  const iconName = getIconNameForTags(tags);
+  if (!iconName) return null;
+  return getIcon(iconName);
+}
--- a/app/utils/poi-categories.js
+++ b/app/utils/poi-categories.js
@@ -13,7 +13,9 @@ export const POI_CATEGORIES = [
    id: 'restaurants',
    label: 'Restaurants',
    icon: 'fork-and-knife',
-    filter: ['["amenity"~"^(restaurant|fast_food|food_court|pub|cafe)$"]'],
+    filter: [
+      '["amenity"~"^(restaurant|fast_food|food_court|pub|cafe)$"]["cuisine"!~"coffee"]',
+    ],
    types: ['node', 'way'],
  },
  {
@@ -45,6 +47,7 @@ export const POI_CATEGORIES = [
      '["amenity"~"^(cinema|theatre|arts_centre|planetarium)$"]',
      '["leisure"~"^(sports_centre|stadium|water_park)$"]',
      '["historic"]',
+      '["shop"="flea_market"]',
    ],
    types: ['node', 'way', 'relation'],
  },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "marco",
-  "version": "1.16.0",
+  "version": "1.17.2",
  "private": true,
  "description": "Unhosted maps app",
  "repository": {
@@ -102,7 +102,7 @@
    "edition": "octane"
  },
  "dependencies": {
-    "@waysidemapping/pinhead": "^15.17.0",
+    "@waysidemapping/pinhead": "^15.20.0",
    "ember-concurrency": "^5.2.0",
    "ember-lifeline": "^7.0.0"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
  .:
    dependencies:
      '@waysidemapping/pinhead':
-        specifier: ^15.17.0
-        version: 15.17.0
+        specifier: ^15.20.0
+        version: 15.20.0
      ember-concurrency:
        specifier: ^5.2.0
        version: 5.2.0(@babel/core@7.28.6)
@@ -1654,8 +1654,8 @@ packages:
    peerDependencies:
      '@warp-drive/core': 5.8.1

-  '@waysidemapping/pinhead@15.17.0':
-    resolution: {integrity: sha512-XcL/0Ll+gkRIpXlO+skwd6USynA+mX3DNwqrWDMhgRmLP4DNRPTeaecK64BBxk1bB/F9Xi/9kgN6JA5zbdgejQ==}
+  '@waysidemapping/pinhead@15.20.0':
+    resolution: {integrity: sha512-JD9XINaMhtEy3VEjvc+l4r1sLwbyOKoYdD2IYY2QNKP3FeeNwE/2gcUly631JH9jPymoFeOix0f3o9L/n9YDSQ==}

  '@xmldom/xmldom@0.8.11':
    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
@@ -7245,7 +7245,7 @@ snapshots:
      - '@glint/template'
      - supports-color

-  '@waysidemapping/pinhead@15.17.0': {}
+  '@waysidemapping/pinhead@15.20.0': {}

  '@xmldom/xmldom@0.8.11': {}

--- a/release/assets/main-B8Ckz4Ru.js
+++ b/release/assets/main-B8Ckz4Ru.js
--- a/release/assets/main-BOfcjRke.css
+++ b/release/assets/main-BOfcjRke.css
--- a/release/assets/main-OLSOzTKA.css
+++ b/release/assets/main-OLSOzTKA.css
--- a/release/assets/main-gEUnNw-L.js
+++ b/release/assets/main-gEUnNw-L.js
--- a/release/assets/modules-4-12-BBU9VywN.js
+++ b/release/assets/modules-4-12-BBU9VywN.js
--- a/release/index.html
+++ b/release/index.html
@@ -39,8 +39,8 @@
    <meta name="msapplication-TileColor" content="#F6E9A6">
    <meta name="msapplication-TileImage" content="/icons/icon-144.png">

-  <script type="module" crossorigin src="/assets/main-gEUnNw-L.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-BOfcjRke.css">
+  <script type="module" crossorigin src="/assets/main-B8Ckz4Ru.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-OLSOzTKA.css">
 </head>
  <body>
 </body>
--- a/tests/acceptance/map-search-reset-test.js
+++ b/tests/acceptance/map-search-reset-test.js
@@ -0,0 +1,182 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, waitFor, triggerEvent } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+import sinon from 'sinon';
+
+module('Acceptance | map search reset', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    // Seed localStorage with a high zoom level to ensure map is interactive
+    const highZoomState = {
+      center: [13.4, 52.5],
+      zoom: 18,
+    };
+    window.localStorage.setItem(
+      'marco:map-view',
+      JSON.stringify(highZoomState)
+    );
+
+    // Stub window.fetch using Sinon
+    // We want to intercept map style requests and let everything else through
+    this.fetchStub = sinon.stub(window, 'fetch');
+
+    this.fetchStub.callsFake(async (input, init) => {
+      let url = input;
+      if (typeof input === 'object' && input !== null && 'url' in input) {
+        url = input.url;
+      }
+
+      if (
+        typeof url === 'string' &&
+        url.includes('tiles.openfreemap.org/styles/liberty')
+      ) {
+        return {
+          ok: true,
+          status: 200,
+          json: async () => ({
+            version: 8,
+            name: 'Liberty',
+            sources: {
+              openmaptiles: {
+                type: 'vector',
+                url: 'https://tiles.openfreemap.org/planet',
+              },
+            },
+            layers: [
+              {
+                id: 'background',
+                type: 'background',
+                paint: {
+                  'background-color': '#123456',
+                },
+              },
+            ],
+            glyphs:
+              'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
+            sprite: 'https://tiles.openfreemap.org/sprites/liberty',
+          }),
+        };
+      }
+
+      // Pass through to the original implementation
+      return this.fetchStub.wrappedMethod(input, init);
+    });
+  });
+
+  hooks.afterEach(function () {
+    window.localStorage.removeItem('marco:map-view');
+    // Restore the original fetch
+    this.fetchStub.restore();
+  });
+
+  test('clicking the map clears the category search parameter', async function (assert) {
+    // Mock OSM Service
+    class MockOsmService extends Service {
+      async getCategoryPois() {
+        return [
+          {
+            title: 'Cafe Test',
+            lat: 52.52,
+            lon: 13.405,
+            osmId: '123',
+            osmType: 'N',
+          },
+        ];
+      }
+      async getNearbyPois() {
+        return [];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Storage
+    this.owner.register(
+      'service:storage',
+      class extends Service {
+        rs = { on: () => {} };
+        placesInView = [];
+        savedPlaces = [];
+        loadPlacesInBounds() {
+          return Promise.resolve();
+        }
+        findPlaceById() {
+          return null;
+        }
+      }
+    );
+
+    // 1. Visit a category search URL
+    await visit('/search?category=coffee&lat=52.52&lon=13.405');
+
+    assert.dom('.sidebar-header').includesText('Results');
+    assert.ok(
+      currentURL().includes('category=coffee'),
+      'URL should have category param'
+    );
+
+    // 2. Click the map (First click closes sidebar)
+    await waitFor('canvas', { timeout: 2000 });
+
+    const canvas = document.querySelector('canvas');
+    if (canvas) {
+      // First Click (Close Sidebar)
+      await triggerEvent(canvas, 'pointerdown', {
+        clientX: 200,
+        clientY: 200,
+        button: 0,
+        isPrimary: true,
+      });
+      await triggerEvent(canvas, 'pointerup', {
+        clientX: 200,
+        clientY: 200,
+        button: 0,
+        isPrimary: true,
+      });
+      await triggerEvent(canvas, 'click', {
+        clientX: 200,
+        clientY: 200,
+        bubbles: true,
+      });
+
+      // Wait for transition to index
+      await new Promise((r) => setTimeout(r, 500));
+      assert.strictEqual(
+        currentURL(),
+        '/',
+        'Should have transitioned to index (closed sidebar)'
+      );
+
+      // Second Click (Start new search)
+      // Click slightly differently to ensure fresh event
+      await triggerEvent(canvas, 'pointerdown', {
+        clientX: 250,
+        clientY: 250,
+        button: 0,
+        isPrimary: true,
+      });
+      await triggerEvent(canvas, 'pointerup', {
+        clientX: 250,
+        clientY: 250,
+        button: 0,
+        isPrimary: true,
+      });
+      await triggerEvent(canvas, 'click', {
+        clientX: 250,
+        clientY: 250,
+        bubbles: true,
+      });
+    }
+
+    // 3. Wait for transition
+    await new Promise((r) => setTimeout(r, 1000));
+
+    const newUrl = currentURL();
+    assert.notOk(
+      newUrl.includes('category=coffee'),
+      `New URL ${newUrl} should not contain category param`
+    );
+    assert.ok(newUrl.includes('/search'), 'Should be on search route');
+  });
+});
--- a/tests/acceptance/navigation-test.js
+++ b/tests/acceptance/navigation-test.js
@@ -64,25 +64,24 @@ module('Acceptance | navigation', function (hooks) {
    this.owner.register('service:storage', MockStorageService);
  });

-  test('navigating from search results to place and back uses history', async function (assert) {
+  test('navigating from search results to place and back returns to search', async function (assert) {
    const mapUi = this.owner.lookup('service:map-ui');
-    const backStub = sinon.stub(window.history, 'back');

-    try {
-      await visit('/search?lat=1&lon=1');
-      assert.strictEqual(currentURL(), '/search?lat=1&lon=1');
+    await visit('/search?lat=1&lon=1');
+    assert.strictEqual(currentURL(), '/search?lat=1&lon=1');

-      await click('.place-item');
-      assert.ok(currentURL().includes('/place/'), 'Navigated to place');
-      assert.true(mapUi.returnToSearch, 'Flag returnToSearch is set');
+    await click('.place-item');
+    assert.ok(currentURL().includes('/place/'), 'Navigated to place');
+    assert.true(mapUi.returnToSearch, 'Flag returnToSearch is set');

-      // Click the back button in the sidebar
-      await click('.back-btn');
+    // Click the back button in the sidebar
+    await click('.back-btn');

-      assert.true(backStub.calledOnce, 'window.history.back() was called');
-    } finally {
-      backStub.restore();
-    }
+    assert.strictEqual(
+      currentURL(),
+      '/search?lat=1&lon=1',
+      'Returned to search results'
+    );
  });

  test('closing the sidebar resets the returnToSearch flag', async function (assert) {
--- a/tests/acceptance/search-loading-test.js
+++ b/tests/acceptance/search-loading-test.js
@@ -0,0 +1,136 @@
+import { module, test } from 'qunit';
+import { visit, click, fillIn, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+import { Promise } from 'rsvp';
+
+class MockPhotonService extends Service {
+  cancelAll() {}
+
+  async search(query) {
+    // Simulate network delay
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (query === 'slow') {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+    return [
+      {
+        title: 'Test Place',
+        lat: 1,
+        lon: 1,
+        osmId: '123',
+        osmType: 'node',
+      },
+    ];
+  }
+}
+
+class MockOsmService extends Service {
+  cancelAll() {}
+
+  async getCategoryPois(bounds, category) {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (category === 'slow_category') {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+    return [];
+  }
+  async getNearbyPois() {
+    return [];
+  }
+}
+
+module('Acceptance | search loading', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:osm', MockOsmService);
+  });
+
+  test('search shows loading indicator but nearby search does not', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+
+    // 1. Text Search
+    // Start a search and check for loading state immediately
+    const searchPromise = visit('/search?q=slow');
+
+    // We can't easily check the DOM mid-transition in acceptance tests without complicated helpers,
+    // so we check the service state which drives the UI.
+    // Wait a tiny bit for the route to start processing
+    await new Promise((r) => setTimeout(r, 10));
+
+    assert.deepEqual(
+      mapUi.loadingState,
+      { type: 'text', value: 'slow' },
+      'Loading state is set for text search'
+    );
+
+    await searchPromise;
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is cleared after text search'
+    );
+
+    // 2. Category Search
+    const catPromise = visit('/search?category=slow_category&lat=1&lon=1');
+    await new Promise((r) => setTimeout(r, 10));
+
+    assert.deepEqual(
+      mapUi.loadingState,
+      { type: 'category', value: 'slow_category' },
+      'Loading state is set for category search'
+    );
+
+    await catPromise;
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is cleared after category search'
+    );
+
+    // 3. Nearby Search
+    await visit('/search?lat=1&lon=1');
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is NOT set for nearby search'
+    );
+  });
+
+  test('clearing search stops loading indicator', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+
+    // 1. Start from index
+    await visit('/');
+
+    // 2. Type "slow" to trigger autocomplete (which is async)
+    await fillIn('.search-input', 'slow');
+
+    // 3. Submit search to trigger route loading
+    click('.search-submit-btn'); // Intentionally no await to not block on transition
+
+    // Wait for loading state to activate
+    await new Promise((r) => setTimeout(r, 100));
+
+    assert.deepEqual(
+      mapUi.loadingState,
+      { type: 'text', value: 'slow' },
+      'Loading state is set'
+    );
+
+    // 4. Click the clear button (should be visible since input has value)
+    await click('.search-clear-btn');
+
+    // Verify loading state is cleared immediately
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is cleared immediately after clicking clear'
+    );
+
+    // Verify we are back on index (or at least query is gone)
+    assert.strictEqual(currentURL(), '/', 'Navigated to index');
+  });
+});
--- a/tests/acceptance/search-test.js
+++ b/tests/acceptance/search-test.js
@@ -155,4 +155,119 @@ module('Acceptance | search', function (hooks) {
    assert.dom('.places-list li').exists({ count: 1 });
    assert.dom('.places-list li .place-name').hasText('My Secret Base');
  });
+
+  test('visiting /search with category parameter performs category search', async function (assert) {
+    // Mock Osm Service
+    class MockOsmService extends Service {
+      async getCategoryPois(bounds, categoryId) {
+        if (categoryId === 'coffee') {
+          return [
+            {
+              title: 'Latte Art Cafe',
+              lat: 52.52,
+              lon: 13.405,
+              osmId: '101',
+              osmType: 'N',
+              description: 'Best Coffee',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Storage Service (empty)
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = { on: () => {} };
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Map Service (needed for bounds)
+    class MockMapService extends Service {
+      getBounds() {
+        return {
+          minLat: 52.5,
+          minLon: 13.4,
+          maxLat: 52.6,
+          maxLon: 13.5,
+        };
+      }
+    }
+    this.owner.register('service:map', MockMapService);
+
+    await visit('/search?category=coffee&lat=52.52&lon=13.405');
+
+    assert.strictEqual(
+      currentURL(),
+      '/search?category=coffee&lat=52.52&lon=13.405'
+    );
+    assert.dom('.places-list li').exists({ count: 1 });
+    assert.dom('.places-list li .place-name').hasText('Latte Art Cafe');
+    // Ensure it shows "Results" not "Nearby"
+    assert.dom('.sidebar-header h2').includesText('Results');
+  });
+
+  test('search error handling prevents opening empty panel and shows toast', async function (assert) {
+    // Mock Osm Service to throw an error
+    class MockOsmService extends Service {
+      async getCategoryPois() {
+        throw new Error('Overpass request failed');
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = { on: () => {} };
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    class MockMapService extends Service {
+      getBounds() {
+        return {
+          minLat: 52.5,
+          minLon: 13.4,
+          maxLat: 52.6,
+          maxLon: 13.5,
+        };
+      }
+    }
+    this.owner.register('service:map', MockMapService);
+
+    await visit('/');
+
+    try {
+      await visit('/search?category=coffee&lat=52.52&lon=13.405');
+    } catch {
+      // Aborted transition throws, which is expected
+    }
+
+    assert.dom('.toast-notification').exists('Toast should be visible');
+    assert
+      .dom('.toast-notification')
+      .hasText('Search request failed. Please try again.');
+    assert.dom('.places-sidebar').doesNotExist('Results panel should not open');
+  });
 });
--- a/tests/integration/components/app-header-test.gjs
+++ b/tests/integration/components/app-header-test.gjs
@@ -1,13 +1,29 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'marco/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { render, fillIn } from '@ember/test-helpers';
 import AppHeader from 'marco/components/app-header';
+import Service from '@ember/service';

 module('Integration | Component | app-header', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders the search box', async function (assert) {
    this.noop = () => {};
+
+    class MockPhotonService extends Service {}
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {}
+    class MockMapService extends Service {}
+    class MockSettingsService extends Service {
+      showQuickSearchButtons = true;
+    }
+
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+    this.owner.register('service:map', MockMapService);
+    this.owner.register('service:settings', MockSettingsService);
+
    await render(
      <template><AppHeader @onToggleMenu={{this.noop}} /></template>
    );
@@ -16,4 +32,43 @@ module('Integration | Component | app-header', function (hooks) {
    assert.dom('.search-box').exists('Search box is present in the header');
    assert.dom('.menu-btn-integrated').exists('Menu button is integrated');
  });
+
+  test('typing in search box toggles .searching class on header-center', async function (assert) {
+    this.noop = () => {};
+
+    class MockPhotonService extends Service {
+      search() {
+        return [];
+      }
+    }
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {
+      setSearchBoxFocus() {}
+      currentCenter = null;
+    }
+    class MockMapService extends Service {}
+    class MockSettingsService extends Service {
+      showQuickSearchButtons = true;
+    }
+
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+    this.owner.register('service:map', MockMapService);
+    this.owner.register('service:settings', MockSettingsService);
+
+    await render(
+      <template><AppHeader @onToggleMenu={{this.noop}} /></template>
+    );
+
+    assert.dom('.header-center').doesNotHaveClass('searching');
+
+    await fillIn('.search-input', 'test');
+
+    assert.dom('.header-center').hasClass('searching');
+
+    await fillIn('.search-input', '');
+
+    assert.dom('.header-center').doesNotHaveClass('searching');
+  });
 });
--- a/tests/integration/components/category-chips-test.gjs
+++ b/tests/integration/components/category-chips-test.gjs
@@ -0,0 +1,56 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import CategoryChips from 'marco/components/category-chips';
+import Service from '@ember/service';
+import { POI_CATEGORIES } from 'marco/utils/poi-categories';
+
+module('Integration | Component | category-chips', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the correct number of chips', async function (assert) {
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {}
+
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    await render(<template><CategoryChips /></template>);
+
+    assert.dom('.category-chip').exists({ count: 5 });
+
+    // Check for some expected labels
+    assert.dom(this.element).includesText('Restaurants');
+    assert.dom(this.element).includesText('Coffee');
+  });
+
+  test('clicking a chip triggers the @onSelect action', async function (assert) {
+    let selectedCategory;
+    this.handleSelect = (category) => {
+      selectedCategory = category;
+    };
+
+    class MockRouterService extends Service {
+      transitionTo() {}
+    }
+    class MockMapUiService extends Service {}
+
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    await render(
+      <template><CategoryChips @onSelect={{this.handleSelect}} /></template>
+    );
+
+    // Find the chip for "Coffee"
+    const coffeeCategory = POI_CATEGORIES.find((c) => c.id === 'coffee');
+    const chip = Array.from(
+      this.element.querySelectorAll('.category-chip')
+    ).find((el) => el.textContent.includes(coffeeCategory.label));
+
+    await click(chip);
+
+    assert.strictEqual(selectedCategory.id, 'coffee');
+    assert.strictEqual(selectedCategory.label, 'Coffee');
+  });
+});
--- a/tests/integration/components/search-box-test.gjs
+++ b/tests/integration/components/search-box-test.gjs
@@ -100,7 +100,7 @@ module('Integration | Component | search-box', function (hooks) {
      .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));

    assert.verifySteps([
-      'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"lat":"52.5200","lon":"13.4050"}}',
+      'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"category":null,"lat":"52.5200","lon":"13.4050"}}',
    ]);
  });

@@ -134,4 +134,96 @@ module('Integration | Component | search-box', function (hooks) {

    assert.verifySteps(['search: cafe, 52.52, 13.405']);
  });
+
+  test('it allows typing even when controlled by parent with a query argument', async function (assert) {
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.query = '';
+    this.updateQuery = (val) => {
+      this.set('query', val);
+    };
+    this.noop = () => {};
+
+    await render(
+      <template>
+        <SearchBox
+          @query={{this.query}}
+          @onQueryChange={{this.updateQuery}}
+          @onToggleMenu={{this.noop}}
+        />
+      </template>
+    );
+
+    // Initial state
+    assert.dom('.search-input').hasValue('');
+
+    // Simulate typing
+    await fillIn('.search-input', 't');
+    assert.dom('.search-input').hasValue('t', 'Input should show "t"');
+
+    await fillIn('.search-input', 'te');
+    assert.dom('.search-input').hasValue('te', 'Input should show "te"');
+
+    // Simulate external update (e.g. chip click)
+    this.set('query', 'restaurant');
+    // wait for re-render
+    await click('.search-input'); // just to trigger a change cycle or ensure stability
+    assert
+      .dom('.search-input')
+      .hasValue('restaurant', 'Input should update from external change');
+  });
+
+  test('it triggers category search with current location when clicking category result', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 51.5074, lon: -0.1278 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, options) {
+        assert.step(`transitionTo: ${routeName} ${JSON.stringify(options)}`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type "Resta" to trigger "Restaurants" category match
+    await fillIn('.search-input', 'Resta');
+
+    // Wait for debounce (300ms) + execution
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    await delay(400);
+
+    // The first result should be the category match
+    assert.dom('.search-result-item').exists({ count: 1 });
+    assert.dom('.result-title').hasText('Restaurants');
+
+    // Click the result
+    await click('.search-result-item');
+
+    // Assert transition with lat/lon from map center
+    assert.verifySteps([
+      'transitionTo: search {"queryParams":{"q":"Restaurants","category":"restaurants","selected":null,"lat":"51.5074","lon":"-0.1278"}}',
+    ]);
+  });
 });
--- a/tests/unit/services/map-ui-test.js
+++ b/tests/unit/services/map-ui-test.js
@@ -0,0 +1,68 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Service | map-ui', function (hooks) {
+  setupTest(hooks);
+
+  test('it handles loading state correctly', function (assert) {
+    let service = this.owner.lookup('service:map-ui');
+
+    // Initial state
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState starts as null'
+    );
+
+    // Start loading search A
+    service.startLoading('search', 'A');
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'A' },
+      'loadingState is set to search A'
+    );
+
+    // Stop loading search A (successful case)
+    service.stopLoading('search', 'A');
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState is cleared when stopped with matching parameters'
+    );
+  });
+
+  test('it handles race condition: stopLoading only clears if parameters match', function (assert) {
+    let service = this.owner.lookup('service:map-ui');
+
+    // 1. Start loading search A
+    service.startLoading('search', 'A');
+    assert.deepEqual(service.loadingState, { type: 'search', value: 'A' });
+
+    // 2. Start loading search B (interruption)
+    // In a real app, search B would start before search A finishes.
+    service.startLoading('search', 'B');
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'B' },
+      'loadingState updates to search B'
+    );
+
+    // 3. Search A finishes and tries to stop loading
+    // The service should ignore this because current loading state is for B
+    service.stopLoading('search', 'A');
+
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'B' },
+      'loadingState remains search B even after stopping search A'
+    );
+
+    // 4. Search B finishes
+    service.stopLoading('search', 'B');
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState is cleared when search B stops'
+    );
+  });
+});
--- a/tests/unit/services/osm-test.js
+++ b/tests/unit/services/osm-test.js
@@ -251,4 +251,45 @@ module('Unit | Service | osm', function (hooks) {
      [30, 30],
    ]);
  });
+
+  test('getCategoryPois uses cache when lat/lon matches', async function (assert) {
+    let service = this.owner.lookup('service:osm');
+
+    // Mock settings
+    service.settings = { overpassApi: 'http://test-api' };
+
+    // Mock fetchWithRetry
+    let fetchCount = 0;
+    service.fetchWithRetry = async () => {
+      fetchCount++;
+      return {
+        ok: true,
+        json: async () => ({
+          elements: [{ id: 1, type: 'node', tags: { name: 'Test' } }],
+        }),
+      };
+    };
+
+    const bounds = { minLat: 0, minLon: 0, maxLat: 1, maxLon: 1 };
+
+    // First call - should fetch
+    await service.getCategoryPois(bounds, 'restaurants', 52.5, 13.4);
+    assert.strictEqual(fetchCount, 1, 'First call should trigger fetch');
+
+    // Second call with same lat/lon - should cache
+    await service.getCategoryPois(bounds, 'restaurants', 52.5, 13.4);
+    assert.strictEqual(
+      fetchCount,
+      1,
+      'Second call with same lat/lon should use cache'
+    );
+
+    // Third call with diff lat/lon - should fetch
+    await service.getCategoryPois(bounds, 'restaurants', 52.6, 13.5);
+    assert.strictEqual(
+      fetchCount,
+      2,
+      'Call with different lat/lon should trigger fetch'
+    );
+  });
 });
--- a/tests/unit/utils/osm-icons-test.js
+++ b/tests/unit/utils/osm-icons-test.js
@@ -0,0 +1,39 @@
+import { getIconNameForTags } from 'marco/utils/osm-icons';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | osm-icons', function () {
+  test('it returns molar-tooth for amenity=dentist', function (assert) {
+    let result = getIconNameForTags({ amenity: 'dentist' });
+    assert.strictEqual(result, 'molar-tooth');
+  });
+
+  test('it returns molar-tooth for healthcare=dentist', function (assert) {
+    let result = getIconNameForTags({ healthcare: 'dentist' });
+    assert.strictEqual(result, 'molar-tooth');
+  });
+
+  test('it returns greek-cross for healthcare=hospital (catch-all)', function (assert) {
+    let result = getIconNameForTags({ healthcare: 'hospital' });
+    assert.strictEqual(result, 'greek-cross');
+  });
+
+  test('it returns greek-cross for healthcare=yes (catch-all)', function (assert) {
+    let result = getIconNameForTags({ healthcare: 'yes' });
+    assert.strictEqual(result, 'greek-cross');
+  });
+
+  test('it returns shopping-basket for known shop types like convenience', function (assert) {
+    let result = getIconNameForTags({ shop: 'convenience' });
+    assert.strictEqual(result, 'shopping-basket');
+  });
+
+  test('it returns shopping-bag for unknown shop types (catch-all)', function (assert) {
+    let result = getIconNameForTags({ shop: 'unknown_shop_type' });
+    assert.strictEqual(result, 'shopping-bag');
+  });
+
+  test('it returns null for unknown tags', function (assert) {
+    let result = getIconNameForTags({ foo: 'bar' });
+    assert.strictEqual(result, null);
+  });
+});
Author	SHA1	Message	Date
Râu Cao	913d5c915c	1.17.2 All checks were successful CI / Lint (push) Successful in 28s Details CI / Test (push) Successful in 43s Details	2026-03-28 16:49:03 +04:00
Râu Cao	89f667b17e	Add more icons	2026-03-28 16:48:14 +04:00
Râu Cao	22d4ef8d96	Update Pinhead	2026-03-28 16:47:53 +04:00
Râu Cao	b17793af9d	1.17.1 Some checks failed CI / Lint (push) Successful in 29s Details CI / Test (push) Failing after 44s Details	2026-03-28 15:32:21 +04:00
Râu Cao	dc9e0f210a	Hide search result markers when result is selected	2026-03-28 15:30:27 +04:00
Râu Cao	2b219fe0cf	1.17.0 All checks were successful CI / Lint (push) Successful in 28s Details CI / Test (push) Successful in 43s Details	2026-03-27 15:17:16 +04:00
Râu Cao	9fd6c4d64d	Merge pull request 'When search requests fail, show error in toast notifications instead of empty search results' (#38 ) from feature/failed_requests into master Some checks failed CI / Lint (push) Successful in 28s Details CI / Test (push) Failing after 44s Details Reviewed-on: #38	2026-03-27 11:12:58 +00:00
Râu Cao	8e5b2c7439	Fix lint error All checks were successful CI / Lint (pull_request) Successful in 28s Details CI / Test (pull_request) Successful in 44s Details Release Drafter / Update release notes draft (pull_request) Successful in 4s Details	2026-03-27 15:05:56 +04:00
Râu Cao	0f29430e1a	When request retries exhaust, show error in toast notification Some checks failed CI / Lint (pull_request) Failing after 29s Details CI / Test (pull_request) Failing after 44s Details	2026-03-27 15:01:04 +04:00
Râu Cao	0059d89cc3	Add toast notifications	2026-03-27 15:00:36 +04:00
Râu Cao	54e2766dc4	Merge pull request 'Add setting for hiding quick search buttons' (#36 ) from feature/settings_quick-search into master All checks were successful CI / Lint (push) Successful in 28s Details CI / Test (push) Successful in 43s Details Reviewed-on: #36	2026-03-27 10:09:18 +00:00
Râu Cao	5978f67d48	Add setting for hiding quick search buttons All checks were successful CI / Lint (pull_request) Successful in 28s Details CI / Test (pull_request) Successful in 44s Details Release Drafter / Update release notes draft (pull_request) Successful in 4s Details	2026-03-27 13:59:36 +04:00
Râu Cao	d72e5f3de2	Merge pull request 'Add category search, and search result markers with icons' (#35 ) from feature/poi_type_search into master All checks were successful CI / Lint (push) Successful in 31s Details CI / Test (push) Successful in 47s Details Reviewed-on: #35	2026-03-27 09:12:28 +00:00
Râu Cao	582ab4f8b3	Fix lint errors All checks were successful CI / Lint (pull_request) Successful in 53s Details CI / Test (pull_request) Successful in 47s Details Release Drafter / Update release notes draft (pull_request) Successful in 38s Details	2026-03-23 18:32:18 +04:00
Râu Cao	0ac6db65cb	Add parking icon Some checks are pending CI / Lint (pull_request) Waiting to run Details CI / Test (pull_request) Waiting to run Details	2026-03-23 18:21:41 +04:00
Râu Cao	86b20fd474	Abort search requests when clearing search box Also adds abort support for Photon queries	2026-03-23 18:07:29 +04:00
Râu Cao	8478e00253	Add loading indicator for search queries	2026-03-23 17:50:21 +04:00
Râu Cao	818ec35071	Ensure map marker clicks preserve search context Fixes the back button just closing the sidebar and clearing the whole search after having seleted a result via map marker	2026-03-23 16:42:32 +04:00
Râu Cao	46605dbd32	Add more icons	2026-03-23 16:07:33 +04:00
Râu Cao	bcc51efecc	Add catch-alls for place icons, staring with shop	2026-03-23 15:12:07 +04:00
Râu Cao	8bec4b978e	Ignore certain public transport results in nearby search	2026-03-23 15:00:39 +04:00
Râu Cao	cd9676047d	Add more icons	2026-03-23 14:42:41 +04:00
Râu Cao	a92b44ec13	Ensure nearby search isn't doing category search	2026-03-23 13:51:11 +04:00
Râu Cao	0c2d1f8419	Don't include coffee places in restaurant search	2026-03-22 19:23:16 +04:00
Râu Cao	bb77ed8337	Add more icons	2026-03-22 19:13:19 +04:00
Râu Cao	438bf0c31c	Add icons to search result markers	2026-03-22 14:05:49 +04:00
Râu Cao	af57e7fe57	Add map markers for search results	2026-03-22 10:59:11 +04:00
Râu Cao	9183e3c366	Cache category search results And abort ongoing searches when there's a new query	2026-03-20 19:27:26 +04:00
Râu Cao	7e98b6796c	Integrate category search with search box	2026-03-20 18:56:18 +04:00
Râu Cao	8e9beb16de	WIP Integrate category search with search box	2026-03-20 18:39:51 +04:00
Râu Cao	b083c1d001	feat(search): add category search support and sync with chips	2026-03-20 18:14:02 +04:00
Râu Cao	4008a8c883	Use "Results" header for category search results	2026-03-20 17:59:11 +04:00
Râu Cao	eb7cff7ff5	Add tests for category quick search	2026-03-20 17:49:54 +04:00
Râu Cao	db6478e353	Clear category param when typing new search	2026-03-20 17:42:36 +04:00
Râu Cao	b39d92b7c4	Fix lint errors	2026-03-20 17:30:49 +04:00
				`@@ -0,0 +1 @@`
				`<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-ember-extension="1"><path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>`