Fix unit selector

app/static/app/js/components/Map.jsx

@@ -400,11 +400,6 @@ class Map extends React.Component {
         mapView: this
     });
 
-    //add zoom control with your options
-    let zoomControl = Leaflet.control.zoom({
-         position:'bottomleft'
-    }).addTo(this.map);
-
     const UnitsCtrl = Leaflet.Control.extend({
       options: {
           position: 'bottomleft'
@@ -419,6 +414,10 @@ class Map extends React.Component {
     });
     new UnitsCtrl().addTo(this.map);
 
+    //add zoom control with your options
+    let zoomControl = Leaflet.control.zoom({
+         position:'bottomleft'
+    }).addTo(this.map);
 
     if (showBackground) {
       this.basemaps = {};

app/static/app/js/components/UnitSelector.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { systems, getPreferredUnitSystem, setPreferredUnitSystem } from '../classes/Units';
+import '../css/UnitSelector.scss';
 
 class UnitSelector extends React.Component {
   static propTypes = {
@@ -12,8 +13,6 @@ class UnitSelector extends React.Component {
     this.state = {
         system: getPreferredUnitSystem()
     }
-
-    // console.log(systems.metric.length(1.01).toString());
   }
   
   handleChange = e => {
@@ -23,7 +22,7 @@ class UnitSelector extends React.Component {
 
   render() {
     return (
-      <select value={this.state.system} onChange={this.handleChange}>
+      <select className="unit-selector" value={this.state.system} onChange={this.handleChange}>
             {Object.keys(systems).map(k => 
                 <option value={k} key={k}>{systems[k].getName()}</option>)}
         </select>

app/static/app/js/css/UnitSelector.scss

@@ -0,0 +1,4 @@
+.unit-selector{
+    font-size: 14px;
+    padding: 5px;
+}