Display a popup when area features are clicked, and load area details via AJAX.

modules/farm/farm_area/farm_area.farm_map.inc

@@ -63,6 +63,7 @@ function farm_area_farm_map_view($name, $element) {
 
   // Add a farmOS map behavior that adds all area layers to the areas map.
   if ($name == 'farm_areas') {
+    farm_map_add_behavior('popup');
     farm_map_add_behavior('areas', array('zoom' => TRUE));
   }
 }

modules/farm/farm_area/js/farmOS.map.behaviors.areas.js

@@ -23,6 +23,29 @@
           }
         }
       }
+
+      // Load area details via AJAX when an area popup is displayed.
+      instance.popup.on('farmOS-map.popup', function (event) {
+        var area_details = jQuery('.ol-popup-description .area-details');
+        if (area_details.attr('id') === undefined) {
+          return;
+        }
+        var area_id = area_details.attr('id').replace('area-details-', '');
+        if (area_id) {
+          area_details.html('Loading area details...');
+          jQuery.getJSON(Drupal.settings.farm_map.base_path + 'farm/area/' + area_id + '/details', function(data) {
+            if (data) {
+              area_details.html(data);
+              var position = event.target.getPosition();
+              event.target.setPosition();
+              event.target.setPosition(position);
+            }
+            else {
+              area_details.html('');
+            }
+          });
+        }
+      });
     }
   };
 }());

modules/farm/farm_map/farm_map.farm_map.inc

@@ -0,0 +1,16 @@
+<?php
+/**
+ * @file
+ * Farm Map hooks implemented by the Farm Map module.
+ */
+
+/**
+ * Implements hook_farm_map_behaviors().
+ */
+function farm_map_farm_map_behaviors() {
+  return array(
+    'popup' => array(
+      'js' => 'js/farmOS.map.behaviors.popup.js',
+    ),
+  );
+}

modules/farm/farm_map/js/farmOS.map.behaviors.popup.js

@@ -0,0 +1,20 @@
+(function () {
+  farmOS.map.behaviors.popup = {
+    attach: function (instance) {
+
+      // 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; });
+        if (feature) {
+          var name = feature.get('name') || '';
+          var description = feature.get('description') || '';
+          if (name !== '' || description !== '') {
+            content = '<div class="ol-popup-content"><h4 class="ol-popup-name">' + name + '</h4><div class="ol-popup-description">' + description + '</div></div>';
+          }
+        }
+        return content;
+      });
+    }
+  };
+}());