Multi-line rendering for multi-value tags

E.g. opening hours, multiple phone numbers, ...
Fix sidebar link layout issue
2026-02-24 14:50:39 +04:00 · 2026-02-24 13:31:11 +04:00 · 2026-02-24 13:25:17 +04:00 · 2026-02-24 13:04:15 +04:00 · 2026-02-24 12:49:07 +04:00 · 2026-02-24 12:21:03 +04:00
15 changed files with 788 additions and 85 deletions
--- a/PROJECT_STATUS.md
+++ b/PROJECT_STATUS.md
@@ -1,6 +1,6 @@
 # Project Status: Marco

-**Last Updated:** Tue Jan 27 2026
+**Last Updated:** Tue Feb 24 2026

 ## Project Context

@@ -36,6 +36,12 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - **Persistence:** Saves and restores map center and zoom level using `localStorage` (key: `marco:map-view`).
 - **Controls:** Enabled standard OpenLayers Rotate control (re-north) and custom Locate control.
 - **Pin Animation:** Selected pins are highlighted with a custom **Red Pin** overlay that drops in with an animation. The center dot is styled as a solid dark red circle (`#b31412`).
+- **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`)

@@ -75,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`.
@@ -103,6 +111,16 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
    - Responsive crosshair sizing (48px desktop / 24px mobile).
  - **Persistence:** Form data (Title, Description) and Map coordinates are securely saved to RemoteStorage via `storage.storePlace`.

+### 6. Search Functionality
+
+- **Provider:** Integrated **Photon API** (by Komoot) via `app/services/photon.js` for high-quality, typo-tolerant OpenStreetMap search.
+- **UI:** `SearchBoxComponent` implements a responsive search bar with instant autocomplete.
+  - **Debounced Input:** 300ms delay to prevent excessive API calls.
+  - **Location Bias:** Automatically biases search results towards the current map center to show relevant local places first.
+  - **Direct Navigation:** Selecting a result with a valid OSM ID navigates directly to the specific place details (`/place/osm:type:id`).
+- **Resilience:** Implemented retry logic (exponential backoff/fixed delay) for network errors and rate limits (429).
+- **Data Normalization:** Search results are normalized to match the internal POI schema, ensuring consistent rendering across Search and Map views.
+
 ## Current State

 - **Repo:** The app runs via `pnpm start`.
@@ -120,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

--- a/app/components/icon.gjs
+++ b/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}}
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -13,6 +13,7 @@ import LayerGroup from 'ol/layer/Group.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import VectorSource from 'ol/source/Vector.js';
 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';
