Update the UI to respond to the dynamically calculated zoom limits

These changes feed the dynamically calculated zoom limits into the Map
component.

The addition of the "key" attribute is to get around the fact that
minZoom and maxZoom are not "dynamically" updated by the React-Leaflet
bindings. This forces react to completely recreate the map component. It
is not a very efficient choice, but it will do for now.

ui/src/App.js

@@ -93,8 +93,12 @@ class TodoApp extends React.Component {
             onClick={e => {
               console.log('clicked', e.latlng)
             }}
+            key={mapId} // force minZoom/maxZoom etc to be reset by forcing React to create a new map (NB: not very efficient)
             bounds={mapImage.geo_bounds}
-            zoom={12}
+            maxBounds={mapImage.geo_bounds}
+            // Allow 2 extra zooms, and prevent the last 2 extra zoom outs
+            minZoom={mapImage.minZoom + 2}
+            maxZoom={mapImage.maxZoom + 2}
             style={{
               height: '800px',
               width: '100%',