Multi-line rendering for multi-value tags

E.g. opening hours, multiple phone numbers, ...

PROJECT_STATUS.md

@@ -1,6 +1,6 @@
 # Project Status: Marco
 
-**Last Updated:** Tue Jan 27 2026
+**Last Updated:** Tue Feb 24 2026
 
 ## Project Context
 
@@ -39,6 +39,9 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - **Smart Zoom:** Implemented `zoomToBbox` to automatically fit complex geometries (ways/relations) within the visible viewport.
   - **Dynamic Padding:** Calculates padding based on active UI elements (Sidebar on Desktop, Bottom Sheet on Mobile) to ensure the geometry is perfectly centered in the _visible_ map area.
   - **Data Processing:** `OsmService` now calculates bounding boxes for ways and relations by aggregating member node coordinates.
+- **Geometry Rendering:**
+  - **Outlines:** Implemented distinct blue outlines for selected OSM `ways` (Polygons) and `relations` (MultiLineStrings/Polygons) to clearly visualize boundaries.
+  - **Data Fetching:** Enhanced routing to fetch full geometry data on-demand if the initial search result (e.g., from Photon) lacks it, ensuring outlines are always available.
 
 ### 2. RemoteStorage Module (`@remotestorage/module-places`)
 
@@ -78,6 +81,8 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
   - `app/utils/geohash-coverage.js`: Logic to calculate required 4-char geohash prefixes for a given bounding box.
 - **Format Utils:**
   - `app/utils/format-text.js` & `humanize-osm-tag` helper: Standardized logic (Title Case, space replacement) for displaying OSM tags like `guest_house` -> "Guest House".
+  - **Tag refinement:** Improved logic for handling generic tags (e.g., `building=yes`). The UI now intelligently displays the key ("Building") instead of the value ("Yes") for better readability.
+  - **Localization:** Added basic `navigator.languages` support to `getLocalizedName` for preferring local names when available.
 - **Build & DevOps:**
   - **Icon Generation:** Added `build:icons` script using `magick` and `rsvg-convert` to automate PNG generation from SVG.
   - **Dependencies:** Documented system requirements (ImageMagick, librsvg) in `README.md`.
@@ -133,9 +138,10 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 
 ## Files Currently in Focus
 
+- `app/services/osm.js`
 - `app/components/map.gjs`
-- `app/components/place-edit-form.gjs`
-- `app/templates/place/new.gjs`
+- `app/routes/place.js`
+- `app/utils/osm.js`
 
 ## Next Steps & Pending Tasks
 

app/components/icon.gjs