@@ -27,6 +28,7 @@ export default class MapComponent extends Component {

  mapInstance;
  bookmarkSource;
+  selectedShapeSource;
  searchOverlay;
  searchOverlayElement;
  selectedPinOverlay;
@@ -40,6 +42,22 @@ export default class MapComponent extends Component {

    const openfreemap = new LayerGroup();

+    // Create a vector source and layer for the selected shape (outline)
+    this.selectedShapeSource = new VectorSource();
+    const selectedShapeLayer = new VectorLayer({
+      source: this.selectedShapeSource,
+      style: new Style({
+        stroke: new Stroke({
+          color: '#3388ff',
+          width: 4,
+        }),
+        fill: new Fill({
+          color: 'rgba(51, 136, 255, 0.1)',
+        }),
+      }),
+      zIndex: 5, // Below bookmarks (10) but above tiles
+    });
+
    // Create a vector source and layer for bookmarks
    this.bookmarkSource = new VectorSource();
    const bookmarkLayer = new VectorLayer({
@@ -99,7 +117,7 @@ export default class MapComponent extends Component {

    this.mapInstance = new Map({
      target: element,
-      layers: [openfreemap, bookmarkLayer],
+      layers: [openfreemap, selectedShapeLayer, bookmarkLayer],
      view: view,
      controls: defaultControls({
        zoom: true,
@@ -426,6 +444,11 @@ export default class MapComponent extends Component {

    if (!this.selectedPinOverlay || !this.selectedPinElement) return;

+    // Clear any previous shape
+    if (this.selectedShapeSource) {
+      this.selectedShapeSource.clear();
+    }
+
    if (selected && selected.lat && selected.lon) {
      const coords = fromLonLat([selected.lon, selected.lat]);
      this.selectedPinOverlay.setPosition(coords);
@@ -436,7 +459,23 @@ export default class MapComponent extends Component {
      void this.selectedPinElement.offsetWidth;
      this.selectedPinElement.classList.add('active');

-      this.handlePinVisibility(coords);
+      // Draw GeoJSON shape if available
+      if (selected.geojson && this.selectedShapeSource) {
+        try {
+          const feature = new GeoJSON().readFeature(selected.geojson, {
+            featureProjection: 'EPSG:3857',
+          });
+          this.selectedShapeSource.addFeature(feature);
+        } catch (e) {
+          console.warn('Failed to render selected place shape:', e);
+        }
+      }
+
+      if (selected.bbox) {
+        this.zoomToBbox(selected.bbox);
+      } else {
+        this.handlePinVisibility(coords);
+      }
    } else {
      this.selectedPinElement.classList.remove('active');
      // Hide it effectively by moving it away or just relying on display:none in CSS
@@ -444,6 +483,55 @@ export default class MapComponent extends Component {
    }
  });

+  zoomToBbox(bbox) {
+    if (!this.mapInstance || !bbox) return;
+
+    const view = this.mapInstance.getView();
+    const size = this.mapInstance.getSize();
+
+    // Convert bbox to extent: [minx, miny, maxx, maxy]
+    const min = fromLonLat([bbox.minLon, bbox.minLat]);
+    const max = fromLonLat([bbox.maxLon, bbox.maxLat]);
+    const extent = [...min, ...max];
+
+    // Default padding for full screen: 15% on all sides (70% visible)
+    let padding = [
+      size[1] * 0.15, // Top
+      size[0] * 0.15, // Right
+      size[1] * 0.15, // Bottom
+      size[0] * 0.15, // Left
+    ];
+
+    // Mobile: Bottom sheet covers 50% of the screen height
+    if (size[0] <= 768) {
+      // We want the geometry to be centered in the top 50% of the screen.
+      // Top padding: 15% of the VISIBLE height (size[1] * 0.5)
+      const visibleHeight = size[1] * 0.5;
+      const topPadding = visibleHeight * 0.15;
+      const bottomPadding = (size[1] * 0.5) + (visibleHeight * 0.15); // Sheet + padding
+
+      padding[0] = topPadding;
+      padding[2] = bottomPadding;
+    }
+    // Desktop: Sidebar covers left side (approx 400px)
+    else if (this.args.isSidebarOpen) {
+      const sidebarWidth = 400; 
+      const visibleWidth = size[0] - sidebarWidth;
+
+      // Left padding: Sidebar + 15% of visible width
+      padding[3] = sidebarWidth + (visibleWidth * 0.15);
+      // Right padding: 15% of visible width
+      padding[1] = visibleWidth * 0.15;
+    }
+
+    view.fit(extent, {
+      padding: padding,
+      duration: 1000,
+      easing: (t) => t * (2 - t),
+      maxZoom: 19,
+    });
+  }
+
  handlePinVisibility(coords) {
    if (!this.mapInstance) return;

--- a/app/components/place-details.gjs
+++ b/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';
@@ -83,7 +84,7 @@ export default class PlaceDetails extends Component {
      }
      parts.push(city);
    }
-    
+
    // State + Country (if not already covered)
    const state = get('addr:state', 'state');
    const country = get('addr:country', 'country');
@@ -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() {
@@ -151,7 +188,7 @@ export default class PlaceDetails extends Component {
    if (!id) return null;
    return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
  }
-  
+
  get showDescription() {
    // If it's a Photon result, the description IS the address.
    // Since we are showing the address in the meta section (bottom),
@@ -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}}

--- a/app/components/places-sidebar.gjs
+++ b/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
--- a/app/icons/wikipedia.svg
+++ b/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>
--- a/app/routes/place.js
+++ b/app/routes/place.js
@@ -48,7 +48,28 @@ export default class PlaceRoute extends Route {
    }
  }

-  afterModel(model) {
+  async afterModel(model) {
+    // If the model comes from a search result (e.g. Photon), it might lack detailed geometry.
+    // We want to ensure we have the full OSM object (with polygon/linestring) for display.
+    if (
+      model &&
+      model.osmId &&
+      model.osmType &&
+      model.osmType !== 'node' &&
+      !model.geojson
+    ) {
+      // Only fetch if it's NOT a node (nodes don't have interesting geometry anyway, just a point)
+      // Although fetching nodes again ensures we have the latest tags too.
+      console.debug('Model missing geometry, fetching full OSM details...');
+      const fullDetails = await this.loadOsmPlace(model.osmId, model.osmType);
+
+      if (fullDetails) {
+        // Update the model in-place with the fuller details
+        Object.assign(model, fullDetails);
+        console.debug('Enriched model with full OSM details', model);
+      }
+    }
+
    // Notify the Map UI to show the pin
    if (model) {
      this.mapUi.selectPlace(model);
--- a/app/services/osm.js
+++ b/app/services/osm.js
@@ -24,14 +24,31 @@ export default class OsmService extends Service {
    this.controller = new AbortController();
    const signal = this.controller.signal;

+    const typeKeys = [
+      'amenity',
+      'shop',
+      'tourism',
+      'historic',
+      'leisure',
+      'office',
+      'craft',
+      'building',
+      'landuse',
+      'public_transport',
+      'highway',
+      'aeroway',
+    ];
+    const typeKeysQuery = [`~"^(${typeKeys.join('|')})$"~".*"`];
+
    const query = `
 [out:json][timeout:25];
 (
-  nw["amenity"](around:${radius},${lat},${lon});
-  nw["shop"](around:${radius},${lat},${lon});
-  nw["tourism"](around:${radius},${lat},${lon});
-  nw["leisure"](around:${radius},${lat},${lon});
-  nw["historic"](around:${radius},${lat},${lon});
+  node(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
+  way(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
+  relation(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
 );
 out center;
    `.trim();
@@ -165,14 +182,43 @@ out center;
  normalizeOsmApiData(elements, targetId, targetType) {
    if (!elements || elements.length === 0) return null;

-    const mainElement = elements.find(
+    let mainElement = elements.find(
      (el) => String(el.id) === String(targetId) && el.type === targetType
    );

    if (!mainElement) return null;

-    let lat = mainElement.lat;
-    let lon = mainElement.lon;
+    // Use a separate variable for the element we want to display (tags, id, specific coords)
+    // vs the element we use for geometry calculation (bbox).
+    let displayElement = mainElement;
+
+    // If it's a boundary relation, try to find the label or admin_centre node
+    // and use that as the display element (better coordinates and tags).
+    if (targetType === 'relation' && mainElement.members) {
+      const labelMember = mainElement.members.find(
+        (m) => m.role === 'label' && m.type === 'node'
+      );
+      const adminCentreMember = mainElement.members.find(
+        (m) => m.role === 'admin_centre' && m.type === 'node'
+      );
+
+      const targetMember = labelMember || adminCentreMember;
+
+      if (targetMember) {
+        const targetNode = elements.find(
+          (el) =>
+            String(el.id) === String(targetMember.ref) && el.type === 'node'
+        );
+        if (targetNode) {
+          displayElement = targetNode;
+        }
+      }
+    }
+
+    let lat = displayElement.lat;
+    let lon = displayElement.lon;
+    let bbox = null;
+    let geojson = null;

    // If it's a way, calculate center from nodes
    if (targetType === 'way' && mainElement.nodes) {
@@ -188,11 +234,42 @@ out center;
        .filter(Boolean);

      if (coords.length > 0) {
-        // Simple average center
-        const sumLat = coords.reduce((sum, c) => sum + c[1], 0);
-        const sumLon = coords.reduce((sum, c) => sum + c[0], 0);
-        lat = sumLat / coords.length;
-        lon = sumLon / coords.length;
+        // Only override lat/lon if we haven't switched to a specific display node
+        if (displayElement === mainElement) {
+          const sumLat = coords.reduce((sum, c) => sum + c[1], 0);
+          const sumLon = coords.reduce((sum, c) => sum + c[0], 0);
+          lat = sumLat / coords.length;
+          lon = sumLon / coords.length;
+        }
+
+        // Calculate BBox
+        const lats = coords.map((c) => c[1]);
+        const lons = coords.map((c) => c[0]);
+        bbox = {
+          minLat: Math.min(...lats),
+          maxLat: Math.max(...lats),
+          minLon: Math.min(...lons),
+          maxLon: Math.max(...lons),
+        };
+
+        // Construct GeoJSON
+        if (coords.length > 1) {
+          const first = coords[0];
+          const last = coords[coords.length - 1];
+          const isClosed = first[0] === last[0] && first[1] === last[1];
+
+          if (isClosed) {
+            geojson = {
+              type: 'Polygon',
+              coordinates: [coords],
+            };
+          } else {
+            geojson = {
+              type: 'LineString',
+              coordinates: coords,
+            };
+          }
+        }
      }
    } else if (targetType === 'relation' && mainElement.members) {
      // Find all nodes that are part of this relation (directly or via ways)
@@ -204,6 +281,8 @@ out center;
        }
      });

+      const segments = [];
+
      mainElement.members.forEach((member) => {
        if (member.type === 'node') {
          const node = nodeMap.get(member.ref);
@@ -213,32 +292,61 @@ out center;
            (el) => el.type === 'way' && el.id === member.ref
          );
          if (way && way.nodes) {
+            const wayCoords = [];
            way.nodes.forEach((nodeId) => {
              const node = nodeMap.get(nodeId);
-              if (node) allNodes.push(node);
+              if (node) {
+                allNodes.push(node);
+                wayCoords.push([node.lon, node.lat]);
+              }
            });
+            if (wayCoords.length > 1) {
+              segments.push(wayCoords);
+            }
          }
        }
      });

      if (allNodes.length > 0) {
-        const sumLat = allNodes.reduce((sum, n) => sum + n.lat, 0);
-        const sumLon = allNodes.reduce((sum, n) => sum + n.lon, 0);
-        lat = sumLat / allNodes.length;
-        lon = sumLon / allNodes.length;
+        // Only override lat/lon if we haven't switched to a specific display node
+        if (displayElement === mainElement) {
+          const sumLat = allNodes.reduce((sum, n) => sum + n.lat, 0);
+          const sumLon = allNodes.reduce((sum, n) => sum + n.lon, 0);
+          lat = sumLat / allNodes.length;
+          lon = sumLon / allNodes.length;
+        }
+
+        // Calculate BBox
+        const lats = allNodes.map((n) => n.lat);
+        const lons = allNodes.map((n) => n.lon);
+        bbox = {
+          minLat: Math.min(...lats),
+          maxLat: Math.max(...lats),
+          minLon: Math.min(...lons),
+          maxLon: Math.max(...lons),
+        };
+      }
+
+      if (segments.length > 0) {
+        geojson = {
+          type: 'MultiLineString',
+          coordinates: segments,
+        };
      }
    }

-    const tags = mainElement.tags || {};
+    const tags = displayElement.tags || {};
    const type = getPlaceType(tags) || 'Point of Interest';

    return {
      title: getLocalizedName(tags),
      lat,
      lon,
+      bbox,
+      geojson,
      url: tags.website,
-      osmId: String(mainElement.id),
-      osmType: mainElement.type,
+      osmId: String(displayElement.id),
+      osmType: displayElement.type,
      osmTags: tags,
      description: tags.description,
      source: 'osm',
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -2,16 +2,26 @@ import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';

 export default class SettingsService extends Service {
-  @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+  @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
  @tracked mapKinetic = true;

  overpassApis = [
-    { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
-    { name: 'overpass-api.de', url: 'https://overpass-api.de/api/interpreter' },
    {
-      name: 'private.coffee',
+      name: 'overpass-api.de (DE)',
+      url: 'https://overpass-api.de/api/interpreter'
+    },
+    {
+      name: 'private.coffee (AT)',
      url: 'https://overpass.private.coffee/api/interpreter',
    },
+    // {
+    //   name: 'overpass.openstreetmap.us (US)',
+    //   url: 'https://overpass.openstreetmap.us/api/interpreter'
+    // },
+    // {
+    //   name: 'bke.ro (US)',
+    //   url: 'https://overpass.bke.ro/api/interpreter'
+    // },
  ];

  constructor() {
--- a/app/styles/app.css
+++ b/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;
--- a/app/utils/osm.js
+++ b/app/utils/osm.js
@@ -33,25 +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.leisure ||
-    tags.historic ||
-    tags.office ||
-    tags.craft ||
-    tags.building ||
-    tags.landuse ||
-    tags.place ||
-    tags.natural ||
-    tags.public_transport ||
-    tags.aeroway ||
-    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;
 }
--- a/tests/acceptance/search-test.js
+++ b/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');
  });
--- a/tests/unit/routes/place-test.js
+++ b/tests/unit/routes/place-test.js
@@ -1,5 +1,6 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'marco/tests/helpers';
+import Service from '@ember/service';

 module('Unit | Route | place', function (hooks) {
  setupTest(hooks);
@@ -8,4 +9,120 @@ module('Unit | Route | place', function (hooks) {
    let route = this.owner.lookup('route:place');
    assert.ok(route);
  });
+
+  test('afterModel enriches model with missing geometry', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    // Mock Services
+    let fetchCalled = false;
+    let selectPlaceCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        fetchCalled = true;
+        assert.strictEqual(id, '123', 'Correct ID passed');
+        assert.strictEqual(type, 'way', 'Correct Type passed');
+        return {
+          osmId: '123',
+          osmType: 'way',
+          geojson: { type: 'Polygon', coordinates: [] },
+          tags: { updated: 'true' },
+        };
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace(place) {
+        selectPlaceCalled = true;
+      }
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    // Initial partial model (from search)
+    let model = {
+      osmId: '123',
+      osmType: 'way',
+      title: 'Partial Place',
+      // No geojson
+    };
+
+    await route.afterModel(model);
+
+    assert.ok(fetchCalled, 'fetchOsmObject should be called');
+    assert.ok(selectPlaceCalled, 'selectPlace should be called');
+    assert.ok(model.geojson, 'Model should now have geojson');
+    assert.strictEqual(
+      model.tags.updated,
+      'true',
+      'Model should have updated tags'
+    );
+  });
+
+  test('afterModel skips fetch if geometry exists', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    let fetchCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject() {
+        fetchCalled = true;
+        return null;
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace() {}
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    let model = {
+      osmId: '456',
+      osmType: 'relation',
+      geojson: { type: 'MultiLineString' },
+    };
+
+    await route.afterModel(model);
+
+    assert.notOk(
+      fetchCalled,
+      'fetchOsmObject should NOT be called if geojson exists'
+    );
+  });
+
+  test('afterModel skips fetch for nodes even if geometry is missing', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    let fetchCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject() {
+        fetchCalled = true;
+        return null;
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace() {}
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    let model = {
+      osmId: '789',
+      osmType: 'node',
+      // No geojson, but it's a node
+    };
+
+    await route.afterModel(model);
+
+    assert.notOk(fetchCalled, 'fetchOsmObject should NOT be called for nodes');
+  });
 });
--- a/tests/unit/services/osm-test.js
+++ b/tests/unit/services/osm-test.js
@@ -52,7 +52,7 @@ module('Unit | Service | osm', function (hooks) {
    assert.strictEqual(result.osmType, 'way');
  });

-  test('normalizeOsmApiData calculates centroid for relations with member nodes', function (assert) {
+  test('normalizeOsmApiData prioritizes label node for relations', function (assert) {
    let service = this.owner.lookup('service:osm');
    const elements = [
      {
@@ -64,17 +64,73 @@ module('Unit | Service | osm', function (hooks) {
        ],
        tags: { name: 'Test Relation' },
      },
-      { id: 1, type: 'node', lat: 10, lon: 10 },
-      { id: 2, type: 'node', lat: 30, lon: 30 },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Admin Centre' } },
+      { id: 2, type: 'node', lat: 30, lon: 30, tags: { name: 'Label Node' } },
    ];

    const result = service.normalizeOsmApiData(elements, 789, 'relation');

-    assert.strictEqual(result.title, 'Test Relation');
-    assert.strictEqual(result.lat, 20); // (10+30)/2
-    assert.strictEqual(result.lon, 20); // (10+30)/2
-    assert.strictEqual(result.osmId, '789');
-    assert.strictEqual(result.osmType, 'relation');
+    assert.strictEqual(result.title, 'Label Node');
+    assert.strictEqual(result.lat, 30);
+    assert.strictEqual(result.lon, 30);
+    assert.strictEqual(result.osmId, '2');
+    assert.strictEqual(result.osmType, 'node');
+  });
+
+  test('normalizeOsmApiData falls back to admin_centre node for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 789,
+        type: 'relation',
+        members: [{ type: 'node', ref: 1, role: 'admin_centre' }],
+        tags: { name: 'Test Relation' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Admin Centre' } },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    assert.strictEqual(result.title, 'Admin Centre');
+    assert.strictEqual(result.lat, 10);
+    assert.strictEqual(result.lon, 10);
+    assert.strictEqual(result.osmId, '1');
+    assert.strictEqual(result.osmType, 'node');
+  });
+
+  test('normalizeOsmApiData calculates bbox for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 789,
+        type: 'relation',
+        members: [
+          { type: 'node', ref: 1, role: 'label' },
+          { type: 'node', ref: 2, role: 'border' },
+          { type: 'node', ref: 3, role: 'border' },
+        ],
+        tags: { name: 'Test Relation' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Label' } },
+      { id: 2, type: 'node', lat: 0, lon: 0 },
+      { id: 3, type: 'node', lat: 20, lon: 20 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    // Should prioritize admin centre for ID/Title/Center
+    assert.strictEqual(result.title, 'Label');
+    assert.strictEqual(result.lat, 10);
+    assert.strictEqual(result.lon, 10);
+    assert.strictEqual(result.osmId, '1');
+    assert.strictEqual(result.osmType, 'node');
+
+    // BUT should calculate BBox from ALL members (0,0 to 20,20)
+    assert.ok(result.bbox, 'BBox should be present');
+    assert.strictEqual(result.bbox.minLat, 0);
+    assert.strictEqual(result.bbox.minLon, 0);
+    assert.strictEqual(result.bbox.maxLat, 20);
+    assert.strictEqual(result.bbox.maxLon, 20);
  });

  test('normalizeOsmApiData calculates centroid for relations with member ways', function (assert) {
@@ -110,4 +166,89 @@ module('Unit | Service | osm', function (hooks) {
    assert.strictEqual(result.osmId, '999');
    assert.strictEqual(result.osmType, 'relation');
  });
+
+  test('normalizeOsmApiData creates GeoJSON for ways', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 456,
+        type: 'way',
+        nodes: [1, 2, 3],
+        tags: { name: 'Test Way' },
+      },
+      { id: 1, type: 'node', lat: 0, lon: 0 },
+      { id: 2, type: 'node', lat: 10, lon: 10 },
+      { id: 3, type: 'node', lat: 0, lon: 0 }, // Closed loop
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 456, 'way');
+
+    assert.ok(result.geojson, 'GeoJSON should be present');
+    assert.strictEqual(
+      result.geojson.type,
+      'Polygon',
+      'Closed way should be a Polygon'
+    );
+    assert.strictEqual(
+      result.geojson.coordinates[0].length,
+      3,
+      'Should have 3 coordinates'
+    );
+    assert.deepEqual(result.geojson.coordinates[0][0], [0, 0]);
+    assert.deepEqual(result.geojson.coordinates[0][1], [10, 10]);
+  });
+
+  test('normalizeOsmApiData creates GeoJSON MultiLineString for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    /*
+      Relation 999
+        -> Way 888 (0,0 -> 10,10)
+        -> Way 777 (20,20 -> 30,30)
+    */
+    const elements = [
+      {
+        id: 999,
+        type: 'relation',
+        members: [
+          { type: 'way', ref: 888, role: 'outer' },
+          { type: 'way', ref: 777, role: 'inner' },
+        ],
+        tags: { name: 'Complex Relation' },
+      },
+      {
+        id: 888,
+        type: 'way',
+        nodes: [1, 2],
+      },
+      {
+        id: 777,
+        type: 'way',
+        nodes: [3, 4],
+      },
+      { id: 1, type: 'node', lat: 0, lon: 0 },
+      { id: 2, type: 'node', lat: 10, lon: 10 },
+      { id: 3, type: 'node', lat: 20, lon: 20 },
+      { id: 4, type: 'node', lat: 30, lon: 30 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 999, 'relation');
+
+    assert.ok(result.geojson, 'GeoJSON should be present');
+    assert.strictEqual(result.geojson.type, 'MultiLineString');
+    assert.strictEqual(
+      result.geojson.coordinates.length,
+      2,
+      'Should have 2 segments'
+    );
+    // Check first segment (Way 888)
+    assert.deepEqual(result.geojson.coordinates[0], [
+      [0, 0],
+      [10, 10],
+    ]);
+    // Check second segment (Way 777)
+    assert.deepEqual(result.geojson.coordinates[1], [
+      [20, 20],
+      [30, 30],
+    ]);
+  });
 });
--- a/tests/unit/utils/osm-test.js
+++ b/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);
+  });
+});
Author	SHA1	Message	Date
Râu Cao	a6ca362876	Multi-line rendering for multi-value tags E.g. opening hours, multiple phone numbers, ...	2026-02-24 14:50:39 +04:00
Râu Cao	95e9c621a5	Fix sidebar link layout issue	2026-02-24 13:31:11 +04:00
Râu Cao	e980431c17	Add Wikipedia icon, support for filled SVGs	2026-02-24 13:25:17 +04:00
Râu Cao	4fdf2e2fb6	WIP Add more icons	2026-02-24 13:04:15 +04:00
Râu Cao	de1b162ee9	Different sidebar headers for nearby and full search	2026-02-24 12:49:07 +04:00
Râu Cao	1df77c2045	Tweak search box width on small screens	2026-02-24 12:21:03 +04:00
Râu Cao	eb1445b749	Update status doc	2026-02-24 11:52:55 +04:00
Râu Cao	316a38dbf8	Complete tests for localized names	2026-02-24 11:51:25 +04:00
Râu Cao	7bcb572dbf	If place key's value is "yes", display key instead For example, building=yes with no other useful tags (e.g. amenity) will show as Building now	2026-02-24 11:46:59 +04:00
Râu Cao	d827fe263b	Draw outlines/areas for ways and relations on map	2026-02-24 11:22:57 +04:00
Râu Cao	1926e2b20c	Switch back to more reliable Overpass default	2026-02-24 11:05:25 +04:00
Râu Cao	df1f32d8bd	More place type improvements	2026-02-24 11:05:02 +04:00
Râu Cao	aa058bd7a3	Include places that only have localized names For example "name" absent, but "name:en" present	2026-02-24 10:41:54 +04:00
Râu Cao	361a826e4f	Improve nearby search * Use regular expression queries for place types * Add more place types * Add relations * Only return results with a name	2026-02-24 09:58:12 +04:00
Râu Cao	ff01d54fdd	Update status doc	2026-02-23 23:28:11 +04:00
Râu Cao	f73677139d	Zoom to fit ways and relations into map view	2026-02-23 22:01:46 +04:00
Râu Cao	8135695bba	Add waterways (e.g. river)	2026-02-23 21:58:45 +04:00
Râu Cao	8217e85836	Improve display of boundaries like cities, states, etc.	2026-02-23 21:14:40 +04:00