Add support for overpass generated relations (#2301)

* fix task properties and add support for relations

* fix rapid osmObjectParams

src/components/ActivityMap/ActivityMap.js

@@ -88,6 +88,7 @@ export const ActivityMap = props => {
         zoomControl={false} animate={true} worldCopyJump={true}
         justFitFeatures
         noAttributionPrefix={props.noAttributionPrefix}
+        intl={props.intl}
       >
         <ZoomControl position='topright' />
         <VisibleTileLayer {...props} zIndex={1} noWrap bounds={toLatLngBounds(GLOBAL_MAPBOUNDS)} />

src/components/EnhancedMap/EnhancedMap.js

@@ -8,6 +8,7 @@ import bboxPolygon from '@turf/bbox-polygon'
 import booleanDisjoint from '@turf/boolean-disjoint'
 import booleanContains from '@turf/boolean-contains'
 import _get from 'lodash/get'
+import _omit from 'lodash/omit'
 import _each from 'lodash/each'
 import _isEmpty from 'lodash/isEmpty'
 import _isEqual from 'lodash/isEqual'
@@ -19,9 +20,11 @@ import _reduce from 'lodash/reduce'
 import _find from 'lodash/find'
 import _size from 'lodash/size'
 import _noop from  'lodash/noop'
+import { IntlProvider } from 'react-intl'
 import AsIdentifiableFeature
        from '../../interactions/TaskFeature/AsIdentifiableFeature'
 import messages from './Messages'
+import PropertyList from './PropertyList/PropertyList'
 
 const PIXEL_MARGIN = 10 // number of pixels on each side of a click to consider
 
@@ -359,19 +362,18 @@ export class EnhancedMap extends ReactLeafletMap {
         <ol>
           {layers.map(([description, layerInfo]) => {
             return (
-              <li key={description} className="mr-my-4">
-                <a
-                  onClick={() => layerInfo.layer.fire('mr-external-interaction', {
-                    map: this.leafletElement,
-                    latlng: latlng,
-                    onBack: () => this.popupLayerSelectionList(layers, latlng),
-                  })}
-                  onMouseEnter={() => layerInfo.layer.fire("mr-external-interaction:start-preview")}
-                  onMouseLeave={() => layerInfo.layer.fire("mr-external-interaction:end-preview")}
+                <IntlProvider
+                              key={this.props.intl.locale} 
+                              locale={this.props.intl.locale} 
+                              messages={this.props.intl.messages}
+                              textComponent="span" 
                 >
-                  {layerInfo.label || description}
-                </a>
-              </li>
+                  <PropertyList
+                    header={description}
+                    featureProperties={_omit(layerInfo?.geometry?.properties, ['id', 'type'])}
+                    onBack={() => this.popupLayerSelectionList(layers, latlng)}
+                  />
+                </IntlProvider>
             )
           })}
         </ol>

src/components/EnhancedMap/PropertyList/PropertyList.js

@@ -67,7 +67,7 @@ const PropertyList = props => {
   }))
 
   return (
-    <div className="feature-properties mr-ml-4">
+    <div className="feature-properties mr-ml-4" style={{ maxHeight: "300px", overflow: "auto" }}>
       {!props.hideHeader && header}
       <table className={classNames("property-list", {"mr-bg-transparent mr-text-white": darkMode, "table": !darkMode})}>
         <tbody>{rows}</tbody>

src/components/SupplementalMap/SupplementalMap.js

@@ -86,6 +86,7 @@ const SupplementalMap = props => {
         maxZoom={maxZoom}
         worldCopyJump={true}
         overlayOrder={overlayOrder}
+        intl={props.intl}
       >
         <ZoomControl position='topright' />
         <SourcedTileLayer maxZoom={maxZoom} {...props} />

src/components/TaskClusterMap/TaskClusterMap.js

@@ -746,6 +746,7 @@ export class TaskClusterMap extends Component {
         taskMarkers={this.props.taskMarkers}
         onClick={() => this.unspider()}
         onZoomOrMoveStart={this.debouncedUpdateBounds.cancel}
+        intl={this.props.intl}
       >
         <ZoomControl className="mr-z-10" position='topright' />
         {this.props.showScaleControl && <ScaleControl className="mr-z-10" position='bottomleft'/>}

src/components/TaskPane/TaskMap/TaskMap.js

@@ -620,6 +620,7 @@ export class TaskMap extends Component {
           conditionalStyles={_get(this.props, 'challenge.taskStyles')}
           externalInteractive
           overlayOrder={overlayOrder}
+          intl={this.props.intl}
         >
           <ZoomControl position='topright' />
           <FitBoundsControl />

src/components/TaskPane/TaskNearbyList/TaskNearbyMap.js

@@ -162,7 +162,7 @@ export class TaskNearbyMap extends Component {
         <EnhancedMap
           onClick={this.props.clearNextTask}
           center={currentCenterpoint} zoom={12} minZoom={2} maxZoom={19}
-          zoomControl={false} animate={true} worldCopyJump={true}
+          zoomControl={false} animate={true} worldCopyJump={true} intl={this.props.intl}
         >
           <ZoomControl position='topright' />
           <VisibleTileLayer {...this.props} zIndex={1} />

src/services/Editor/Editor.js

@@ -469,6 +469,7 @@ export const osmObjectParams = function (
               case "Polygon":
                 return `${abbreviated ? "w" : "way"}${entitySeparator}${osmId}`;
               case "MultiPolygon":
+              case "GeometryCollection":
                 return `${
                   abbreviated ? "r" : "relation"
                 }${entitySeparator}${osmId}`;