feat: add map height legend to Tools > Units > Altitude#1423
Open
Avengium wants to merge 3 commits intoAzgaar:masterfrom
Open
feat: add map height legend to Tools > Units > Altitude#1423Avengium wants to merge 3 commits intoAzgaar:masterfrom
Avengium wants to merge 3 commits intoAzgaar:masterfrom
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. |
Owner
|
For water we can show depth, like we do in Cell Details dialog. |
Owner
|
For the button - please just add it to other buttons at the bottom for now. |
Contributor
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. |
| </slider-input> | ||
| </div> | ||
|
|
||
| <div data-tip="Toggle altitude legend. Granularity affects the amount of heights shown"> |
|
|
||
| <div data-tip="Toggle altitude legend. Granularity affects the amount of heights shown"> | ||
| <span>Height legend:</span> | ||
| <button id="altitudeLegend" data-tip="Click to show the altitude legend" class="icon-list-bullet"></button> |
Comment on lines
+149
to
+153
| countByHeight.forEach((count, height) => { | ||
| const v = 1 - (height < 20 ? height - 5 : height) / 100; | ||
| const sRGB = scheme(v); | ||
| const altitude = height < 20 ? 0 : Math.pow(height - 18, exponent); | ||
| heightLevels.push({height, count, altitude, color: sRGB}); |
Comment on lines
+143
to
+146
| const heightUnitName = | ||
| heightUnitSelect.value === "custom_name" | ||
| ? heightUnitSelect.nextElementSibling?.value || "" | ||
| : (heightUnitSelect.selectedOptions[0]?.text.match(/\(([^)]+)\)/)?.[1] ?? ""); |
Comment on lines
+166
to
+172
| 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); | ||
|
|
Comment on lines
+168
to
+172
| // Set the number of items per column | ||
| styleLegendColItems.value = data.length; | ||
|
|
||
| drawLegend(`Heights (in ${heightUnitName})`, data); | ||
|
|
Comment on lines
68
to
72
| function changeHeightExponent() { | ||
| calculateTemperatures(); | ||
| if (layerIsOn("toggleTemperature")) drawTemperature(); | ||
| updateLegendIfVisible(); | ||
| } |
Comment on lines
+134
to
+138
| function updateAndDisplayLegend() { | ||
| const heights = pack.cells.h; | ||
| const countByHeight = new Map(); | ||
| for (const h of heights) countByHeight.set(h, (countByHeight.get(h) || 0) + 1); | ||
|
|
Comment on lines
+184
to
+186
|
|
||
| const x = Math.max(10, Math.min(svgWidth - legendWidth - 10, (+legend.attr("data-x") / 100) * svgWidth)); | ||
| const y = Math.max(10, Math.min(svgHeight - legendHeight - 10, (+legend.attr("data-y") / 100) * svgHeight)); |
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>
Contributor
Author
|
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
