Add minimum padding to cluster click zoom so that markers aren't cut off

jaryncolbert · Aug 7, 2019 · d2e8302 · d2e8302
1 parent eb31902
commit d2e8302
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -11,6 +11,8 @@ export default class App extends React.Component {
         zoom: 2.5
     };
 
+    DEFAULT_PADDING = { padding: [50, 50] };
+
     state = {
         locations: [],
         viewport: this.DEFAULT_VIEWPORT,
@@ -138,6 +140,7 @@ export default class App extends React.Component {
                         selected={this.state.selected}
                         onClick={this.triggerClearInput}
                         isLoading={this.state.mapLoading}
+                        padding={this.DEFAULT_PADDING}
                     />
                 </div>
             </div>

diff --git a/src/components/map/LeafletMap.js b/src/components/map/LeafletMap.js
@@ -13,14 +13,11 @@ export default class LeafletMap extends React.Component {
     };
 
     fitBounds = bounds => {
-        const { onFitBounds } = this.props;
+        const { onFitBounds, padding } = this.props;
 
-        const fitBoundsOptions = {
-            padding: [40, 40]
-        };
         const mapElem = this.refs.mapRef.leafletElement;
 
-        mapElem.fitBounds(bounds, fitBoundsOptions);
+        mapElem.fitBounds(bounds, padding);
         this.setState({
             fitBoundsTriggered: false
         });
@@ -52,6 +49,7 @@ export default class LeafletMap extends React.Component {
             selected,
             viewport,
             isLoading,
+            padding,
             ...otherProps
         } = this.props;
         return isLoading ? (
@@ -73,6 +71,7 @@ export default class LeafletMap extends React.Component {
                     maxClusterRadius="45"
                     locations={locations}
                     selected={selected}
+                    padding={padding}
                 />
             </Map>
         );

diff --git a/src/components/map/LocationClusterGroup.js b/src/components/map/LocationClusterGroup.js
@@ -28,12 +28,19 @@ export default class LocationClusterGroup extends React.Component {
     };
 
     render() {
-        let { locations, selected, fitBoundsFn, ...otherProps } = this.props;
+        let {
+            locations,
+            selected,
+            fitBoundsFn,
+            padding,
+            ...otherProps
+        } = this.props;
         return (
             <MarkerClusterGroup
                 ref="clusterGroupRef"
                 disableClusteringAtZoom={11}
                 spiderfyOnMaxZoom={false}
+                onClusterClick={cluster => cluster.zoomToBounds(padding)}
                 {...otherProps}
                 iconCreateFunction={this.clusterGroupIcon}>
                 {locations.map(loc => {