SiteMap do not draw non-instersecting polygons

Author: Frencil

lib/components/SiteMap/SiteMapFeature.js

@@ -294,6 +294,7 @@ var SiteMapFeature = function SiteMapFeature(props) {
 
 
   var neonContextHydrated = state.neonContextHydrated,
+      mapBounds = state.map.bounds,
       focusLocation = state.focusLocation.current,
       featureData = state.featureData[parentFeature ? parentFeature.type : featureType][parentFeature ? parentFeature.KEY : featureKey];
 
@@ -1397,6 +1398,15 @@ var SiteMapFeature = function SiteMapFeature(props) {
 
 
       if (featureShape === 'Polygon') {
+        // If the polygon boundary does not intersect the map bounds then do not render it
+        // We see this when the map bounds are entirely contained within a boundary but the
+        // feature is still visible, resulting in an always-on popup with no context otherwise
+        if (!(0, _SiteMapUtils.calculateLocationsInBounds)({
+          X: shapeData
+        }, mapBounds).length) {
+          return null;
+        }
+
         shapeProps = _extends({}, featureStyle || {}, polygonInteractionProps); // ReactLeaflet does not suport the mask prop, so add it as an unused class.
         // The LayoutEffect in SiteMapLeaflet.jsx then applies it as a mask attribute.
 

src/lib_components/components/SiteMap/SiteMapFeature.jsx

@@ -41,6 +41,7 @@ import {
 import SiteMapContext from './SiteMapContext';
 import {
   getHref,
+  calculateLocationsInBounds,
   FEATURES,
   FEATURE_TYPES,
   NLCD_CLASSES,
@@ -238,6 +239,7 @@ const SiteMapFeature = (props) => {
   */
   const {
     neonContextHydrated,
+    map: { bounds: mapBounds },
     focusLocation: { current: focusLocation },
     featureData: {
       [parentFeature ? parentFeature.type : featureType]: {
@@ -1326,6 +1328,10 @@ const SiteMapFeature = (props) => {
       }
       // Polygon
       if (featureShape === 'Polygon') {
+        // If the polygon boundary does not intersect the map bounds then do not render it
+        // We see this when the map bounds are entirely contained within a boundary but the
+        // feature is still visible, resulting in an always-on popup with no context otherwise
+        if (!calculateLocationsInBounds({ X: shapeData }, mapBounds).length) { return null; }
         shapeProps = {
           ...featureStyle || {},
           ...polygonInteractionProps,

src/lib_components/components/SiteMap/__tests__/SiteMapUtils.js

@@ -111,6 +111,12 @@ describe('SiteMap - SiteMapUtils', () => {
         'X', 'Y', 'Z',
       ]);
     });
+    test('correctly excludes boundaries that do not intersect the bounds', () => {
+      const smallerBounds = { lat: [15, 20], lng: [-6, 0] };
+      expect(calculateLocationsInBounds(coordLocations, smallerBounds)).toStrictEqual([
+        'Y',
+      ]);
+    });
     test('correctly returns empty set for invalid inputs', () => {
       expect(calculateLocationsInBounds({})).toStrictEqual([]);
       expect(calculateLocationsInBounds('bad locations')).toStrictEqual([]);