diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index d46974c2dff14b3d80d98fe5c25e70034dde453a..31689d30f786bb0b3a6338b0c6537eff9444f305 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js @@ -298,8 +298,7 @@ const regionChooser = (function(){ if (utils.is_polygon(geom)){ // It could be a MultiPolygon, for example. var coordinates = geom.getLinearRing(0).getCoordinates(); var area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); - //NOTE: Could show m², ha or km² depending on magnitude - dataPanel.append("<h3 class='clean'>Area : " + (area / 10000).toFixed(1) + " ha\n"); + dataPanel.append("<h3 class='clean'>Area : " + utils.human_readable_area(area) + "\n"); } dataPanel.append('<div style="visibility:hidden" id="download_region">' + '<button type="button" onclick="regionChooser.downloadFromSelectedCityGMLs()" id="download_region_button" disabled>Download Region</button><br/>\n' + diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js b/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js index 6e2b788f80670a87cd1dafc27a7f9d4160eb2800..1c7ef395fdd03233e2a45aad2e99a8f377c47b5d 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js @@ -66,3 +66,13 @@ utils.polygon_style = function (color, alpha) { }), }); } + +utils.human_readable_area = function (area) { + if (area > 1_000_000) { + return (area / 1_000_000).toFixed(1) + " km²"; + } + if (area > 10_000) { + return (area / 10_000).toFixed(1) + " ha"; + } + return area.toFixed(1) + " m²"; +}