Fix map feature ordering

src/components/EnhancedMap/OSMDataLayer/OSMDataLayer.js

@@ -10,23 +10,18 @@
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from '../../../tailwind.config.js'
 import layerMessages from '../LayerToggle/Messages'
-import { createPathComponent } from '@react-leaflet/core'
+import { createPathComponent, useLeafletContext } from '@react-leaflet/core'
 import { useMap } from 'react-leaflet'
 
 const colors = resolveConfig(tailwindConfig).theme.colors
-const HIGHLIGHT_STYLE = {
-  color: colors.gold,
-  fillColor: colors.gold,
-  weight: 7,
-}
-
-const HOVER_HIGHLIGHT_STYLE = {
-  color: colors.gold,
-  fillColor: colors.gold,
-  weight: 14,
-}
 
-const generateLayer = (props, map) => {
+const generateLayer = (props, map, leaflet) => {
+  const HIGHLIGHT_STYLE = {
+    color: colors.gold,
+    fillColor: colors.gold,
+    weight: props.zoom >= 18 ? 7 : props.zoom > 15 ? 6 : 3,
+  }
+
   const popupContent = (layer, onBack) => {
     const properties = layer.feature.properties
     const header = (
@@ -40,6 +35,7 @@
     )
 
     const contentElement = document.createElement('div')
+    contentElement.style.maxHeight = '300px';
     ReactDOM.render(
       <IntlProvider 
         key={props.intl.locale} 
@@ -84,7 +80,7 @@
     showNodes: props.showOSMElements.nodes,
     showWays: props.showOSMElements.ways,
     showAreas: props.showOSMElements.areas,
-    pane: _get(props, 'leaflet.pane'),
+    pane: props.leaflet?.pane,
   })
 
   layerGroup.eachLayer(layer => {
@@ -101,7 +97,7 @@
         properties: layer.feature.properties,
       }
     }
-      const styleableLayer = AsStylableLayer(layer)
+    const styleableLayer = AsStylableLayer(layer)
 
     if (!props.externalInteractive) {
       const popup = L.popup().setContent(popupContent(layer, () => {}))
@@ -126,7 +122,7 @@
 
       layer.on('mouseover', () => {
         // Apply highlight style on hover
-        styleableLayer.pushStyle({ ...HOVER_HIGHLIGHT_STYLE });
+        styleableLayer.pushStyle({ ...HIGHLIGHT_STYLE });
       });
 
       layer.on('mouseout', () => {
@@ -155,7 +151,7 @@
 /**
  * Serves as a react-leaflet adapter for the leaflet-osm package
  */
-const OSMDataLayer = createPathComponent(
+const OSMDataLayerComponent = createPathComponent(
   (props, context) => {
     const map = useMap()
     return {
@@ -175,6 +171,11 @@
   }
 )
 
+const OSMDataLayer = (props) => {
+  const leaflet = useLeafletContext()
+  return <OSMDataLayerComponent {...props} leaflet={leaflet} />
+}
+
 export default injectIntl(OSMDataLayer)
 
 // The below code (with a couple minor linter fixes) comes from the

src/components/EnhancedMap/TaskFeatureLayer/TaskFeatureLayer.js

@@ -5,15 +5,14 @@
 import { injectIntl } from 'react-intl'
 import { featureCollection } from '@turf/helpers'
 import _isFunction from 'lodash/isFunction'
-import _get from 'lodash/get'
 import _uniqueId from 'lodash/uniqueId'
-import AsSimpleStyleableFeature
-       from '../../../interactions/TaskFeature/AsSimpleStyleableFeature'
+import AsSimpleStyleableFeature from '../../../interactions/TaskFeature/AsSimpleStyleableFeature'
 import PropertyList from '../PropertyList/PropertyList'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from '../../../tailwind.config.js'
 import layerMessages from '../LayerToggle/Messages'
 import { IntlProvider } from 'react-intl'
+import { useLeafletContext } from '@react-leaflet/core'
 
 const colors = resolveConfig(tailwindConfig).theme.colors
 const HIGHLIGHT_SIMPLESTYLE = {
@@ -31,9 +30,11 @@
 const TaskFeatureLayer = props => {
   const [layer, setLayer] = useState(null)
   const map = useMap()
+  const leaflet = useLeafletContext()
 
   const propertyList = (featureProperties, onBack) => {
     const contentElement = document.createElement('div')
+    contentElement.style.maxHeight = '300px';
     ReactDOM.render(
       <IntlProvider key={props.intl.locale} 
                     locale={props.intl.locale} 
@@ -49,7 +50,7 @@
 
   const { features, mrLayerId, animator, externalInteractive } = props
   const layerLabel = props.intl.formatMessage(layerMessages.showTaskFeaturesLabel)
-  const pane = _get(props, 'leaflet.pane')
+  const pane = leaflet?.pane
 
   useEffect(() => {
     const newLayer = (
@@ -59,7 +60,7 @@
         mrLayerLabel={layerLabel}
         data={featureCollection(features)}
         pointToLayer={(point, latLng) => {
-          return L.marker(latLng, {mrLayerLabel: layerLabel, mrLayerId: mrLayerId})
+          return L.marker(latLng, {pane, mrLayerLabel: layerLabel, mrLayerId: mrLayerId})
         }}
         onEachFeature={(feature, layer) => {
           const styleableFeature =

src/components/TaskPane/TaskMap/TaskMap.js

@@ -155,6 +155,7 @@
 
   const popupLayerSelectionList = (layers, latlng) => {
     const contentElement = document.createElement('div')
+    contentElement.style.maxHeight = '300px';
     ReactDOM.render(
       <div className="mr-text-base mr-px-4 mr-links-blue-light">
         <h3>{props.intl.formatMessage(messages.layerSelectionHeader)}</h3>
@@ -261,40 +262,36 @@
     setShowTaskFeatures(prevState => !prevState);
   }
 
+  const fetchOSMData = () => {
+    setOsmDataLoading(true)
+    props.fetchOSMData(
+      map.getBounds().toBBoxString()
+    ).then(xmlData => {
+      // Indicate the map should skip fitting to bounds as the OSM data could
+      // extend beyond the current view and we don't want the map to zoom out
+      setOsmData(xmlData)
+      setOsmDataLoading(false)
+    })
+  }
+
   /**
    * Invoked by LayerToggle when the user wishes to toggle visibility of
    * OSM data on or off.
    */
   const toggleOSMDataVisibility = () => {
     if (!showOSMData && !osmData && !osmDataLoading) {
       setOsmDataLoading(true)
-      props.fetchOSMData(
-        map.getBounds().toBBoxString()
-      ).then(xmlData => {
-        // Indicate the map should skip fitting to bounds as the OSM data could
-        // extend beyond the current view and we don't want the map to zoom out
-        setOsmData(xmlData)
-        setOsmDataLoading(false)
-      })
+      fetchOSMData()
     }
     setShowOSMData(!showOSMData)
+    setOsmDataLoading(false)
   }
 
   const toggleOSMElements = element => {
     const newShowOSMElements = _clone(showOSMElements)
     newShowOSMElements[element] = !showOSMElements[element]
     setShowOSMElements(newShowOSMElements)
   }
-
-  /**
-   * Ensures the OSM Data Layer is deactivated
-   */
-  const deactivateOSMDataLayer = () => {
-    setShowOSMData(false)
-    setOsmData(null)
-    setOsmDataLoading(false)
-  }
-
   /**
    * Invoked by LayerToggle when the user wishes to toggle visibility of
    * Mapillary markers on or off.
@@ -396,15 +393,17 @@
   }, []);
 
   useEffect(() => {
-    deactivateOSMDataLayer()
-    generateDirectionalityMarkers();
-  }, [props.task.id, props.task.geometries]);
+    setOsmData(null)
+  }, [props.task.id, props.task.geometries])
 
   useEffect(() => {
     loadMapillaryIfNeeded();
     loadOpenStreetCamIfNeeded();
     animator.setAnimationFunction(animateFeatures)
-  }, [props]);
+    if (showOSMData && !osmData) {
+      fetchOSMData()
+    }
+  }, [props, osmData]);
 
   useEffect(() => {
     if (features.length !== 0) {