feat(mouse info panel): added selected unit coordinates displaying

The coordinates are only shown if one unit has been selected.
This commit is contained in:
MarcoJayUsai
2024-11-11 18:56:29 +01:00
parent 5cd566c7ca
commit 5e5ee30b8f
3 changed files with 120 additions and 2 deletions

View File

@@ -107,4 +107,23 @@
#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"],
#coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] {
display:flex;
}
/* Unit Coordinates */
#unit-coordinates .elevation::after {
content: attr(data-value)
}
#unit-coordinates[data-location-system] [data-location-system] {
display:none;
}
#unit-coordinates[data-location-system="LatLng"] [data-location-system="LatLng"],
#unit-coordinates[data-location-system="MGRS"] [data-location-system="MGRS"],
#unit-coordinates[data-location-system="UTM"] [data-location-system="UTM"] {
display:flex;
}
#unit-coordinates-title {
font-size: 10px;
}

View File

@@ -60,4 +60,41 @@
</div>
</div>
<span id="unit-coordinates-title" class="hide">Selected Unit Coordinates:</span>
<div id="unit-coordinates" class="mouse-tool" data-location-system="LatLng">
<div class="mouse-tool-item" data-location-system="MGRS">
<div id="ref-unit-position-mgrs"></div>
<div id="unit-position-mgrs" class="coordinates"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-latitude" data-location-system="LatLng"></div>
<div id="unit-position-latitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-longitude" data-location-system="LatLng"></div>
<div id="unit-position-longitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-northing" data-location-system="UTM"></div>
<div id="unit-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-easting" data-location-system="UTM"></div>
<div id="unit-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
</div>
<div>
<div class="mouse-tool-item">
<div id="ref-unit-position-elevation" data-label="H"></div>
<div id="unit-position-elevation" class="elevation" data-value="---"></div>
</div>
</div>
</div>
</div>