Refactor Elevation Tool to Use Mapbox API

[google-labs-jules]

User description

This change replaces the existing elevation tool with a new version that uses the Mapbox Tilequery API, providing more accurate and integrated elevation data. The UI has been updated to display the new data format, and the old implementation has been removed.

---

PR created automatically by Jules for task 12891376568985585136

---

PR Type

Enhancement

---

Description

• Replaced OpenTopoData API with Mapbox Tilequery API for elevation data retrieval

• Added new MapboxElevationDisplay component to render elevation information with optional map preview

• Integrated elevation tool into agent toolset with proper UI state handling

• Created verification script for testing elevation query functionality

---

Diagram Walkthrough

flowchart LR
  A["elevationTool"] -- "fetches data" --> B["Mapbox Tilequery API"]
  B -- "returns GeoJSON" --> C["Parse elevation from contours"]
  C -- "generates" --> D["MapboxElevationDisplay"]
  D -- "updates" --> E["Map context with coordinates"]
  D -- "renders" --> F["Elevation info + map preview"]

Loading

File Walkthrough

	Relevant files
Enhancement	elevation.tsx New Mapbox-based elevation query tool implementation          lib/agents/tools/elevation.tsx Created new elevation tool using Mapbox Tilequery API (mapbox.mapbox-terrain-v2) Implemented elevation data extraction from GeoJSON contour features Added optional static map preview generation using Mapbox Static API Included error handling and UI feedback streaming +94/-0    mapbox-elevation-display.tsx New display component for Mapbox elevation results              components/mapbox-elevation-display.tsx Created React component to display elevation data from Mapbox Integrated with map context to update target position on render Added map preview image display using Next.js Image component Styled with dark theme matching application design +63/-0    actions.tsx Integration of elevation tool into UI state management      app/actions.tsx Added import for MapboxElevationDisplay component Integrated elevation tool output handling in getUIStateFromAIState Added conditional rendering for ELEVATION_QUERY_RESULT type responses +11/-0    index.tsx Register elevation tool in agent toolset                                  lib/agents/tools/index.tsx Added elevationTool import and registration in tools object Exposed elevationQueryTool to agent toolset +4/-0
Tests	verify_elevation.py Add automated verification test for elevation feature        jules-scratch/verification/verify_elevation.py Created Playwright test script for elevation query functionality Tests Mount Everest coordinates elevation query end-to-end Captures screenshot of elevation display for verification +29/-0

---

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
qcx	Ready	Preview	Comment	Oct 12, 2025 0:54am

