feat: add geo: URI link on document map box#4565
Conversation
Adds a button next to the GPX/KML buttons that opens the document location in the user's preferred mobile map app via a geo: URI (RFC 5870). Only appears on mobile and only when the document has a Point geometry. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
WalkthroughMapBox component adds a mobile-only button that opens the document location in a native map app. A new ChangesMobile geo deep-link
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/views/document/utils/boxes/MapBox.vue`:
- Around line 116-120: The code currently only checks
Array.isArray(parsed.coordinates) and can produce geo:NaN URIs; update the guard
in the MapBox.vue logic that builds the URI (the block referencing parsed.type,
parsed.coordinates and ol.proj.toLonLat) to validate coordinates thoroughly:
require parsed.type === 'Point', ensure parsed.coordinates is an array with at
least two items, confirm the first two entries are numeric (Number.isFinite)
before calling ol.proj.toLonLat, and after converting validate that lon and lat
are finite numbers; if any check fails return null. This targets the
parsed.type/parsed.coordinates checks and the ol.proj.toLonLat result to prevent
generating geo:NaN URIs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7e09725c-7a71-4edf-ad41-878199ada511
📒 Files selected for processing (1)
src/views/document/utils/boxes/MapBox.vue
| if (parsed.type !== 'Point' || !Array.isArray(parsed.coordinates)) { | ||
| return null; | ||
| } | ||
| const [lon, lat] = ol.proj.toLonLat(parsed.coordinates); | ||
| return `geo:${lat.toFixed(6)},${lon.toFixed(6)}?q=${lat.toFixed(6)},${lon.toFixed(6)}`; |
There was a problem hiding this comment.
Guard malformed coordinate values before building the URI.
Line 116–120 only checks that coordinates is an array; malformed values can still generate geo:NaN,NaN... and show a broken button instead of returning null.
Suggested fix
- if (parsed.type !== 'Point' || !Array.isArray(parsed.coordinates)) {
+ if (parsed.type !== 'Point' || !Array.isArray(parsed.coordinates) || parsed.coordinates.length < 2) {
return null;
}
- const [lon, lat] = ol.proj.toLonLat(parsed.coordinates);
+ const [x, y] = parsed.coordinates;
+ if (!Number.isFinite(x) || !Number.isFinite(y)) {
+ return null;
+ }
+ const [lon, lat] = ol.proj.toLonLat([x, y]);
+ if (!Number.isFinite(lon) || !Number.isFinite(lat)) {
+ return null;
+ }
return `geo:${lat.toFixed(6)},${lon.toFixed(6)}?q=${lat.toFixed(6)},${lon.toFixed(6)}`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (parsed.type !== 'Point' || !Array.isArray(parsed.coordinates)) { | |
| return null; | |
| } | |
| const [lon, lat] = ol.proj.toLonLat(parsed.coordinates); | |
| return `geo:${lat.toFixed(6)},${lon.toFixed(6)}?q=${lat.toFixed(6)},${lon.toFixed(6)}`; | |
| if (parsed.type !== 'Point' || !Array.isArray(parsed.coordinates) || parsed.coordinates.length < 2) { | |
| return null; | |
| } | |
| const [x, y] = parsed.coordinates; | |
| if (!Number.isFinite(x) || !Number.isFinite(y)) { | |
| return null; | |
| } | |
| const [lon, lat] = ol.proj.toLonLat([x, y]); | |
| if (!Number.isFinite(lon) || !Number.isFinite(lat)) { | |
| return null; | |
| } | |
| return `geo:${lat.toFixed(6)},${lon.toFixed(6)}?q=${lat.toFixed(6)},${lon.toFixed(6)}`; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/views/document/utils/boxes/MapBox.vue` around lines 116 - 120, The code
currently only checks Array.isArray(parsed.coordinates) and can produce geo:NaN
URIs; update the guard in the MapBox.vue logic that builds the URI (the block
referencing parsed.type, parsed.coordinates and ol.proj.toLonLat) to validate
coordinates thoroughly: require parsed.type === 'Point', ensure
parsed.coordinates is an array with at least two items, confirm the first two
entries are numeric (Number.isFinite) before calling ol.proj.toLonLat, and after
converting validate that lon and lat are finite numbers; if any check fails
return null. This targets the parsed.type/parsed.coordinates checks and the
ol.proj.toLonLat result to prevent generating geo:NaN URIs.
1 participant
What
Adds a button next to the GPX/KML download buttons on the document map box. On mobile, tapping it opens the document's location in the user's preferred map app (Google Maps, OsmAnd, Maps.me, Organic Maps, Plans, etc.) via a
geo:URI (RFC 5870).Why
Requested on the forum by community members: https://forum.camptocamp.org/t/application-camptocamp-cahier-des-charges-a-elaborer-avec-vous/308792
Currently, to navigate to a waypoint or trailhead from camptocamp.org on a phone, users have to copy coordinates manually or download the GPX and import it elsewhere. This adds a one-tap path that integrates with whatever map app the user already uses.
Scope
src/views/document/utils/boxes/MapBox.vue$screen.isMobile) and only when the document has a Point geometrynull, button is hidden) if geometry is missing or malformedol.proj.toLonLatto convert from the internal EPSG:3857 projection to WGS84 expected by thegeo:URI schemeHow to test
npm run serveCtrl+Shift+M), pick a mobile device profile<a>element — thehrefisgeo:LAT,LON?q=LAT,LONwith 6-decimal precision (≈10 cm)Notes
The
geo:URI scheme has no handler on desktop browsers — the button is intentionally hidden there (v-if="... && $screen.isMobile") to keep the UI clean.Summary by CodeRabbit