feat: add map height legend to Tools > Units > Altitude - #1423
Conversation
Added a button on tools > units > altitude that shows a legend for different heights on the map.
✅ Deploy Preview for afmg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
For water we can show depth, like we do in Cell Details dialog. |
|
For the button - please just add it to other buttons at the bottom for now. |
There was a problem hiding this comment.
Pull request overview
Adds a “View Legend” control under Tools → Units → Altitude to show an on-map legend intended to help interpret the heightmap’s elevation colors, and updates legend contents when altitude exponent changes.
Changes:
- Add a new “Height legend” button to the Units Editor (Altitude section) in
src/index.html. - Wire up the button in
public/modules/ui/units-editor.jsto toggle a legend and generate representative height samples + labels. - Refresh the legend when the altitude exponent slider changes.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 10 comments.
| File | Description |
|---|---|
| src/index.html | Adds the “Height legend” UI button in the Altitude (Units Editor) section. |
| public/modules/ui/units-editor.js | Adds legend toggle + legend generation logic and refresh behavior tied to altitude exponent changes. |
| const data = sampled.map(c => [rn(c.height, 0), c.color, rn(c.altitude, 1)]); | ||
|
|
||
| // Set the number of items per column | ||
| styleLegendColItems.value = data.length; | ||
|
|
||
| drawLegend(`Heights (in ${heightUnitName})`, data); | ||
|
|
As suggested by Copilot.
Read the current heightmap scheme from the same source used by drawHeightmap (e.g., terrs.select(...).attr("scheme") or the style control) and pass it to getColorScheme.
So the colors used to represent different heights update with different style presets.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
I don't know how to do any of these suggestions. Reading the comments, it seems there are many things I haven't considered. If anyone wants to carry out this PR, go ahead. |
Deleted manual legend repositioning that overrides fitLegendBox() behavior. On: public/modules/ui/editors.js
Cached the height counts/levels and only recompute the parts that depend on the exponent/unit.
* Labels now use the same calculation/conversion used by getHeight. * Ocean height display correctly. * legend has the unit close to each legend item.
Done. With the new commit, ocean depth is measured too. And changes in units are updated.
Don't you think it makes more sense to keep the altitude button in the altitude section? Maybe putting it some pixels to the right, so it follows the indentation style. Or would you prefer it to appear as a general feature unrelated to altitude? I also planned to add a "slider" where the user can introduce the "amount" of representative heights the user can see on the legend (the amount of legend items). But the current option of a fixed "10 items" is fine too. Because there are only these colors. |
|
To find out what still needs updating, could you collapse the Copilot comments that have already been resolved and run Copilot again to check for any comments that still need to be implemented? |
When changing the Height unit (m/ft/f), the legend also refreshes by doing that. Without needing to delete and invoke the legend again.
|
This PR only adressess the heigthmap legend of issue 904 Add Keys for Climate and Height Maps #904 |
Moved id="altitudeLegend" button to unitsBottom section.
|
I've moved the show/hide altitude legend button to the unitsbottom area. What are the next steps to merge this PR? 
|
Would need to review and test it properly. The idea is good, but implementation is not ideal. |
Description
A new button has been added to the altitude settings section that displays a visual legend. This legend helps users interpret the different elevation levels represented on the map.
Changes:
UI: A "View Legend" button has been added to Tools > Units > Altitude.
Component: New map legend pop-up that displays the color scale and its corresponding altitude values.
Logic: The legend chooses some representative points. Also updates the unit system that is shown (meters/feet).
How to test:
Go to the side menu and select Tools. Enter Units and then Altitude. Click it and confirm that the legend matches the colors displayed on the map. Switch from meters to feet and verify that the legend values update correctly.
Screenshot
FMG altitude legend 2026-05-07