@@ -23,6 +23,7 @@ import target from 'feather-icons/dist/icons/target.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import wikipedia from '../icons/wikipedia.svg?raw';
 
 const ICONS = {
   'arrow-left': arrowLeft,
@@ -45,6 +46,7 @@ const ICONS = {
   settings,
   target,
   user,
+  wikipedia,
   x,
   zap,
 };
@@ -72,7 +74,11 @@ export default class IconComponent extends Component {
 
   <template>
     {{#if this.svg}}
-      <span class="icon" style={{this.style}} title={{this.title}}>
+      <span
+        class="icon {{if @filled 'icon-filled'}}"
+        style={{this.style}}
+        title={{this.title}}
+      >
         {{htmlSafe this.svg}}
       </span>
     {{/if}}

app/components/place-details.gjs

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
+import { htmlSafe } from '@ember/template';
 import { humanizeOsmTag } from '../utils/format-text';
 import { getLocalizedName, getPlaceType } from '../utils/osm';
 import Icon from '../components/icon';
@@ -95,21 +96,55 @@ export default class PlaceDetails extends Component {
     return parts.join(', ');
   }
 
+  formatMultiLine(val, type) {
+    if (!val) return null;
+    const parts = val.split(';').map((s) => s.trim()).filter(Boolean);
+    if (parts.length === 0) return null;
+
+    if (type === 'phone') {
+      return htmlSafe(
+        parts.map((p) => `<a href="tel:${p}">${p}</a>`).join('<br>')
+      );
+    }
+
+    if (type === 'url') {
+      return htmlSafe(
+        parts
+          .map(
+            (url) =>
+              `<a href="${url}" target="_blank" rel="noopener noreferrer">${this.getDomain(
+                url
+              )}</a>`
+          )
+          .join('<br>')
+      );
+    }
+
+    return htmlSafe(parts.join('<br>'));
+  }
+
   get phone() {
-    return this.tags.phone || this.tags['contact:phone'];
+    const val = this.tags.phone || this.tags['contact:phone'];
+    return this.formatMultiLine(val, 'phone');
   }
 
   get website() {
-    return this.place.url || this.tags.website || this.tags['contact:website'];
+    const val = this.place.url || this.tags.website || this.tags['contact:website'];
+    return this.formatMultiLine(val, 'url');
   }
 
-  get websiteDomain() {
-    const url = new URL(this.website);
-    return url.hostname;
+  getDomain(urlStr) {
+    try {
+      const url = new URL(urlStr);
+      return url.hostname;
+    } catch {
+      return urlStr;
+    }
   }
 
   get openingHours() {
-    return this.tags.opening_hours;
+    const val = this.tags.opening_hours;
+    return this.formatMultiLine(val);
   }
 
   get cuisine() {
@@ -121,7 +156,9 @@ export default class PlaceDetails extends Component {
   }
 
   get wikipedia() {
-    return this.tags.wikipedia;
+    const val = this.tags.wikipedia;
+    if (!val) return null;
+    return val.split(';').map((s) => s.trim()).filter(Boolean)[0];
   }
 
   get geoLink() {
@@ -215,7 +252,7 @@ export default class PlaceDetails extends Component {
       <div class="meta-info">
 
         {{#if this.cuisine}}
-          <p>
+          <p class="cuisine-info">
             <strong>Cuisine:</strong>
             {{this.cuisine}}
           </p>
@@ -224,36 +261,42 @@ export default class PlaceDetails extends Component {
         {{#if this.openingHours}}
           <p class="content-with-icon">
             <Icon @name="clock" @title="Opening hours" />
-            <span>{{this.openingHours}}</span>
+            <span>
+              {{this.openingHours}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.phone}}
           <p class="content-with-icon">
             <Icon @name="phone" @title="Phone" />
-            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+            <span>
+              {{this.phone}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.website}}
           <p class="content-with-icon">
             <Icon @name="globe" @title="Website" />
-            <span><a
-                href={{this.website}}
-                target="_blank"
-                rel="noopener noreferrer"
-              >{{this.websiteDomain}}</a></span>
+            <span>
+              {{this.website}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.wikipedia}}
-          <p>
-            <strong>Wikipedia:</strong>
-            <a
-              href="https://wikipedia.org/wiki/{{this.wikipedia}}"
-              target="_blank"
-              rel="noopener noreferrer"
-            >Article</a>
+          <p class="content-with-icon">
+            <Icon @name="wikipedia" @title="Wikipedia" @filled={{true}} />
+            <span>
+              <a
+                href="https://wikipedia.org/wiki/{{this.wikipedia}}"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Wikipedia
+              </a>
+            </span>
           </p>
         {{/if}}
 

app/components/places-sidebar.gjs

@@ -145,6 +145,11 @@ export default class PlacesSidebar extends Component {
     }
   }
 
+  get isNearbySearch() {
+    const qp = this.router.currentRoute.queryParams;
+    return !qp.q && qp.lat && qp.lon;
+  }
+
   <template>
     <div class="sidebar">
       <div class="sidebar-header">
@@ -155,7 +160,11 @@ export default class PlacesSidebar extends Component {
             {{on "click" this.clearSelection}}
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
-          <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
+          {{#if this.isNearbySearch}}
+            <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
+          {{else}}
+            <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
+          {{/if}}
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
             @name="x"
@@ -205,7 +214,11 @@ export default class PlacesSidebar extends Component {
               {{/each}}
             </ul>
           {{else}}
-            <p class="empty-state">No places found nearby.</p>
+            {{#if this.isNearbySearch}}
+              <p class="empty-state">No places found nearby.</p>
+            {{else}}
+              <p class="empty-state">No results found.</p>
+            {{/if}}
           {{/if}}
 
           <button

app/icons/wikipedia.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="7.15 7.15 113.7 113.7" fill="currentColor">
+<path d="M 120.85,29.21 C 120.85,29.62 120.72,29.99 120.47,30.33 C 120.21,30.66 119.94,30.83 119.63,30.83 C 117.14,31.07 115.09,31.87 113.51,33.24 C 111.92,34.6 110.29,37.21 108.6,41.05 L 82.8,99.19 C 82.63,99.73 82.16,100 81.38,100 C 80.77,100 80.3,99.73 79.96,99.19 L 65.49,68.93 L 48.85,99.19 C 48.51,99.73 48.04,100 47.43,100 C 46.69,100 46.2,99.73 45.96,99.19 L 20.61,41.05 C 19.03,37.44 17.36,34.92 15.6,33.49 C 13.85,32.06 11.4,31.17 8.27,30.83 C 8,30.83 7.74,30.69 7.51,30.4 C 7.27,30.12 7.15,29.79 7.15,29.42 C 7.15,28.47 7.42,28 7.96,28 C 10.22,28 12.58,28.1 15.05,28.3 C 17.34,28.51 19.5,28.61 21.52,28.61 C 23.58,28.61 26.01,28.51 28.81,28.3 C 31.74,28.1 34.34,28 36.6,28 C 37.14,28 37.41,28.47 37.41,29.42 C 37.41,30.36 37.24,30.83 36.91,30.83 C 34.65,31 32.87,31.58 31.57,32.55 C 30.27,33.53 29.62,34.81 29.62,36.4 C 29.62,37.21 29.89,38.22 30.43,39.43 L 51.38,86.74 L 63.27,64.28 L 52.19,41.05 C 50.2,36.91 48.56,34.23 47.28,33.03 C 46,31.84 44.06,31.1 41.46,30.83 C 41.22,30.83 41,30.69 40.78,30.4 C 40.56,30.12 40.45,29.79 40.45,29.42 C 40.45,28.47 40.68,28 41.16,28 C 43.42,28 45.49,28.1 47.38,28.3 C 49.2,28.51 51.14,28.61 53.2,28.61 C 55.22,28.61 57.36,28.51 59.62,28.3 C 61.95,28.1 64.24,28 66.5,28 C 67.04,28 67.31,28.47 67.31,29.42 C 67.31,30.36 67.15,30.83 66.81,30.83 C 62.29,31.14 60.03,32.42 60.03,34.68 C 60.03,35.69 60.55,37.26 61.6,39.38 L 68.93,54.26 L 76.22,40.65 C 77.23,38.73 77.74,37.11 77.74,35.79 C 77.74,32.69 75.48,31.04 70.96,30.83 C 70.55,30.83 70.35,30.36 70.35,29.42 C 70.35,29.08 70.45,28.76 70.65,28.46 C 70.86,28.15 71.06,28 71.26,28 C 72.88,28 74.87,28.1 77.23,28.3 C 79.49,28.51 81.35,28.61 82.8,28.61 C 83.84,28.61 85.38,28.52 87.4,28.35 C 89.96,28.12 92.11,28 93.83,28 C 94.23,28 94.43,28.4 94.43,29.21 C 94.43,30.29 94.06,30.83 93.32,30.83 C 90.69,31.1 88.57,31.83 86.97,33.01 C 85.37,34.19 83.37,36.87 80.98,41.05 L 71.26,59.02 L 84.42,85.83 L 103.85,40.65 C 104.52,39 104.86,37.48 104.86,36.1 C 104.86,32.79 102.6,31.04 98.08,30.83 C 97.67,30.83 97.47,30.36 97.47,29.42 C 97.47,28.47 97.77,28 98.38,28 C 100.03,28 101.99,28.1 104.25,28.3 C 106.34,28.51 108.1,28.61 109.51,28.61 C 111,28.61 112.72,28.51 114.67,28.3 C 116.7,28.1 118.52,28 120.14,28 C 120.61,28 120.85,28.4 120.85,29.21 z" />
+</svg>

app/styles/app.css

@@ -345,7 +345,6 @@ body {
 .meta-info a {
   color: #007bff;
   text-decoration: none;
-  padding-bottom: 4rem;
 }
 
 .meta-info a:hover {
@@ -610,13 +609,22 @@ span.icon {
   stroke-linejoin: round;
 }
 
+.icon-filled svg {
+  stroke: none;
+  fill: currentcolor;
+}
+
 .content-with-icon {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
 }
 
+.content-with-icon .icon {
+  margin-top: 0.15rem;
+}
+
 /* Selected Pin Animation */
 .selected-pin-container {
   position: absolute;
@@ -769,6 +777,12 @@ button.create-place {
   z-index: 3002; /* Higher than menu button to be safe */
 }
 
+@media (width <= 768px) {
+  .search-box {
+    max-width: calc(100vw - 65px);
+  }
+}
+
 .search-form {
   display: flex;
   align-items: center;

app/utils/osm.js

@@ -33,27 +33,38 @@ export function getLocalizedName(tags, defaultName = 'Untitled Place') {
   return defaultName;
 }
 
+const PLACE_TYPE_KEYS = [
+  'amenity',
+  'shop',
+  'tourism',
+  'historic',
+  'leisure',
+  'office',
+  'craft',
+  'building',
+  'landuse',
+  'public_transport',
+  'highway',
+  'aeroway',
+  'waterway',
+  'natural',
+  'place',
+  'border_type',
+  'admin_title',
+];
+
 export function getPlaceType(tags) {
   if (!tags) return null;
 
-  const rawType =
-    tags.amenity ||
-    tags.shop ||
-    tags.tourism ||
-    tags.historic ||
-    tags.leisure ||
-    tags.office ||
-    tags.craft ||
-    tags.building ||
-    tags.landuse ||
-    tags.place ||
-    tags.natural ||
-    tags.public_transport ||
-    tags.highway ||
-    tags.aeroway ||
-    tags.waterway ||
-    tags.border_type ||
-    tags.admin_title;
+  for (const key of PLACE_TYPE_KEYS) {
+    const value = tags[key];
+    if (value) {
+      if (value === 'yes') {
+        return humanizeOsmTag(key);
+      }
+      return humanizeOsmTag(value);
+    }
+  }
 
-  return humanizeOsmTag(rawType);
+  return null;
 }

tests/acceptance/search-test.js

@@ -56,6 +56,7 @@ module('Acceptance | search', function (hooks) {
     await visit('/search?q=Berlin');
 
     assert.strictEqual(currentURL(), '/search?q=Berlin');
+    assert.dom('.sidebar-header h2').includesText('Results');
     assert.dom('.places-list li').exists({ count: 2 });
     assert.dom('.places-list li:first-child .place-name').hasText('Berlin');
   });
@@ -99,6 +100,7 @@ module('Acceptance | search', function (hooks) {
     await visit('/search?lat=52.52&lon=13.405');
 
     assert.strictEqual(currentURL(), '/search?lat=52.52&lon=13.405');
+    assert.dom('.sidebar-header h2').includesText('Nearby');
     assert.dom('.places-list li').exists({ count: 1 });
     assert.dom('.places-list li .place-name').hasText('Nearby Cafe');
   });

tests/unit/utils/osm-test.js

@@ -0,0 +1,104 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+import { getLocalizedName, getPlaceType } from 'marco/utils/osm';
+
+module('Unit | Utility | osm', function (hooks) {
+  setupTest(hooks);
+
+  test('getLocalizedName returns default name if tags are missing', function (assert) {
+    const result = getLocalizedName(null);
+    assert.strictEqual(result, 'Untitled Place');
+  });
+
+  test('getLocalizedName returns name tag', function (assert) {
+    const tags = { name: 'Foo' };
+    const result = getLocalizedName(tags);
+    assert.strictEqual(result, 'Foo');
+  });
+
+  test('getLocalizedName falls back to name:en if name is missing', function (assert) {
+    const tags = { 'name:en': 'English Name' };
+    const result = getLocalizedName(tags);
+    assert.strictEqual(result, 'English Name');
+  });
+
+  test('getLocalizedName returns local name (name tag) if no preferred language match found', function (assert) {
+    // Assuming the test environment doesn't have 'fr' as a preferred language
+    const tags = { name: 'Local Name', 'name:fr': 'French Name' };
+    // Temporarily mock navigator to ensure no match
+    const originalLanguages = navigator.languages;
+    const originalLanguage = navigator.language;
+    Object.defineProperty(navigator, 'languages', {
+      value: ['es'],
+      configurable: true,
+    });
+    Object.defineProperty(navigator, 'language', {
+      value: 'es',
+      configurable: true,
+    });
+
+    try {
+      const result = getLocalizedName(tags);
+      assert.strictEqual(result, 'Local Name');
+    } finally {
+      // Restore
+      Object.defineProperty(navigator, 'languages', {
+        value: originalLanguages,
+        configurable: true,
+      });
+      Object.defineProperty(navigator, 'language', {
+        value: originalLanguage,
+        configurable: true,
+      });
+    }
+  });
+
+  test('getLocalizedName matches user preferred language', function (assert) {
+    const tags = {
+      name: 'Standard Name',
+      'name:de': 'Deutscher Name',
+      'name:fr': 'Nom Français',
+    };
+
+    const originalLanguages = navigator.languages;
+    Object.defineProperty(navigator, 'languages', {
+      value: ['de', 'en'],
+      configurable: true,
+    });
+
+    try {
+      const result = getLocalizedName(tags);
+      assert.strictEqual(result, 'Deutscher Name');
+    } finally {
+      Object.defineProperty(navigator, 'languages', {
+        value: originalLanguages,
+        configurable: true,
+      });
+    }
+  });
+
+  test('getPlaceType returns value for normal tags', function (assert) {
+    const tags = { amenity: 'restaurant' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Restaurant');
+  });
+
+  test('getPlaceType returns key name if value is "yes"', function (assert) {
+    const tags = { building: 'yes' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Building');
+  });
+
+  test('getPlaceType prioritizes order (amenity > shop > building)', function (assert) {
+    // If something is both a shop and a building, it should be a shop
+    const tags = { building: 'yes', shop: 'supermarket' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Supermarket');
+  });
+
+  test('getPlaceType returns null if no known type found', function (assert) {
+    const tags = { foo: 'bar' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, null);
+  });
+});