Fix zoom and panning issues in maps (#2378)

* fix zoom and panning issues in task map and work on multiple tasks together widget map * fix initial zoom on challenges * refined conditions * add map wrap back
maproulette · Jul 11, 2024 · e309a2c · e309a2c
1 parent cb2ef25
commit e309a2c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 66 deletions.
diff --git a/src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.js b/src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.js
@@ -70,7 +70,6 @@ const SourcedTileLayer = (props) => {
 
   return (
     <TileLayer
-      noWrap={true} 
       key={normalizedLayer.id}
       {...normalizedLayer}
       attribution={attribution(normalizedLayer)}

diff --git a/src/components/EnhancedMap/TaskFeatureLayer/TaskFeatureLayer.js b/src/components/EnhancedMap/TaskFeatureLayer/TaskFeatureLayer.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { GeoJSON, useMap } from 'react-leaflet'
-import L, { FeatureGroup } from 'leaflet'
+import L from 'leaflet'
 import { injectIntl } from 'react-intl'
 import { featureCollection } from '@turf/helpers'
 import _isFunction from 'lodash/isFunction'
@@ -28,7 +28,6 @@ const HIGHLIGHT_SIMPLESTYLE = {
  */
 const TaskFeatureLayer = props => {
   const [layer, setLayer] = useState(null)
-  const [numberOfFeatures, setNumberOfFeatures] = useState(0)
   const map = useMap()
 
   const propertyList = (featureProperties, onBack) => {
@@ -104,23 +103,6 @@ const TaskFeatureLayer = props => {
     )
   }, [features.length])
 
-  useEffect(() => {
-    if(numberOfFeatures !== features.length) {
-      const geoJSONFeatures = new FeatureGroup()
-
-      map.eachLayer(layer => {
-        if (layer.feature && layer.feature.type === "Feature") {
-          geoJSONFeatures.addLayer(layer)
-        }
-      })
-
-      if (geoJSONFeatures.getLayers().length !== 0) {
-        map.fitBounds(geoJSONFeatures.getBounds().pad(0.2))
-      }
-      setNumberOfFeatures(features.length)
-    }
-  }, [layer])
-
   return layer
 }
 

diff --git a/src/components/TaskClusterMap/MapMarkers.js b/src/components/TaskClusterMap/MapMarkers.js
@@ -102,7 +102,7 @@ const Markers = (props) => {
   }, [props.currentZoom]);
 
   useEffect(() => {
-    // Fit bounds to initial tasks when they are loaded
+ // Fit bounds to initial tasks when they are loaded
     if (!initialLoadComplete && mapMarkers && mapMarkers.length > 0) {
       const bounds = props.centerBounds || toLatLngBounds(
         bbox({
@@ -121,9 +121,11 @@ const Markers = (props) => {
 
       map.fitBounds(bounds.pad(0.2));
       props.setCurrentBounds(bounds.pad(0.2));
-      setInitialLoadComplete(true);
+    } 
+    else if (props.taskCenter && !props.taskCenter.equals(prevProps.current.taskCenter)) {
+      map.panTo(props.taskCenter)
     }
-  }, [mapMarkers, initialLoadComplete]);
+  }, [props, mapMarkers, initialLoadComplete]);
 
   const refreshSpidered = () => {
     if (spidered.size === 0) {

diff --git a/src/components/TaskPane/TaskMap/TaskMap.js b/src/components/TaskPane/TaskMap/TaskMap.js
@@ -6,6 +6,8 @@ import { featureCollection } from '@turf/helpers'
 import { coordAll } from '@turf/meta'
 import { point } from '@turf/helpers'
 import _isObject from 'lodash/isObject'
+import _uniqueId from 'lodash/uniqueId'
+import L from 'leaflet'
 import _get from 'lodash/get'
 import _isFinite from 'lodash/isFinite'
 import _map from 'lodash/map'
@@ -69,8 +71,31 @@ export const TaskMapContainer = (props) => {
   const [osmDataLoading, setOsmDataLoading] = useState(null)
   const [mapillaryViewerImage, setMapillaryViewerImage] = useState(null)
   const [openStreetCamViewerImage, setOpenStreetCamViewerImage] = useState(null)
-  const [directionalityIndicators, setDirectionalityIndicators] = useState(null)
+  const [directionalityIndicators, setDirectionalityIndicators] = useState({})
   const [showOSMElements, setShowOSMElements] = useState({ nodes: true, ways: true, areas: true })
+  const taskFeatures = () => {
+    if (_get(props, 'taskBundle.tasks.length', 0) > 0) {
+      return featureCollection(
+        _flatten(_compact(_map(props.taskBundle.tasks,
+                               task => _get(task, 'geometries.features'))))
+      ).features
+    }
+
+    // If current OSM data is available, show the feature's current OSM tags
+    // instead of those bundled with the GeoJSON. We preserve any simplestyle
+    // properties, allowing display colors and what not to be customized
+    if (_get(props, 'osmElements.size', 0) > 0) {
+      return AsMappableTask(props.task).featuresWithTags(
+        _get(props.task, 'geometries.features'),
+        props.osmElements,
+        true,
+        supportedSimplestyles,
+      )
+    }
+
+    return _get(props.task, 'geometries.features')
+  }
+  const features = taskFeatures()
   const animator = new MapAnimator()
 
   useMapEvents({
@@ -273,10 +298,13 @@ export const TaskMapContainer = (props) => {
   }, [props.task.id]);
 
   useEffect(() => {
-    return () => {
-      props.deactivateKeyboardShortcutGroup(shortcutGroup, handleKeyboardShortcuts);
-    };
-  }, []);
+    if (features.length !== 0) {
+      const layerGroup = L.featureGroup(
+        features.map(feature => L.geoJSON(feature))
+      );
+      map.fitBounds(layerGroup.getBounds().pad(0.2));
+    }
+  }, [props.taskBundle, props.taskId]);
 
   const mapillaryImageMarkers = () => {
     return {
@@ -312,7 +340,7 @@ export const TaskMapContainer = (props) => {
 
   const generateDirectionalityMarkers = () => {
     const markers = []
-    const allFeatures = taskFeatures()
+    const allFeatures = features
     _each(allFeatures, (feature, featureIndex) => {
       if (!feature.properties || !feature.properties.oneway) {
         return
@@ -353,29 +381,6 @@ export const TaskMapContainer = (props) => {
     })
   }
 
-  const taskFeatures = () => {
-    if (_get(props, 'taskBundle.tasks.length', 0) > 0) {
-      return featureCollection(
-        _flatten(_compact(_map(props.taskBundle.tasks,
-                               task => _get(task, 'geometries.features'))))
-      ).features
-    }
-
-    // If current OSM data is available, show the feature's current OSM tags
-    // instead of those bundled with the GeoJSON. We preserve any simplestyle
-    // properties, allowing display colors and what not to be customized
-    if (_get(props, 'osmElements.size', 0) > 0) {
-      return AsMappableTask(props.task).featuresWithTags(
-        _get(props.task, 'geometries.features'),
-        props.osmElements,
-        true,
-        supportedSimplestyles,
-      )
-    }
-
-    return _get(props.task, 'geometries.features')
-  }
-
   const applyStyling = taskFeatures => {
     // If the challenge has conditional styles, apply those
     const conditionalStyles = _get(props, 'challenge.taskStyles')
@@ -400,6 +405,7 @@ export const TaskMapContainer = (props) => {
     )
   }
     const maxZoom = _get(props.task, "parent.maxZoom", MAX_ZOOM)
+    const renderId = _uniqueId()
     let overlayOrder = props.getUserAppSetting(props.user, 'mapOverlayOrder')
     if (_isEmpty(overlayOrder)) {
       overlayOrder = DEFAULT_OVERLAY_ORDER
@@ -426,7 +432,7 @@ export const TaskMapContainer = (props) => {
           <TaskFeatureLayer
             key="task-features"
             mrLayerId="task-features"
-            features={applyStyling(taskFeatures())}
+            features={applyStyling(features)}
             animator={animator}
             externalInteractive
           />
@@ -495,18 +501,19 @@ export const TaskMapContainer = (props) => {
           openStreetCamCount={_get(props, 'openStreetCamImages.length', 0)}
           overlayOrder={overlayOrder}
         />
-          <ZoomControl position='topright' />
-          <FitBoundsControl features={props.features} />
-          <SourcedTileLayer maxZoom={maxZoom} {...props} />
-          {_map(overlayLayers, (layer, index) => (
-            <Pane
-              key={`pane-${index}`}
-              name={`pane-${index}`}
-              className="custom-pane"
-            >
-              {layer.component}
-            </Pane>
-          ))}
+        <ZoomControl position='topright' />
+        <FitBoundsControl features={features} />
+        <SourcedTileLayer maxZoom={maxZoom} {...props} />
+        {_map(overlayLayers, (layer, index) => (
+          <Pane
+          key={`pane-${renderId}-${index}`}
+          name={`pane-${renderId}-${index}`}
+          style={{zIndex: 10 + index}}
+            className="custom-pane"
+          >
+            {layer.component}
+          </Pane>
+        ))}
 
         {mapillaryViewerImage && renderMapillaryViewer()}
 
@@ -532,7 +539,7 @@ const TaskMap = (props) => {
         zoom={DEFAULT_ZOOM}
         zoomControl={false}
         minZoom={2}
-        maxZoom={18}
+        maxZoom={MAX_ZOOM}
         attributionControl={false}
         maxBounds={[[-90, -180], [90, 180]]} 
       >