Prefer place name in UA/browser language

closes #16

app/components/app-header.gjs

@@ -24,7 +24,7 @@ export default class AppHeaderComponent extends Component {
     <header class="app-header">
       <div class="header-left">
         <button
-          class="icon-btn"
+          class="menu-btn btn-press"
           type="button"
           aria-label="Menu"
           {{on "click" @onToggleMenu}}
@@ -36,7 +36,7 @@ export default class AppHeaderComponent extends Component {
       <div class="header-right">
         <div class="user-menu-container">
           <button
-            class="user-btn"
+            class="user-btn btn-press"
             type="button"
             aria-label="User Menu"
             {{on "click" this.toggleUserMenu}}

app/components/map.gjs

@@ -68,6 +68,7 @@ export default class MapComponent extends Component {
     // Default view settings
     let center = [14.21683569, 27.060114248];
     let zoom = 2.661;
+    let restoredFromStorage = false;
 
     // Try to restore from localStorage
     try {
@@ -82,6 +83,7 @@ export default class MapComponent extends Component {
         ) {
           center = parsed.center;
           zoom = parsed.zoom;
+          restoredFromStorage = true;
         }
       }
     } catch (e) {
@@ -99,7 +101,7 @@ export default class MapComponent extends Component {
       layers: [openfreemap, bookmarkLayer],
       view: view,
       controls: defaultControls({
-        zoom: false,
+        zoom: true,
         rotate: true,
         attribution: true,
       }),
@@ -243,6 +245,7 @@ export default class MapComponent extends Component {
       const coordinates = geolocation.getPosition();
       const accuracyGeometry = geolocation.getAccuracyGeometry();
       const accuracy = geolocation.getAccuracy();
+      console.debug('Geolocation change:', { coordinates, accuracy });
 
       if (!coordinates) return;
 
@@ -307,7 +310,8 @@ export default class MapComponent extends Component {
       this.mapInstance.getView().animate(viewOptions);
     };
 
-    locateBtn.addEventListener('click', () => {
+    const startLocating = () => {
+      console.debug('Getting current geolocation...')
       // 1. Clear any previous session
       stopLocating();
 
@@ -331,7 +335,9 @@ export default class MapComponent extends Component {
       locateTimeout = setTimeout(() => {
         stopLocating();
       }, 10000);
-    });
+    };
+
+    locateBtn.addEventListener('click', startLocating);
 
     const locateControl = new Control({
       element: locateElement,
@@ -340,6 +346,11 @@ export default class MapComponent extends Component {
     this.mapInstance.addLayer(geolocationLayer);
     this.mapInstance.addControl(locateControl);
 
+    // Auto-locate on first visit (if not restored from storage and on home page)
+    if (!restoredFromStorage && this.router.currentRouteName === 'index') {
+      startLocating();
+    }
+
     this.mapInstance.on('singleclick', this.handleMapClick);
 
     // Load places when map moves
@@ -733,6 +744,13 @@ export default class MapComponent extends Component {
       return;
     }
 
+    // Require Zoom >= 17 for generic map searches
+    // This prevents accidental searches when interacting with the map at a high level
+    const currentZoom = this.mapInstance.getView().getZoom();
+    if (currentZoom < 16) {
+      return;
+    }
+
     const coords = toLonLat(event.coordinate);
     const [lon, lat] = coords;
 

app/components/place-details.gjs

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { humanizeOsmTag } from '../utils/format-text';
+import { getLocalizedName } from '../utils/osm';
 import Icon from '../components/icon';
 import PlaceEditForm from './place-edit-form';
 
@@ -22,8 +23,7 @@ export default class PlaceDetails extends Component {
   get name() {
     return (
       this.place.title ||
-      this.tags.name ||
-      this.tags['name:en'] ||
+      getLocalizedName(this.tags) ||
       'Unnamed Place'
     );
   }

app/components/places-sidebar.gjs

@@ -7,6 +7,7 @@ import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { getLocalizedName } from '../utils/osm';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -85,8 +86,7 @@ export default class PlacesSidebar extends Component {
     } else {
       // It's a fresh POI -> Save it
       const placeData = {
-        title:
-          place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
+        title: getLocalizedName(place.osmTags, 'Untitled Place'),
         lat: place.lat,
         lon: place.lon,
         tags: [],

app/services/osm.js

@@ -1,4 +1,5 @@
 import Service, { service } from '@ember/service';
+import { getLocalizedName } from '../utils/osm';
 
 export default class OsmService extends Service {
   @service settings;
@@ -61,7 +62,7 @@ out center;
 
   normalizePoi(poi) {
     return {
-      title: poi.tags?.name || poi.tags?.['name:en'] || 'Untitled Place',
+      title: getLocalizedName(poi.tags),
       lat: poi.lat || poi.center?.lat,
       lon: poi.lon || poi.center?.lon,
       url: poi.tags?.website,

app/styles/app.css

@@ -5,6 +5,11 @@ body {
   height: 100%;
   overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
   -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
 }
 
 body {
@@ -69,7 +74,15 @@ body {
   pointer-events: auto; /* Re-enable clicks for buttons */
 }
 
-.icon-btn {
+.btn-press {
+  transition: transform 0.1s;
+}
+
+.btn-press:active {
+  transform: scale(0.95);
+}
+
+.menu-btn {
   background: white;
   border: none;
   border-radius: 50%;
@@ -80,11 +93,6 @@ body {
   justify-content: center;
   box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
   cursor: pointer;
-  transition: transform 0.1s;
-}
-
-.icon-btn:active {
-  transform: scale(0.95);
 }
 
 .user-btn {
@@ -539,22 +547,40 @@ body {
   }
 }
 
-/* Locate Control */
+/* Zoom Control - Moved to bottom right above attribution */
+.ol-zoom {
+  top: auto !important;
+  left: auto !important;
+  bottom: 2.5em;
+  right: 0.5em;
+}
+
+.ol-touch .ol-zoom {
+  bottom: 3.5em;
+}
+
+/* Locate Control - Above Zoom */
 .ol-control.ol-locate {
-  inset: auto 0.5em 2.5em auto;
+  top: auto !important;
+  left: auto !important;
+  bottom: 6.5em;
+  right: 0.5em;
 }
 
 .ol-touch .ol-control.ol-locate {
-  inset: auto 0.5em 3.5em auto;
+  bottom: 8.5em;
 }
 
-/* Rotate Control */
+/* Rotate Control - Above Locate */
 .ol-rotate {
-  inset: auto 0.5em 5em auto;
+  top: auto !important;
+  left: auto !important;
+  bottom: 9em;
+  right: 0.5em;
 }
 
 .ol-touch .ol-rotate {
-  inset: auto 0.5em 6em auto;
+  bottom: 11.5em;
 }
 
 span.icon {

app/utils/osm.js

@@ -0,0 +1,32 @@
+export function getLocalizedName(tags, defaultName = 'Untitled Place') {
+  if (!tags) return defaultName;
+
+  // 1. Get user's preferred languages
+  const languages = navigator.languages || [navigator.language || 'en'];
+
+  // 2. Try to find a match for each preferred language
+  for (const lang of languages) {
+    if (!lang) continue;
+
+    // Handle "en-US", "de-DE", etc. -> look for "name:en", "name:de"
+    const shortLang = lang.split('-')[0];
+    const tagKey = `name:${shortLang}`;
+
+    if (tags[tagKey]) {
+      return tags[tagKey];
+    }
+  }
+
+  // 3. Fallback to standard "name"
+  if (tags.name) {
+    return tags.name;
+  }
+
+  // 4. Fallback to "name:en" (common in international places without local name)
+  if (tags['name:en']) {
+    return tags['name:en'];
+  }
+
+  // 5. Final fallback
+  return defaultName;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {
@@ -34,6 +34,7 @@
     "lint:js:fix": "eslint . --fix",
     "start": "vite",
     "test": "vite build --mode development && testem ci --port 0",
+    "preversion": "pnpm test",
     "version": "pnpm build && git add release/"
   },
   "devDependencies": {

release/index.html

@@ -26,8 +26,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-DlYgnqpR.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-D53xPL_H.css">
+  <script type="module" crossorigin src="/assets/main-DD9l9xzQ.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-G8wPYi_P.css">
 </head>
   <body>
  </body>