Show map popup for the smallest feature at the clicked point farmOS#652

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Fix map ui being unreadable on dark mode #642](https://github.com/farmOS/farmOS/pull/642)
 - Patch Drupal core to fix [Issue #3266341: Views pagers do math on disparate data types, resulting in type errors in PHP 8](https://www.drupal.org/project/drupal/issues/3266341)
 - [Implement FarmBreadcrumbBuilder::applies() to only affect desired routes](https://github.com/farmOS/farmOS/pull/644)
+- [Show map popup for the smallest feature at the clicked point #652](https://github.com/farmOS/farmOS/pull/652)
 
 ## [2.0.1] 2023-02-08
 

modules/core/map/js/farmOS.map.behaviors.popup.js

@@ -17,7 +17,15 @@
       // Create a popup and add it to the instance for future reference.
       instance.popup = instance.addPopup(function (event) {
         var content = '';
-        var feature = instance.map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; });
+
+        // Get all features at the point that was clicked and sort them by area from smallest to largest.
+        // @todo GeometryCollections have an area of 0, which can cause some undesirable behavior.
+        var clickedFeatures = instance.map.getFeaturesAtPixel(event.pixel);
+        const sortValue = feature => typeof feature.getGeometry().getArea === 'function' ? feature.getGeometry().getArea() : 0;
+        clickedFeatures.sort((a,b) => sortValue(a) - sortValue(b))
+
+        // Get the first clicked feature.
+        var feature = clickedFeatures[0];
         if (feature) {
 
           // If the feature is a cluster, then create a list of names and add it