Add footprint to detail and list map (#5113)

perryr16 · Ross Perry · kflemin · web-flow · commit c0960f0f55e7 · 2025-10-22T12:52:51.000-06:00
* footprint on detail

* footprint on list map

---------

Co-authored-by: Ross Perry &lt;ross.perry@Rosss-MacBook-Pro-2.local&gt;
Co-authored-by: Katherine Fleming &lt;2205659+kflemin@users.noreply.github.com&gt;
diff --git a/seed/static/seed/js/controllers/inventory_detail_map_controller.js b/seed/static/seed/js/controllers/inventory_detail_map_controller.js
@@ -39,6 +39,8 @@ angular.module('SEED.controller.inventory_detail_map', []).controller('inventory
     const init = () => {
       $scope.bounding_box = $scope.item_state.bounding_box.replace(/^SRID=\d+;/, '');
       $scope.centroid = $scope.item_state.centroid.replace(/^SRID=\d+;/, '');
+      const footprint = $scope.item_state.property_footprint || $scope.item_state.taxlot_footprint;
+      $scope.footprint = footprint?.replace(/^SRID=\d+;/, '');
 
       // store a mapping of layers z-index and visibility
       $scope.layers = {};
@@ -49,13 +51,15 @@ angular.module('SEED.controller.inventory_detail_map', []).controller('inventory
         $scope.layers.building_centroid_layer = { zIndex: 4, visible: 1 };
         $scope.layers.taxlot_bb_layer = { zIndex: 5, visible: 0 };
         $scope.layers.taxlot_centroid_layer = { zIndex: 6, visible: 0 };
+        $scope.layers.footprint = { zIndex: 7, visible: 1 };
       } else {
         // taxlots
         $scope.layers.points_layer = { zIndex: 2, visible: 1 };
         $scope.layers.building_bb_layer = { zIndex: 3, visible: 0 };
         $scope.layers.building_centroid_layer = { zIndex: 4, visible: 0 };
         $scope.layers.taxlot_bb_layer = { zIndex: 5, visible: 1 };
         $scope.layers.taxlot_centroid_layer = { zIndex: 6, visible: 1 };
+        $scope.layers.footprint = { zIndex: 7, visible: 1 };
       }
 
       // Map
@@ -64,91 +68,35 @@ angular.module('SEED.controller.inventory_detail_map', []).controller('inventory
         zIndex: $scope.layers.base_layer.zIndex // Note: This is used for layer toggling.
       });
 
-      // This uses the bounding box instead of the lat/long. See BuildingPoint function in inventory_map_controller for reference
-      const buildingBoundingBox = () => {
-        const format = new ol.format.WKT();
-
-        const feature = format.readFeature($scope.bounding_box, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:3857'
-        });
-
-        feature.setProperties($scope.item_state);
-        return feature;
-      };
-
-      const buildingSources = () => {
-        const features = [buildingBoundingBox()];
-        return new ol.source.Vector({ features });
-      };
-
-      // Define building UBID bounding box
-      const buildingBB = () => {
-        const format = new ol.format.WKT();
-
-        const feature = format.readFeature($scope.bounding_box, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:3857'
-        });
-        feature.setProperties($scope.item_state);
-        return feature;
-      };
-
-      // Define building UBID centroid box
-      const buildingCentroid = () => {
-        const format = new ol.format.WKT();
-
-        const feature = format.readFeature($scope.centroid, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:3857'
-        });
-        feature.setProperties($scope.item_state);
-        return feature;
-      };
-
-      const buildingBBSources = () => {
-        const features = [buildingBB()];
-        return new ol.source.Vector({ features });
-      };
-
-      const buildingCentroidSources = () => {
-        const features = [buildingCentroid()];
-        return new ol.source.Vector({ features });
-      };
-
-      // Define taxlot UBID bounding box
-      const taxlotBB = () => {
+      const getFeature = (field) => {
         const format = new ol.format.WKT();
-
-        const feature = format.readFeature($scope.bounding_box, {
+        const feature = format.readFeature(field, {
           dataProjection: 'EPSG:4326',
           featureProjection: 'EPSG:3857'
         });
         feature.setProperties($scope.item_state);
         return feature;
       };
 
-      // Define taxlot UBID centroid box
-      const taxlotCentroid = () => {
-        const format = new ol.format.WKT();
-
-        const feature = format.readFeature($scope.centroid, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:3857'
-        });
-        feature.setProperties($scope.item_state);
-        return feature;
-      };
+      const getSources = (field) => {
+        if (!field) return null;
 
-      const taxlotBBSources = () => {
-        const features = [taxlotBB()];
+        const features = [getFeature(field)];
         return new ol.source.Vector({ features });
       };
 
-      const taxlotCentroidSources = () => {
-        const features = [taxlotCentroid()];
-        return new ol.source.Vector({ features });
-      };
+      // This uses the bounding box instead of the lat/long. See BuildingPoint function in inventory_map_controller for reference
+      const buildingSources = () => getSources($scope.bounding_box);
+      // Property UBID bounding box
+      const buildingBBSources = () => getSources($scope.bounding_box);
+      // Property UBID Centroid
+      const buildingCentroidSources = () => getSources($scope.centroid);
+      // Building footprint polygon
+      const buildingFootprintSources = () => getSources($scope.footprint);
+      // Taxlot UBID bounding box
+      const taxlotBBSources = () => getSources($scope.bounding_box);
+      // Taxlot UBID Centroid
+      const taxlotCentroidSources = () => getSources($scope.centroid);
 
       const clusterSource = () => new ol.source.Cluster({
         source: buildingSources(),
@@ -183,6 +131,12 @@ angular.module('SEED.controller.inventory_detail_map', []).controller('inventory
         style: buildingStyle
       });
 
+      $scope.footprint_layer = new ol.layer.Vector({
+        source: buildingFootprintSources(),
+        zIndex: $scope.layers.footprint.zIndex,
+        style: buildingStyle
+      });
+
       $scope.taxlot_bb_layer = new ol.layer.Vector({
         source: taxlotBBSources(),
         zIndex: $scope.layers.taxlot_bb_layer.zIndex,
@@ -202,6 +156,11 @@ angular.module('SEED.controller.inventory_detail_map', []).controller('inventory
       } else {
         layers = [base_layer, $scope.taxlot_bb_layer, $scope.taxlot_centroid_layer];
       }
+
+      if ($scope.footprint) {
+        layers.push($scope.footprint_layer);
+      }
+
       $scope.map = new ol.Map({
         target: 'map',
         layers
diff --git a/seed/static/seed/js/controllers/inventory_map_controller.js b/seed/static/seed/js/controllers/inventory_map_controller.js
@@ -15,10 +15,26 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
   'user_service',
   'organization_service',
   'labels',
+  'footprint_column_name',
   'group',
   'urls',
   // eslint-disable-next-line func-names
-  function ($scope, $stateParams, $state, $log, $uibModal, cycles, inventory_service, map_service, user_service, organization_service, labels, group, urls) {
+  function (
+    $scope,
+    $stateParams,
+    $state,
+    $log,
+    $uibModal,
+    cycles,
+    inventory_service,
+    map_service,
+    user_service,
+    organization_service,
+    labels,
+    footprint_column_name,
+    group,
+    urls
+  ) {
     $scope.inventory_type = $stateParams.inventory_type;
     const isPropertiesTab = $scope.inventory_type === 'properties';
     if ($stateParams.group_id) {
@@ -113,7 +129,8 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
         property_centroid_layer: { zIndex: 4, visible: isPropertiesTab },
         taxlot_bb_layer: { zIndex: 5, visible: !isPropertiesTab },
         taxlot_centroid_layer: { zIndex: 6, visible: !isPropertiesTab },
-        points_layer: { zIndex: 7, visible: true }
+        points_layer: { zIndex: 7, visible: true },
+        footprint_layer: { zIndex: 8, visible: true }
       };
 
       const buildingSources = (records) => {
@@ -129,18 +146,18 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
         return new ol.source.Vector({ features });
       };
 
-      const boundingBoxSource = (records) => {
+      const getSources = (records, field) => {
         const features = records.reduce((acc, record) => {
-          if (record.bounding_box) {
+          if (record[field]) {
             try {
-              const feature = new ol.format.WKT().readFeature(record.bounding_box, {
+              const feature = new ol.format.WKT().readFeature(record[field], {
                 dataProjection: 'EPSG:4326',
                 featureProjection: 'EPSG:3857'
               });
               feature.setProperties(record);
               acc.push(feature);
             } catch (e) {
-              console.error(`Failed to process bounding box for id ${record.id}`);
+              console.error(`Failed to process ${field} for id ${record.id}`);
             }
           }
           return acc;
@@ -149,25 +166,9 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
         return new ol.source.Vector({ features });
       };
 
-      const centroidSource = (records) => {
-        const features = records.reduce((acc, record) => {
-          if (record.centroid) {
-            try {
-              const feature = new ol.format.WKT().readFeature(record.centroid, {
-                dataProjection: 'EPSG:4326',
-                featureProjection: 'EPSG:3857'
-              });
-              feature.setProperties(record);
-              acc.push(feature);
-            } catch (e) {
-              console.error(`Failed to process centroid for id ${record.id}`);
-            }
-          }
-          return acc;
-        }, []);
-
-        return new ol.source.Vector({ features });
-      };
+      const boundingBoxSource = (records) => getSources(records, 'bounding_box');
+      const centroidSource = (records) => getSources(records, 'centroid');
+      const footprintSource = (records) => getSources(records, footprint_column_name);
 
       const censusTractSource = async () => {
         let geojson = {
@@ -276,6 +277,12 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
         style: propertyStyle
       });
 
+      $scope.footprint_layer = new ol.layer.Vector({
+        source: footprintSource($scope.geocoded_properties),
+        zIndex: $scope.layers.footprint_layer.zIndex,
+        style: propertyStyle
+      });
+
       $scope.taxlot_bb_layer = new ol.layer.Vector({
         source: boundingBoxSource($scope.geocoded_taxlots),
         zIndex: $scope.layers.taxlot_bb_layer.zIndex,
@@ -487,6 +494,7 @@ angular.module('SEED.controller.inventory_map', []).controller('inventory_map_co
         $scope.filteredRecords = records.length;
 
         $scope.points_layer.setSource(pointsSource(records));
+        $scope.footprint_layer.setSource(footprintSource(records));
 
         if (isPropertiesTab) {
           $scope.hexbin_layer.setSource(hexbinSource(records));
diff --git a/seed/static/seed/js/seed.js b/seed/static/seed/js/seed.js
@@ -2186,6 +2186,14 @@
               'label_service',
               ($stateParams, label_service) => label_service.get_labels($stateParams.inventory_type).then((labels) => _.filter(labels, (label) => !_.isEmpty(label.is_applied)))
             ],
+            footprint_column_name: [
+              '$stateParams',
+              'inventory_service',
+              ($stateParams, inventory_service) => {
+                const get_columns = $stateParams.inventory_type === 'properties' ? inventory_service.get_property_columns : inventory_service.get_taxlot_columns;
+                return get_columns().then((columns) => columns.find((col) => col.column_name === 'property_footprint')?.name);
+              }
+            ],
             group: () => null
           }
         })
diff --git a/seed/static/seed/partials/inventory_map.html b/seed/static/seed/partials/inventory_map.html
@@ -107,6 +107,11 @@ <h1>{$:: 'Group - Map' | translate $}</h1>
               >Toggle Tax Lot UBID Centroids</a
             >
           </li>
+          <li role="menuitem">
+            <a ng-click="toggleLayer('footprint_layer')" translate
+              >Toggle Footprints</a
+            >
+          </li>
           <li role="menuitem">
             <a ng-click="toggleLayer('census_tract_layer')" translate
               >Toggle Census Tracts</a
@@ -334,6 +339,15 @@ <h1>{$:: 'Group - Map' | translate $}</h1>
     />
     {$:: 'Tax Lot UBID Centroids' | translate $}
   </label>
+  <label>
+    <input
+      type="checkbox"
+      name="footprints"
+      ng-model="layers.footprint_layer.visible"
+      ng-change="toggleLayer('footprint_layer', layers.footprint_layer.visible)"
+    />
+    {$:: 'Footprints' | translate $}
+  </label>
   <label>
     <input
       type="checkbox"
