diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 0c6bb2f..c674886 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -23,6 +23,7 @@ export default class PlaceDetails extends Component {
@service storage;
@service nostrAuth;
@service nostrData;
+ @service mapUi;
@tracked isEditing = false;
@tracked showLists = false;
@tracked isPhotoUploadActive = false;
@@ -345,9 +346,21 @@ export default class PlaceDetails extends Component {
get osmUrl() {
const id = this.place.osmId;
- if (!id) return null;
- const type = this.place.osmType || 'node';
- return `https://www.openstreetmap.org/${type}/${id}`;
+ if (id) {
+ const type = this.place.osmType || 'node';
+ return `https://www.openstreetmap.org/${type}/${id}`;
+ }
+
+ const lat = this.place.lat;
+ const lon = this.place.lon;
+ if (!lat || !lon) return null;
+
+ const viewLat = this.mapUi.currentCenter?.lat ?? lat;
+ const viewLon = this.mapUi.currentCenter?.lon ?? lon;
+ const zoom = this.mapUi.currentZoom ?? 17;
+ const roundedZoom = Math.round(zoom);
+
+ return `https://www.openstreetmap.org/search?lat=${lat}&lon=${lon}&zoom=${roundedZoom}#map=${roundedZoom}/${Number(viewLat).toFixed(5)}/${Number(viewLon).toFixed(5)}`;
}
get gmapsUrl() {
diff --git a/tests/integration/components/place-details-test.gjs b/tests/integration/components/place-details-test.gjs
index 6969046..c98b3fa 100644
--- a/tests/integration/components/place-details-test.gjs
+++ b/tests/integration/components/place-details-test.gjs
@@ -334,4 +334,50 @@ module('Integration | Component | place-details', function (hooks) {
assert.dom(links[0]).hasText('+44 987 654 321');
assert.dom(links[1]).hasText('+1 234-567 8900');
});
+
+ test('it renders correct OpenStreetMap link for an OSM place', async function (assert) {
+ const place = {
+ title: 'OSM Place',
+ osmId: '12345',
+ osmType: 'node',
+ lat: 52.520008,
+ lon: 13.404954,
+ };
+
+ await render();
+
+ const osmLink = this.element.querySelector(
+ '.meta-info a[href^="https://www.openstreetmap.org/node/12345"]'
+ );
+ assert.ok(osmLink, 'OpenStreetMap link is rendered');
+ assert.strictEqual(
+ osmLink.getAttribute('href'),
+ 'https://www.openstreetmap.org/node/12345'
+ );
+ });
+
+ test('it renders correct search-based OpenStreetMap link for a custom saved place', async function (assert) {
+ class MockMapUi extends Service {
+ currentCenter = { lat: 52.5, lon: 13.4 };
+ currentZoom = 15.6;
+ }
+ this.owner.register('service:map-ui', MockMapUi);
+
+ const place = {
+ title: 'Custom Place',
+ lat: 52.520008,
+ lon: 13.404954,
+ };
+
+ await render();
+
+ const osmLink = this.element.querySelector(
+ '.meta-info a[href^="https://www.openstreetmap.org/search"]'
+ );
+ assert.ok(osmLink, 'OpenStreetMap search link is rendered');
+ assert.strictEqual(
+ osmLink.getAttribute('href'),
+ 'https://www.openstreetmap.org/search?lat=52.520008&lon=13.404954&zoom=16#map=16/52.50000/13.40000'
+ );
+ });
});