Add Automatic Precision to Lat/Lon Display

As the zoom level changes, the user will be presented with
different levels of precision on the latitude and longitude.

refs: #304

src/gm3/components/coordinate-display.js

@@ -44,6 +44,23 @@ export function formatCoordinates(projection, coords, defaultPrecision = 4) {
     return coords.map(x => x.toFixed(precision)).join(', ');
 }
 
+/**
+ * Convert the zoom level to a number of digits for lat/lon
+ * formatting.
+ *
+ * @param {Number} zoom - The map's zoom level.
+ *
+ * @returns {Number} the number of digits.
+ */
+const zoomToPrecision = zoom => {
+    if (zoom > 18) {
+        return 6;
+    } else if (zoom > 9) {
+        return 4;
+    }
+    return 2;
+};
+
 /**
  * CoordinateDisplay options
  * - These options can be passed when adding the coordinate display to the app
@@ -158,9 +175,10 @@ export default class CoordinateDisplay extends React.Component {
         return proj.transform(this.props.coords, map_proj, latlon_proj);
     }
 
-    latlon(projection) {
+    latlon(projection, autoPrecision = true) {
         const coords = this.getLatLonCoords();
-        return formatCoordinates(projection, [coords[1], coords[0]]);
+        const digits = autoPrecision ? zoomToPrecision(this.props.zoom) : 4;
+        return formatCoordinates(projection, [coords[1], coords[0]], digits);
     }
 
     getProjectionCoords(projection) {

src/gm3/components/coordinates.js

@@ -29,7 +29,8 @@ import CoordinateDisplay from './coordinate-display';
 const mapToProps = function(store) {
     return {
         coords: store.cursor.coords,
-        resolution: store.map.resolution
+        resolution: store.map.resolution,
+        zoom: store.map.zoom,
     }
 }