Better zoom of fire pages

imports/ui/pages/Fires/Fires.js

@@ -49,6 +49,7 @@ class Fire extends React.Component {
     }
   }
 
+
   shouldComponentUpdate(nextProps, nextState) {
     return !(nextState.when === this.state.when && nextState.loading === this.state.loading && this.state.notfound === nextState.notfound);
   }
@@ -65,6 +66,12 @@ class Fire extends React.Component {
     });
   }
 
+  handleLeafletLoad(circle) {
+    if (this.fireMap && this.fireMap.leafletElement && circle && circle.leafletElement) {
+      this.fireMap.leafletElement.fitBounds(circle.leafletElement.getBounds());
+    }
+  }
+
   render() {
     const {
       notfound, loading, fire, t
@@ -89,14 +96,12 @@ class Fire extends React.Component {
          <Fragment>
            <h4 className="page-header">{this.title}</h4>
            <Map
-               ref={(map) => {
+               ref={(map) => { this.fireMap = map; }}
-                   this.fireMap = map;
-                 }}
                animate
                sleep={false}
                center={[fire.lat, fire.lon]}
                className="fire-leaflet-container"
-               zoom={12}
+               zoom={13}
            >
              <Fragment>
                <Circle
@@ -106,6 +111,7 @@ class Fire extends React.Component {
                    fillOpacity={0.0}
                    interactive={false}
                    radius={fire.scan ? fire.scan * 1000 : 300}
+                   ref={(circle) => { this.circle = circle; this.handleLeafletLoad(circle); }}
                />
              </Fragment>
              <FireList