fix: set map bounds after all layers are added to the map

dhis2 · Mar 15, 2024 · e1c0a58 · e1c0a58
1 parent ec9d2a7
commit e1c0a58
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 1 deletion.
diff --git a/src/components/map/Map.js b/src/components/map/Map.js
@@ -42,6 +42,7 @@ class Map extends Component {
         latitude: PropTypes.number,
         layers: PropTypes.array,
         longitude: PropTypes.number,
+        numLayers: PropTypes.number,
         resizeCount: PropTypes.number,
         setAggregations: PropTypes.func,
         setFeatureProfile: PropTypes.func,
@@ -58,7 +59,10 @@ class Map extends Component {
         isPlugin: PropTypes.bool.isRequired,
     }
 
-    state = {}
+    state = {
+        addedLayers: [],
+        boundsFitted: false,
+    }
 
     constructor(props, context) {
         super(props, context)
@@ -130,6 +134,26 @@ class Map extends Component {
         }
     }
 
+    onLayerAdded = (addedLayer) => {
+        this.setState(
+            (state) => ({
+                addedLayers: [...state.addedLayers, addedLayer],
+            }),
+            () => {
+                if (
+                    !this.state.boundsFitted &&
+                    this.state.addedLayers.length === this.props.numLayers
+                ) {
+                    const layersBounds = this.map.getLayersBounds()
+                    if (Array.isArray(layersBounds)) {
+                        this.map.fitBounds(layersBounds)
+                        this.setState({ boundsFitted: true })
+                    }
+                }
+            }
+        )
+    }
+
     // Remove map
     componentWillUnmount() {
         if (this.map) {
@@ -173,6 +197,7 @@ class Map extends Component {
                                     openContextMenu={openContextMenu}
                                     setAggregations={setAggregations}
                                     setFeatureProfile={setFeatureProfile}
+                                    onLayerAdded={this.onLayerAdded}
                                     {...config}
                                 />
                             )

diff --git a/src/components/map/MapContainer.js b/src/components/map/MapContainer.js
@@ -30,6 +30,7 @@ const MapContainer = ({ resizeCount, setMap }) => {
                 isPlugin={false}
                 basemap={basemapConfig}
                 layers={loadedMapViews}
+                numLayers={mapViews.length}
                 bounds={bounds}
                 feature={feature}
                 openContextMenu={(config) => dispatch(openContextMenu(config))}

diff --git a/src/components/map/layers/EventLayer.js b/src/components/map/layers/EventLayer.js
@@ -134,6 +134,7 @@ class EventLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     render() {

diff --git a/src/components/map/layers/ExternalLayer.js b/src/components/map/layers/ExternalLayer.js
@@ -14,5 +14,6 @@ export default class ExternalLayer extends Layer {
         })
 
         map.addLayer(this.layer)
+        this.props.onLayerAdded(id)
     }
 }
diff --git a/src/components/map/layers/FacilityLayer.js b/src/components/map/layers/FacilityLayer.js
@@ -99,6 +99,7 @@ class FacilityLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     getPopup() {

diff --git a/src/components/map/layers/GeoJsonLayer.js b/src/components/map/layers/GeoJsonLayer.js
@@ -50,6 +50,7 @@ class GeoJsonLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     onFeatureClick(evt) {

diff --git a/src/components/map/layers/Layer.js b/src/components/map/layers/Layer.js
@@ -11,6 +11,7 @@ class Layer extends PureComponent {
 
     static propTypes = {
         id: PropTypes.string.isRequired,
+        onLayerAdded: PropTypes.func.isRequired,
         config: PropTypes.object,
         data: PropTypes.array,
         dataFilters: PropTypes.object,
@@ -101,6 +102,7 @@ class Layer extends PureComponent {
         })
 
         await map.addLayer(this.layer)
+        this.props.onLayerAdded(id)
     }
 
     async updateLayer() {

diff --git a/src/components/map/layers/OrgUnitLayer.js b/src/components/map/layers/OrgUnitLayer.js
@@ -62,6 +62,7 @@ export default class OrgUnitLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     getPopup() {

diff --git a/src/components/map/layers/ThematicLayer.js b/src/components/map/layers/ThematicLayer.js
@@ -131,6 +131,7 @@ class ThematicLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     // Set initial period

diff --git a/src/components/map/layers/TrackedEntityLayer.js b/src/components/map/layers/TrackedEntityLayer.js
@@ -156,6 +156,7 @@ class TrackedEntityLayer extends Layer {
 
         // Fit map to layer bounds once (when first created)
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     getPopup() {

diff --git a/src/components/map/layers/earthEngine/EarthEngineLayer.js b/src/components/map/layers/earthEngine/EarthEngineLayer.js
@@ -134,6 +134,7 @@ export default class EarthEngineLayer extends Layer {
         }
 
         this.fitBoundsOnce()
+        this.props.onLayerAdded(id)
     }
 
     hasAggregations() {

diff --git a/src/components/plugin/Map.js b/src/components/plugin/Map.js
@@ -118,6 +118,7 @@ const Map = forwardRef((props, ref) => {
                 isFullscreen={false}
                 basemap={basemap}
                 layers={layers.current}
+                numLayers={layers.current.length}
                 controls={controls}
                 bounds={defaultBounds}
                 openContextMenu={setContextMenu}