[qodo-merge-pro]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	API key exposure Description: Uses a public client-readable environment variable NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN for Mapbox API calls, which may expose the token to clients if intended for server-side use only. elevation.tsx [21-33] Referred Code const mapboxAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN; const uiFeedbackStream = createStreamableValue<string>(); uiStream.append(<BotMessage content={uiFeedbackStream.value} />); if (!mapboxAccessToken) { const errorMessage = 'Mapbox access token is not configured. This tool is unavailable.'; uiFeedbackStream.done(errorMessage); return { type: 'ELEVATION_QUERY_RESULT', error: errorMessage, }; }
	Insecure test context Description: The verification script assumes localhost and captures a screenshot path without sanitization or isolation; if run in shared CI, it could leak environment state or overwrite files—ensure it runs in isolated CI context. verify_elevation.py [8-24] Referred Code page.goto("http://localhost:3000/") # Wait for the loading overlay to disappear loading_overlay = page.locator('div[class*="z-[9999]"]') expect(loading_overlay).to_be_hidden(timeout=60000) # Use the correct placeholder text: "Explore" input_field = page.get_by_placeholder("Explore") expect(input_field).to_be_visible(timeout=30000) expect(input_field).to_be_enabled(timeout=30000) input_field.click() input_field.fill("what is the elevation of mount everest at latitude 27.9881 and longitude 86.9250?") page.get_by_role("button", name="Send message").click() expect(page.get_by_text("Elevation Information (Mapbox)")).to_be_visible(timeout=90000) page.screenshot(path="jules-scratch/verification/elevation-display.png")
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Re-evaluate elevation data extraction logic The current method of getting elevation by taking the max value from nearby contour lines via the Mapbox Tilequery API is inaccurate. A more precise value could be obtained by using a different API or by implementing interpolation between the contour lines. Examples: lib/agents/tools/elevation.tsx [58-60] const maxElevation = data.features .filter((feature: any) => feature.properties && typeof feature.properties.ele !== 'undefined') .reduce((max: number, feature: any) => Math.max(max, feature.properties.ele), -Infinity); Solution Walkthrough: Before: // lib/agents/tools/elevation.tsx // Fetch contour lines near the coordinates const apiUrl = `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/${longitude},${latitude}.json...`; const response = await fetch(apiUrl); const data = await response.json(); // Find the highest elevation among all returned contour lines const maxElevation = data.features .reduce((max, feature) => Math.max(max, feature.properties.ele), -Infinity); elevationData = { latitude, longitude, elevation: maxElevation }; After: // lib/agents/tools/elevation.tsx // Option 1: Use a different API for point elevation const response = await fetch(`.../some-point-elevation-api/${longitude},${latitude}.json...`); const data = await response.json(); const preciseElevation = data.elevation; // Directly get elevation elevationData = { latitude, longitude, elevation: preciseElevation }; // Option 2: Interpolate from contour lines const response = await fetch(`.../tilequery/${longitude},${latitude}.json...`); const data = await response.json(); const interpolatedElevation = interpolateElevation(data.features, latitude, longitude); elevationData = { latitude, longitude, elevation: interpolatedElevation }; Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a significant flaw in the core logic, where using the maximum elevation from contour lines via the Tilequery API provides an approximation rather than a precise value, impacting the accuracy of the new tool.	High
General	Ensure elevation value is a number Add a type check to ensure the ele property from the Mapbox API response is a number before using it in Math.max to prevent potential NaN results. lib/agents/tools/elevation.tsx [58-60] const maxElevation = data.features - .filter((feature: any) => feature.properties && typeof feature.properties.ele !== 'undefined') + .filter((feature: any) => feature.properties && typeof feature.properties.ele === 'number') .reduce((max: number, feature: any) => Math.max(max, feature.properties.ele), -Infinity); Apply / Chat Suggestion importance[1-10]: 6 __ Why: This suggestion correctly identifies a potential runtime error (NaN) by adding stricter type checking for the ele property from an external API, which improves the robustness and reliability of the elevation calculation.	Low
Possible issue	URL-encode coordinates in API requests URL-encode the latitude and longitude values in the Mapbox API request URL to improve robustness. lib/agents/tools/elevation.tsx [47] -const apiUrl = `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/${longitude},${latitude}.json?access_token=${mapboxAccessToken}`; +const apiUrl = `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/${encodeURIComponent(longitude)},${encodeURIComponent(latitude)}.json?access_token=${mapboxAccessToken}`; Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion promotes robust code by URL-encoding parameters, but its impact is low because the latitude and longitude are already validated as numbers by the Zod schema, making encoding redundant in this case.	Low
More

[charliecreates]

The new elevationQueryTool is always registered, which could expose an unusable tool in environments without a Mapbox access token. Follow the existing pattern used for videoSearch by gating registration on an environment variable (e.g., MAPBOX_ACCESS_TOKEN) to avoid runtime failures and maintain consistent behavior.

Summary of changes

• Added a new import: elevationTool from ./elevation.
• Registered a new tool in getTools: elevationQueryTool, initialized with { uiStream }.
• Minor structural update to the tools object to accommodate the new entry.

[charliecreates]

Consider conditionally registering elevationQueryTool based on the presence of a Mapbox access token, similar to how videoSearch is gated by SERPER_API_KEY. Without gating, environments lacking the token may still expose this tool in the UI, leading to avoidable runtime failures when invoked. Aligning with the existing conditional registration pattern improves robustness and avoids presenting unusable tools.

Suggestion

To match the existing pattern used for videoSearch, remove the inline elevationQueryTool property from the object initializer and register it conditionally after the object is created:

// Remove from the object initializer:
// elevationQueryTool: elevationTool({ uiStream })

// After tools is created:
if (process.env.MAPBOX_ACCESS_TOKEN) {
  tools.elevationQueryTool = elevationTool({ uiStream })
}

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.