diff --git a/package-lock.json b/package-lock.json
index 9cedd986c..c2a96036b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5400,9 +5400,9 @@
       "integrity": "sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g=="
     },
     "d3-drag": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.3.tgz",
-      "integrity": "sha512-8S3HWCAg+ilzjJsNtWW1Mutl74Nmzhb9yU6igspilaJzeZVFktmY6oO9xOh5TDk+BM2KrNFjttZNoJJmDnkjkg==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
       "requires": {
         "d3-dispatch": "1",
         "d3-selection": "1"
@@ -5413,6 +5413,16 @@
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz",
       "integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ=="
     },
+    "d3-force": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.0.1.tgz",
+      "integrity": "sha512-zh73/N6+MElRojiUG7vmn+3vltaKon7iD5vB/7r9nUaBeftXMzRo5IWEG63DLBCto4/8vr9i3m9lwr1OTJNiCg==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
     "d3-format": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.2.tgz",
@@ -5431,6 +5441,11 @@
       "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz",
       "integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
     },
+    "d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+    },
     "d3-scale": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
diff --git a/package.json b/package.json
index 26f2407cb..8296986b1 100644
--- a/package.json
+++ b/package.json
@@ -41,10 +41,10 @@
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-decorators": "^7.3.0",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-react": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.0.0",
     "@hot-loader/react-dom": "^16.13.0",
     "argparse": "^1.0.10",
     "awesomplete": "^1.1.2",
@@ -65,7 +65,9 @@
     "d3-brush": "^1.0.4",
     "d3-collection": "^1.0.4",
     "d3-color": "^1.0.3",
+    "d3-drag": "^1.2.5",
     "d3-ease": "^1.0.3",
+    "d3-force": "^2.0.1",
     "d3-format": "^1.3.0",
     "d3-interpolate": "^1.1.5",
     "d3-scale": "^1.0.5",
@@ -118,9 +120,9 @@
     "styled-components": "^4.0.3",
     "typeface-lato": "^0.0.75",
     "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-chunk-hash": "^0.6.0",
     "webpack-cli": "^3.1.2",
-    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.24.3",
     "whatwg-fetch": "^0.10.1",
diff --git a/scripts/get-data.sh b/scripts/get-data.sh
index 73dbb84fc..38d757cfa 100755
--- a/scripts/get-data.sh
+++ b/scripts/get-data.sh
@@ -75,4 +75,12 @@ do
   curl http://data.nextstrain.org/"${i}" --compressed -o data/"${i}"
 done
 
+staging_files=(
+  "testing_states.json" \
+)
+for i in "${staging_files[@]}"
+do
+  curl http://staging.nextstrain.org/"${i}" --compressed -o data/"${i}"
+done
+
 echo "The local data directory ./data now contains up-to-date datasets from http://data.nextstrain.org"
diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js
index 70baccd48..92516f3a8 100644
--- a/src/actions/recomputeReduxState.js
+++ b/src/actions/recomputeReduxState.js
@@ -16,7 +16,7 @@ import { computeMatrixFromRawData } from "../util/processFrequencies";
 import { applyInViewNodesToTree } from "../actions/tree";
 import { isColorByGenotype, decodeColorByGenotype } from "../util/getGenotype";
 import { getTraitFromNode, getDivFromNode } from "../util/treeMiscHelpers";
-
+import { getMapTypesAvailable } from "../util/spatialResolutionHelpers";
 
 export const doesColorByHaveConfidence = (controlsState, colorBy) =>
   controlsState.coloringsPresentOnTreeWithConfidence.has(colorBy);
@@ -67,6 +67,9 @@ const modifyStateViaURLQuery = (state, query) => {
   if (query.r) {
     state["geoResolution"] = query.r;
   }
+  if (Object.hasOwnProperty.call(query, "showNetwork")) {
+    state.mapDisplayType = "network";
+  }
   if (query.p && state.canTogglePanelLayout && (query.p === "full" || query.p === "grid")) {
     state["panelLayout"] = query.p;
   }
@@ -446,6 +449,9 @@ const checkAndCorrectErrorsInState = (state, metadata, query, tree, viewingNarra
 
   /* geoResolutions */
   if (metadata.geoResolutions) {
+    if (isColorByGenotype(state.colorBy)) { // already error corrected above
+      metadata.geoResolutions.push({key: state.colorBy, title: state.colorBy, isGenotype: true});
+    }
     const availableGeoResultions = metadata.geoResolutions.map((i) => i.key);
     if (availableGeoResultions.indexOf(state["geoResolution"]) === -1) {
       /* fallbacks: JSON defined default, then hardocded default, then any available */
@@ -459,6 +465,18 @@ const checkAndCorrectErrorsInState = (state, metadata, query, tree, viewingNarra
       console.error("Error detected. Setting geoResolution to ", state.geoResolution);
       delete query.r; // no-op if query.r doesn't exist
     }
+
+    /* only once the geo-res has been set can we decide on the mapDisplayType and mapDisplayTypesAvailable */
+    const { mapDisplayType, mapDisplayTypesAvailable } = getMapTypesAvailable({
+      currentMapDisplayType: state.mapDisplayType,
+      currentMapDisplayTypesAvailable: state.mapDisplayTypesAvailable,
+      newGeoResolution: state.geoResolution,
+      geoResolutions: metadata.geoResolutions
+    });
+    state.mapDisplayType = mapDisplayType;
+    state.mapDisplayTypesAvailable = mapDisplayTypesAvailable;
+    if (state.mapDisplayTypesAvailable.length === 1 || state.mapDisplayType === "geo") delete query.showNetwork;
+
   } else {
     console.warn("JSONs did not include `geoResolutions`");
   }
diff --git a/src/actions/types.js b/src/actions/types.js
index f33109774..f3d87cf61 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -15,6 +15,7 @@ export const CHANGE_DATES_VISIBILITY_THICKNESS = "CHANGE_DATES_VISIBILITY_THICKN
 export const CHANGE_ABSOLUTE_DATE_MIN = "CHANGE_ABSOLUTE_DATE_MIN";
 export const CHANGE_ABSOLUTE_DATE_MAX = "CHANGE_ABSOLUTE_DATE_MAX";
 export const CHANGE_GEO_RESOLUTION = "CHANGE_GEO_RESOLUTION";
+export const CHANGE_MAP_DISPLAY_TYPE = "CHANGE_MAP_DISPLAY_TYPE";
 export const CHANGE_LANGUAGE = "CHANGE_LANGUAGE";
 export const CLEAN_START = "CLEAN_START";
 export const APPLY_FILTER = "APPLY_FILTER";
diff --git a/src/components/controls/controls.js b/src/components/controls/controls.js
index 79a43e662..447d34bc6 100644
--- a/src/components/controls/controls.js
+++ b/src/components/controls/controls.js
@@ -16,6 +16,7 @@ import MapAnimationControls from "./map-animation";
 import PanelToggles from "./panel-toggles";
 import SearchStrains from "./search";
 import ToggleTangle from "./toggle-tangle";
+import ToggleMapDisplayType from "./map-display-type-toggle";
 import Language from "./language";
 import { SidebarHeader, ControlsContainer } from "./styles";
 
@@ -45,6 +46,7 @@ function Controls({mapOn, frequenciesOn}) {
         <span style={{ marginTop: "15px" }}>
           <SidebarHeader>{t("sidebar:Map Options")}</SidebarHeader>
           <GeoResolution />
+          <ToggleMapDisplayType />
           <TransmissionLines />
           <MapAnimationControls />
         </span>
diff --git a/src/components/controls/geo-resolution.js b/src/components/controls/geo-resolution.js
index dbe6fb855..911750817 100644
--- a/src/components/controls/geo-resolution.js
+++ b/src/components/controls/geo-resolution.js
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import Select from "react-select/lib/Select";
 import { withTranslation } from "react-i18next";
-
+import { getMapTypesAvailable } from "../../util/spatialResolutionHelpers";
 import { controlsWidth } from "../../util/globals";
 import { CHANGE_GEO_RESOLUTION } from "../../actions/types";
 import { analyticsControlsEvent } from "../../util/googleAnalytics";
@@ -11,7 +11,9 @@ import { SidebarSubtitle } from "./styles";
 @connect((state) => {
   return {
     metadata: state.metadata,
-    geoResolution: state.controls.geoResolution
+    geoResolution: state.controls.geoResolution,
+    mapDisplayType: state.controls.mapDisplayType,
+    mapDisplayTypesAvailable: state.controls.mapDisplayTypesAvailable
   };
 })
 class GeoResolution extends React.Component {
@@ -21,9 +23,18 @@ class GeoResolution extends React.Component {
       [];
   }
 
-  changeGeoResolution(resolution) {
+  changeGeoResolution(geoResolution) {
     analyticsControlsEvent("change-geo-resolution");
-    this.props.dispatch({ type: CHANGE_GEO_RESOLUTION, data: resolution });
+    this.props.dispatch({
+      type: CHANGE_GEO_RESOLUTION,
+      geoResolution,
+      ...getMapTypesAvailable({
+        currentMapDisplayType: this.props.mapDisplayType,
+        currentMapDisplayTypesAvailable: this.props.mapDisplayTypesAvailable,
+        newGeoResolution: geoResolution,
+        geoResolutions: this.props.metadata.geoResolutions
+      })
+    });
   }
 
   render() {
@@ -32,7 +43,7 @@ class GeoResolution extends React.Component {
     return (
       <>
         <SidebarSubtitle spaceAbove>
-          {t("sidebar:Geographic resolution")}
+          {t("sidebar:Spatial resolution")}
         </SidebarSubtitle>
         <div style={{marginBottom: 10, width: controlsWidth, fontSize: 14}}>
           <Select
diff --git a/src/components/controls/map-display-type-toggle.js b/src/components/controls/map-display-type-toggle.js
new file mode 100644
index 000000000..bd3e836e1
--- /dev/null
+++ b/src/components/controls/map-display-type-toggle.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withTranslation } from "react-i18next";
+
+import Toggle from "./toggle";
+import { controlsWidth } from "../../util/globals";
+import { CHANGE_MAP_DISPLAY_TYPE } from "../../actions/types";
+
+@connect((state) => {
+  return {
+    mapDisplayType: state.controls.mapDisplayType,
+    mapDisplayTypesAvailable: state.controls.mapDisplayTypesAvailable
+  };
+})
+class ToggleMapDisplayType extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    if (this.props.mapDisplayTypesAvailable.length !== 2) return null;
+    return (
+      <div style={{marginBottom: 10, width: controlsWidth, fontSize: 14}}>
+        <Toggle
+          display
+          on={this.props.mapDisplayType === "network"}
+          callback={() => {
+            this.props.dispatch({
+              type: CHANGE_MAP_DISPLAY_TYPE,
+              mapDisplayTypesAvailable: this.props.mapDisplayTypesAvailable,
+              mapDisplayType: this.props.mapDisplayType === "geo" ? "network" : "geo"
+            });
+          }}
+          label={t("sidebar:Show network layout view")}
+        />
+      </div>
+    );
+  }
+}
+
+export default withTranslation()(ToggleMapDisplayType);
diff --git a/src/components/main/index.js b/src/components/main/index.js
index 8aa27ff41..714c1ca8a 100644
--- a/src/components/main/index.js
+++ b/src/components/main/index.js
@@ -6,6 +6,7 @@ import SidebarToggle from "../framework/sidebar-toggle";
 import Info from "../info/info";
 import Tree from "../tree";
 import Map from "../map/map";
+import States from "../network/network";
 import { controlsHiddenWidth } from "../../util/globals";
 import Footer from "../framework/footer";
 import DownloadModal from "../download/downloadModal";
@@ -38,7 +39,8 @@ const Frequencies = lazy(() => import("../frequencies"));
   metadataLoaded: state.metadata.loaded,
   treeLoaded: state.tree.loaded,
   sidebarOpen: state.controls.sidebarOpen,
-  showOnlyPanels: state.controls.showOnlyPanels
+  showOnlyPanels: state.controls.showOnlyPanels,
+  mapDisplayType: state.controls.mapDisplayType
 }))
 class Main extends React.Component {
   constructor(props) {
@@ -141,7 +143,16 @@ class Main extends React.Component {
           }
           {this.props.displayNarrative || this.props.showOnlyPanels ? null : <Info width={calcUsableWidth(availableWidth, 1)} />}
           {this.props.panelsToDisplay.includes("tree") ? <Tree width={big.width} height={big.height} /> : null}
-          {this.props.panelsToDisplay.includes("map") ? <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} legend={this.shouldShowMapLegend()} /> : null}
+          {this.props.panelsToDisplay.includes("map") ?
+            <ErrorBoundary showNothing>
+              {
+                this.props.mapDisplayType === "geo" ?
+                  <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} legend={this.shouldShowMapLegend()} /> :
+                  <States legend={this.shouldShowMapLegend()} width={big.width} height={big.height} />
+              }
+            </ErrorBoundary>
+            : null
+          }
           {this.props.panelsToDisplay.includes("entropy") ?
             (<Suspense fallback={null}>
               <Entropy width={chart.width} height={chart.height} />
diff --git a/src/components/map/map.js b/src/components/map/map.js
index 3ec2b2c5b..4df299317 100644
--- a/src/components/map/map.js
+++ b/src/components/map/map.js
@@ -365,6 +365,7 @@ class Map extends React.Component {
    */
   maybeUpdateDemesAndTransmissions(nextProps) {
     if (!this.state.map || !this.props.treeLoaded || !this.state.d3elems) { return; }
+
     const visibilityChange = nextProps.visibilityVersion !== this.props.visibilityVersion;
     const haveData = nextProps.nodes && nextProps.visibility && nextProps.geoResolution && nextProps.nodeColors;
 
diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js
index 15a46f2ea..308804b03 100644
--- a/src/components/map/mapHelpers.js
+++ b/src/components/map/mapHelpers.js
@@ -13,7 +13,7 @@ export const pathStringGenerator = line()
   .y((d) => { return d.y; })
   .curve(curveBasis);
 
-const extractLineSegmentForAnimationEffect = (
+export const extractLineSegmentForAnimationEffect = (
   numDateMin,
   numDateMax,
   originCoords,
@@ -117,7 +117,7 @@ const extractLineSegmentForAnimationEffect = (
   return curve;
 };
 
-const createArcsFromDemes = (demeData) => {
+export const createArcsFromDemes = (demeData) => {
   const individualArcs = [];
   demeData.forEach((demeInfo) => {
     demeInfo.arcs.forEach((slice) => {
diff --git a/src/components/map/mapHelpersLatLong.js b/src/components/map/mapHelpersLatLong.js
index 8a213e18b..dc8818a0a 100644
--- a/src/components/map/mapHelpersLatLong.js
+++ b/src/components/map/mapHelpersLatLong.js
@@ -49,11 +49,12 @@ const maybeGetTransmissionPair = (latOrig, longOrig, latDest, longDest, map) =>
  * Traverses the tips of the tree to create a dict of
  * location(deme) -> list of visible tips at that location
  */
-const getVisibleNodesPerLocation = (nodes, visibility, geoResolution) => {
+export const getVisibleNodesPerLocation = (nodes, visibility, geoResolution) => {
   const locationToVisibleNodes = {};
+  const genotype = isColorByGenotype(geoResolution);
   nodes.forEach((n, i) => {
     if (n.children) return; /* only consider terminal nodes */
-    const location = getTraitFromNode(n, geoResolution);
+    const location = getTraitFromNode(n, geoResolution, {genotype});
     if (!location) return; /* ignore undefined locations */
     if (!locationToVisibleNodes[location]) locationToVisibleNodes[location]=[];
     if (visibility[i] !== NODE_NOT_VISIBLE) {
@@ -73,7 +74,7 @@ const getVisibleNodesPerLocation = (nodes, visibility, geoResolution) => {
  * @param {array} currentArcs only used if updating. Array of current arcs.
  * @returns {array} arcs for display
  */
-const createOrUpdateArcs = (visibleNodes, legendValues, colorBy, nodeColors, currentArcs=undefined) => {
+export const createOrUpdateArcs = (visibleNodes, legendValues, colorBy, nodeColors, currentArcs=undefined) => {
   const colorByIsGenotype = isColorByGenotype(colorBy);
   const legendValueToArcIdx = {};
   const undefinedArcIdx = legendValues.length; /* the arc which is grey to represent undefined values on tips */
diff --git a/src/components/network/network.js b/src/components/network/network.js
new file mode 100644
index 000000000..42539307a
--- /dev/null
+++ b/src/components/network/network.js
@@ -0,0 +1,606 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withTranslation } from "react-i18next";
+import _max from "lodash/max";
+import { select, event as d3event } from "d3-selection";
+import { interpolateNumber } from "d3-interpolate";
+import { forceSimulation, forceManyBody, forceCenter, forceLink, forceCollide, forceRadial } from "d3-force"; // eslint-disable-line
+import { drag as d3drag } from "d3-drag";
+import { arc } from "d3-shape";
+import ErrorBoundary from "../../util/errorBoundry";
+import Legend from "../tree/legend/legend";
+import Card from "../framework/card";
+import { createOrUpdateArcs } from "../map/mapHelpersLatLong";
+import { pathStringGenerator, extractLineSegmentForAnimationEffect } from "../map/mapHelpers";
+import { bezier } from "../map/transmissionBezier";
+import { getAverageColorFromNodes } from "../../util/colorHelpers";
+import { getTraitFromNode } from "../../util/treeMiscHelpers";
+import { NODE_NOT_VISIBLE, demeCountMultiplier, demeCountMinimum } from "../../util/globals";
+import { updateTipRadii } from "../../actions/tree"; // eslint-disable-line
+import { isColorByGenotype } from "../../util/getGenotype";
+
+/**  TODO LIST (before release)
+ * test json with geo-res none of which have lat-longs, as well as jsons without any geo-res.
+ * handle browser resizing
+ * performance when there are large numbers of transitions is unacceptable
+ */
+
+/** TODO LIST (potentially post release)
+ * - better setting of deme sizes (applies to the map as well)
+ * - decide on JSON format (do we rename geo resolutions to spatial resolutions?)
+ * - make line width (and "extend") a function of line count
+ * - reinstate onhover behavior to highlight nodes in tree (this is a big performance slow-down)
+ */
+
+@connect((state) => {
+  return {
+    nodes: state.tree.nodes,
+    nodeColors: state.tree.nodeColors,
+    visibility: state.tree.visibility,
+    geoResolution: state.controls.geoResolution,
+    dateMinNumeric: state.controls.dateMinNumeric,
+    dateMaxNumeric: state.controls.dateMaxNumeric,
+    colorBy: state.controls.colorScale.colorBy,
+    continuousColorScale: state.controls.colorScale.continuous,
+    legendValues: state.controls.colorScale.legendValues,
+    showTransmissionLines: state.controls.showTransmissionLines
+  };
+})
+class States extends React.Component {
+  constructor(props) {
+    super(props);
+    // we store data as properties of the object ("class") rather than in `this.state` because
+    // we don't want react's lifecycle's to run when it's updated as we manage this ourselves
+    this.svgDomRef = null;
+    this.data = {};
+    this.groups = {};
+    this.selections = {};
+    this.simulation = forceSimulation().stop();
+    this.drag = setUpDragFunctions(this.simulation);
+  }
+  recomputeData(props, recompute={everything: true}) {
+    /* We only want to recompute data as needed (it's expensive!) */
+    this.data.demeMultiplier = computeDemeMultiplier(props.nodes);
+
+    if (recompute.everything) {
+      this.data.demes = computeDemeData(props, {demeMultiplier: this.data.demeMultiplier});
+    } else if (recompute.colors) {
+      this.data.demes = computeDemeData(props, {
+        demeMultiplier: this.data.demeMultiplier,
+        existingCoords: this.data.demes.map((d) => ({x: d.x, y: d.y}))
+      });
+    } else if (recompute.visibility) {
+      updateArcData(this.data.demes, props, {demeMultiplier: this.data.demeMultiplier});
+    }
+
+    /* performance improvements are possible here (e.g. colors doesn't need to recreate the beziers!) */
+    if (recompute.everything || recompute.colors || recompute.transmissionToggle) {
+      this.data.transmissions = computeTransmissions(props, this.data);
+    }
+
+    this.simulation.nodes(this.data.demes);
+
+  }
+  renderData(props, recompute={everything: true}) {
+    /* Labels only render when we update everything. Possible improvement: when demes are not visible
+    (i.e. due to visibility) we may want to remove the label and perhaps update the coordinates.
+    Note that we also re-render when we recompute the color as the data bind needs updating */
+    if (recompute.everything || recompute.colors) {
+      this.selections.labels = renderLabels({g: this.groups.labels, demes: this.data.demes, width: this.props.width});
+    }
+    /* We remove & rerender demes on ∆colorBy & ∆geoRes, otherwise we update their attrs */
+    if (recompute.everything || recompute.colors) {
+      this.selections.demes = renderDemes({g: this.groups.demes, demes: this.data.demes, geoResolution: props.geoResolution, dispatch: props.dispatch, demeMultiplier: this.demeMultiplier, drag: this.drag});
+    } else if (recompute.visibility) {
+      this.selections.demes = renderUpdatesToExistingDemes({selection: this.selections.demes});
+    }
+    /* we handle transmissions differently -- the visibility is computed here, not in the data construction.
+    Note that it would be more performant to update existing DOM elements rather than destroying & recreating */
+    if (recompute.everything || recompute.colors || recompute.visibility || recompute.transmissionToggle) {
+      this.selections.transmissions = renderTransmissions({g: this.groups.transmissions, transmissions: this.data.transmissions, visibility: props.visibility, dateMinNumeric: props.dateMinNumeric, dateMaxNumeric: props.dateMaxNumeric});
+    }
+  }
+  componentDidMount() {
+    this.groups = setUpSvg(this.svgDomRef);
+    this.recomputeData(this.props);
+    this.renderData(this.props);
+    this.setUpAndRunSimulation(); // must run after data is bound
+  }
+  componentWillReceiveProps(nextProps) {
+    const recompute = compareProps(this.props, nextProps);
+    this.recomputeData(nextProps, recompute);
+    this.renderData(nextProps, recompute);
+    if (recompute.everything) this.setUpAndRunSimulation();
+  }
+  setUpAndRunSimulation() {
+    // Ideally we want to recompute forces whenever viz changes (as links will have changed). Due to potentical cost,
+    // we currently only recompute & restart when the geo res changes
+    // TODO: handle window size changes
+
+    this.simulation
+      .force("distribute", // distribute points over the SVG & don't let them live outside it.
+        forceDistribute(this.props.width, this.props.height)
+        .strength(0.2)
+      )
+      .force("collision", // don't let demes overlap
+        forceCollide()
+          .radius((n) => n.arcs.length ? n.arcs[0].outerRadius+this.props.width/50 : 0)
+          .strength(0.2)
+      )
+      .force("center",
+        forceCenter(this.props.width / 2, this.props.height / 2) // mean of all nodes is in center of SVG
+      );
+    if (this.data.transmissions && this.data.transmissions.length) {
+      this.simulation.force("link",
+        forceLink(this.data.transmissions)
+          .id((d) => d.name)
+          .strength(this.data.transmissions.length > 500 ? 0.005 : 0.1)
+      );
+    }
+    this.simulation.alpha(1) // reheat if necessary
+      .alphaDecay(0.05)
+      .on("tick", this.onTick)
+      .tick(100) // don't need to animate the burn in
+      .restart();
+  }
+  onTick = () => {
+    this.selections.demes
+      .attr("transform", (d) => "translate(" + d.parent.x + "," + d.parent.y + ")");
+    this.selections.labels
+      .call((sel) => setLabelPosition(sel, this.props.width));
+    updateTransmissionCoordinates(this.data.transmissions);
+    this.selections.transmissions
+      .attr("d", (d) => renderBezier(d, this.props.visibility, this.props.dateMinNumeric, this.props.dateMaxNumeric));
+  }
+  render() {
+    const { t } = this.props;
+    return (
+      <Card center title={t("Node States")}>
+        {this.props.legend && (
+          <ErrorBoundary>
+            <Legend right width={this.props.width} />
+          </ErrorBoundary>
+        )}
+        <svg
+          id="NodeStatesGraph"
+          style={{pointerEvents: "auto", cursor: "default", userSelect: "none"}}
+          width={this.props.width}
+          height={this.props.height}
+          ref={(c) => {this.svgDomRef = c;}}
+        />
+      </Card>
+    );
+  }
+
+  componentWillUnmount() {
+    this.simulation.stop();
+    const svg = select(this.svgDomRef);
+    svg.selectAll("*").remove();
+  }
+}
+
+function computeDemeMultiplier(nodes) {
+  const visibleTips = nodes[0].tipCount;
+  const demeMultiplier =
+    demeCountMultiplier /
+    Math.sqrt(_max([Math.sqrt(visibleTips * nodes.length), demeCountMinimum]));
+  return demeMultiplier;
+}
+
+/**
+ * Compute demes, including co-ordinates, for _all_ demes regardless of their visibility
+ */
+function computeDemeData(props, {demeMultiplier, existingCoords}) {
+  const {locationToAllNodes, locationToVisibleNodes} = getNodesPerLocation(props.nodes, props.visibility, props.geoResolution);
+  const nDemes = Object.keys(locationToAllNodes).length;
+  const demes = new Array(nDemes); // similar to `demeData` in the <Map> component
+  /* coordinates defined per-deme (i.e. per geo-resolution value) */
+  let coords;
+  if (existingCoords) {
+    if (existingCoords.length !== nDemes) {
+      console.warn("WARNING: provided coords length mismatch");
+      coords = undefined;
+    } else {
+      coords = existingCoords;
+    }
+  }
+  if (!coords) {
+    coords = computeCoordinates(props.width, props.height, nDemes);
+  }
+  /* create data structure for each deme, each containing an array of arcs */
+  Object.entries(locationToAllNodes).forEach(([location, visibleNodes], index) => {
+    const deme = {
+      name: location,
+      count: locationToVisibleNodes[location].length,
+      ...coords[index] // sets `x` & `y`
+    };
+    if (props.geoResolution===props.colorBy || props.continuousColorScale) {
+      deme.arcs = [{innerRadius: 0, startAngle: 0, endAngle: 2*Math.PI, color: getAverageColorFromNodes(visibleNodes, props.nodeColors)}];
+    } else {
+      deme.arcs = createOrUpdateArcs(visibleNodes, props.legendValues, props.colorBy, props.nodeColors);
+    }
+    deme.arcs.forEach((a) => {
+      a.outerRadius = Math.sqrt(deme.count)*demeMultiplier;
+      a.parent = deme;
+    });
+    demes[index]=deme;
+  });
+  return demes;
+}
+
+/**
+ * Given an array of demes ("node states"), update the constituent arcs. This is used when the
+ * visibility of nodes on the tree has changed etc.
+ * Side effect: Updates the `demes` data structure in place.
+ */
+function updateArcData(demes, props, {demeMultiplier}) {
+  const {locationToAllNodes, locationToVisibleNodes} = getNodesPerLocation(props.nodes, props.visibility, props.geoResolution);
+  const nDemes = Object.keys(locationToAllNodes).length;
+  if (nDemes !== demes.length) {
+    console.warn("Can't update arcs if length differs");
+    return;
+  }
+  demes.forEach((deme) => {
+    const visibleNodes = locationToVisibleNodes[deme.name];
+    deme.count = visibleNodes.length;
+    if (props.geoResolution===props.colorBy) {
+      deme.arcs[0].color = visibleNodes.length ? props.nodeColors[visibleNodes[0].arrayIdx] : "";
+    } else if (props.continuousColorScale) {
+      deme.arcs[0].color = getAverageColorFromNodes(visibleNodes, props.nodeColors);
+    } else {
+      deme.arcs = createOrUpdateArcs(visibleNodes, props.legendValues, props.colorBy, props.nodeColors, deme.arcs);
+    }
+    deme.arcs.forEach((a) => {
+      a.outerRadius = Math.sqrt(deme.count)*demeMultiplier;
+      a.parent = deme;
+    });
+  });
+}
+
+/**
+ * Traverses the tips of the tree to create a dict of
+ * location (aka deme) -> list of tips at that location
+ * This is similar to the `getVisibleNodesPerLocation` function used by the <Map>
+ */
+function getNodesPerLocation(nodes, visibility, geoResolution) {
+  const locationToAllNodes = {};
+  const locationToVisibleNodes = {};
+  const genotype = isColorByGenotype(geoResolution);
+  nodes.forEach((n, i) => {
+    if (n.children) return; /* only consider terminal nodes */
+    const location = getTraitFromNode(n, geoResolution, {genotype});
+    if (!location) return; /* ignore undefined locations */
+    if (!locationToAllNodes[location]) locationToAllNodes[location]=[];
+    locationToAllNodes[location].push(n);
+    if (!locationToVisibleNodes[location]) locationToVisibleNodes[location]=[];
+    if (visibility[i] !== NODE_NOT_VISIBLE) {
+      locationToVisibleNodes[location].push(n);
+    }
+  });
+  return {locationToAllNodes, locationToVisibleNodes};
+}
+
+/**
+ * Compute `n` coordinates where demes will be located.
+ * Each coordinate is an object with `x` and `y` properties.
+ */
+function computeCoordinates(width, height, n) {
+  const x0 = width/2;
+  const y0 = height/2;
+  const t = 2*Math.PI/(n+1);
+  const r = Math.min(width, height) * 0.4;
+  return Array.from(Array(n).keys())
+    .map((index) => ({
+      x: x0 + r*Math.cos(t*index),
+      y: y0 + r*Math.sin(t*index)
+    }));
+}
+
+/**
+ * Compute an array of transmissions (the data underlying the bezier curves)
+ * Note: approach is similar to the <Map>'s `setupTransmissionData` &
+ * `maybeConstructTransmissionEvent` functions.
+ * Note that this computes all transmissions regardless of visibility. The rendering
+ * code will handle the visibility.
+ */
+function computeTransmissions(props, data) {
+  const transmissionData = [];
+  const demeToDemeCounts = {}; /* Used to compute the "extend" so that curves don't sit on top of each other */
+  const {showTransmissionLines, nodes, geoResolution, nodeColors} = props;
+  if (!showTransmissionLines) return transmissionData;
+  const genotype = isColorByGenotype(geoResolution);
+
+  /* construct a (temporary) mapping of deme (state) name -> data structure */
+  const getDemeFromName = {};
+  data.demes.forEach((d) => {getDemeFromName[d.name] = d;});
+
+  /* loop through (phylogeny) nodes and compare each with its own children to get A->B transmissions */
+  nodes.forEach((n) => {
+    const parentDemeValue = getTraitFromNode(n, geoResolution, {genotype});
+    if (n.children) {
+      n.children.forEach((child) => {
+        const childDemeValue = getTraitFromNode(child, geoResolution, {genotype});
+        if (parentDemeValue && childDemeValue && parentDemeValue !== childDemeValue) {
+
+          // Keep track of how many we've seen from A->B in order to get a curve's "extend"
+          if ([parentDemeValue, childDemeValue] in demeToDemeCounts) {
+            demeToDemeCounts[[parentDemeValue, childDemeValue]] += 2;
+          } else {
+            demeToDemeCounts[[parentDemeValue, childDemeValue]] = 1;
+          }
+          const extend = demeToDemeCounts[[parentDemeValue, childDemeValue]];
+
+          const parentDeme = getDemeFromName[parentDemeValue];
+          const childDeme = getDemeFromName[childDemeValue];
+
+          // compute a bezier curve
+          const nodeCoords = {x: parentDeme.x, y: parentDeme.y};
+          const childCoords = {x: childDeme.x, y: childDeme.y};
+          const bezierCurve = bezier(nodeCoords, childCoords, extend);
+          /* set up interpolator with origin and destination numdates */
+          const nodeDate = getTraitFromNode(n, "num_date");
+          const childDate = getTraitFromNode(child, "num_date");
+          const interpolator = interpolateNumber(nodeDate, childDate);
+          /* make a bezierDates array as long as bezierCurve */
+          const bezierDates = bezierCurve.map((d, i) => {
+            return interpolator(i / (bezierCurve.length - 1));
+          });
+
+          const transmission = {
+            // originNode: n,
+            destinationNode: child,
+            bezierCurve,
+            bezierDates,
+            originDeme: parentDeme,
+            destinationDeme: childDeme,
+            originName: parentDemeValue,
+            destinationName: childDemeValue,
+            originNumDate: nodeDate,
+            destinationNumDate: childDate,
+            color: nodeColors[n.arrayIdx], // colour given by *origin* node
+            extend: extend,
+            source: parentDemeValue,
+            target: childDemeValue
+          };
+          transmissionData.push(transmission);
+        }
+      });
+    }
+  });
+  return transmissionData;
+}
+
+/**
+ * update `transmissions` (array) in-place to reflext changes in corresponding deme coords
+ */
+function updateTransmissionCoordinates(transmissions) {
+  transmissions.forEach((transmission) => {
+    // recomputing the entire curve isn't the smartest way to do it, but it is the simplest
+    transmission.bezierCurve = bezier(
+      {x: transmission.originDeme.x, y: transmission.originDeme.y},
+      {x: transmission.destinationDeme.x, y: transmission.destinationDeme.y},
+      transmission.extend
+    );
+  });
+}
+
+/**
+ * Create d3 selections representing groups in the SVG to hold demes, transmissions etc.
+ * @param {} svgDomRef React reference to DOM.
+ */
+function setUpSvg(svgDomRef) {
+  const svg = select(svgDomRef);
+  return {
+    svg,
+    transmissions: svg.append("g").attr("class", "transmissions"),
+    demes: svg.append("g").attr("class", "nodes"),
+    labels: svg.append("g").attr("class", "labels")
+  };
+}
+
+/**
+ * Given a SVG group selection (`g`), render the demes (the "circles"). Each deme is always
+ * made up of arcs (i.e. a deme is always a pie chart) to simplify the code.
+ */
+function renderDemes({g, demes, geoResolution, dispatch, drag}) { // eslint-disable-line
+  g.selectAll("*").remove();
+  const generateArc = arc();
+  return g.selectAll("circle")
+    .data(demes)
+    .enter()
+      .append("g")
+      .attr("class", "pie")
+      .selectAll("arc")
+      .data((deme) => deme.arcs)
+      .enter()
+        .append("path")
+        .attr("d", generateArc)
+        .style("stroke", "none")
+        .style("fill-opacity", 0.65)
+        .style("fill", (d) => d.color)
+        .style("pointer-events", "all")
+        .attr("transform", (d) => `translate(${d.parent.x},${d.parent.y})`)
+        // .on("mouseover", (d) => { dispatch(updateTipRadii({geoFilter: [geoResolution, d.parent.name]})); })
+        // .on("mouseout", () => { dispatch(updateTipRadii()); })
+        .call(d3drag()
+          .on("start", drag.dragstarted)
+          .on("drag", drag.dragged)
+          .on("end", drag.dragended)
+        );
+}
+
+/**
+ * Given an existing d3 selection, whose bound data has been updated in-place,
+ * update all of the attrs which may have changed. See `updateArcData`
+ * for the properties of arcs which may have changed.
+ */
+function renderUpdatesToExistingDemes({selection}) {
+  const generateArc = arc();
+  return selection
+    .attr("d", generateArc)
+    .style("fill", (d) => d.color);
+}
+
+/**
+ * Given a SVG group selection (`g`), render labels corresponding
+ * to the `demes`. You could imagine a force to find the best
+ * positioning taking into account surrounding demes & lines, but
+ * for now it's overkill.
+ */
+function renderLabels({g, demes, width}) {
+  g.selectAll("*").remove();
+  return g.selectAll("text")
+    .data(demes)
+    .enter()
+      .append("text")
+      .call((sel) => setLabelPosition(sel, width))
+      .style("pointer-events", "none")
+      .text((d) => d.name)
+      .attr("class", "tipLabel")
+      .style("font-size", "12px");
+}
+
+/**
+ * label positioning fn intended to be called by d3's `call` method
+ */
+function setLabelPosition(selection, svgWidth) {
+  selection
+    .attr("x", (d) => d.x*2<svgWidth ? d.x+10 : d.x-10)
+    .attr("y", (d) => d.y)
+    .attr("text-anchor", (d) => d.x*2<svgWidth ? "start" : "end");
+}
+
+/**
+ * Given a SVG group selection (`g`), render the transmissions ("curved lines").
+ * Note that it is during rendering that we decide if a line is visible, or what segements of
+ * the line are visibility according to the current temporal slice.
+ */
+function renderTransmissions({g, transmissions, visibility, dateMinNumeric, dateMaxNumeric}) {
+  g.selectAll("*").remove();
+  return g.selectAll("transmissions")
+    .data(transmissions)
+    .enter()
+      .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */
+        .attr("d", (d) => renderBezier(d, visibility, dateMinNumeric, dateMaxNumeric))
+        .attr("fill", "none")
+        .attr("stroke-opacity", 0.6)
+        .attr("stroke-linecap", "round")
+        .attr("stroke", (d) => d.color)
+        .attr("stroke-width", 2);
+}
+
+function setUpDragFunctions(simulation) {
+  return {
+    dragstarted: (d) => {
+      if (!d3event.active) {
+        simulation.alphaTarget(0.3).restart();
+      }
+      d.parent.fx = d.parent.x;
+      d.parent.fy = d.parent.y;
+    },
+    dragged: (d) => {
+      d.parent.fx = d3event.x;
+      d.parent.fy = d3event.y;
+    },
+    dragended: (d) => {
+      if (!d3event.active) {
+        simulation.alphaTarget(0);
+      }
+      d.parent.fx = null;
+      d.parent.fy = null;
+    }
+  };
+}
+
+/**
+ * Produce a SVG path ("d" attr) from a datum given temporal & visibility constraints
+ */
+function renderBezier(d, visibility, numDateMin, numDateMax) {
+  return pathStringGenerator(
+    extractLineSegmentForAnimationEffect(
+      numDateMin,
+      numDateMax,
+      {x: d.originDeme.x, y: d.originDeme.y},
+      {x: d.destinationDeme.x, y: d.destinationDeme.y},
+      d.originNumDate,
+      d.destinationNumDate,
+      visibility[d.destinationNode.arrayIdx] !== NODE_NOT_VISIBLE ? "visible" : "hidden",
+      d.bezierCurve,
+      d.bezierDates
+    )
+  );
+}
+
+/**
+ * When props change, the data structures behind the data visualisation, and the d3-rendered
+ * visualisation itself, must change. For performance and usability reasons, we don't want
+ * to recompute & rerender everything on every prop change. This function identifies how we
+ * should update the data structures & viz.
+ */
+function compareProps(oldProps, newProps) {
+  const recompute = {
+    everything: false,
+    colors: false,
+    visibility: false
+  };
+  if (oldProps.geoResolution !== newProps.geoResolution) {
+    recompute.everything = true;
+  } else if (oldProps.colorBy !== newProps.colorBy) {
+    recompute.colors = true;
+  } else {
+    recompute.visibility = true;
+  }
+  recompute.transmissionToggle = oldProps.showTransmissionLines !== newProps.showTransmissionLines;
+  return recompute;
+}
+
+/**
+ * a d3-force to
+ * (1) prevent demes from being positioned outside the SVG bounds (takes into account deme radius)
+ * (2) scale demes to span `fracSvgToUse` of the horizontal & vertical space
+ */
+function forceDistribute(svgWidth, svgHeight, fracSvgToUse=0.95) {
+  let nodes;
+  let strength = 0.1;
+  const availableWidth = fracSvgToUse*svgWidth;
+  const availableHeight = fracSvgToUse*svgHeight;
+  const padFrac = (1-fracSvgToUse)/2; // padding desired at each edge
+
+  function force(alpha) {
+    /* ensure not out-of-bounds (should also do this on mouse event btw) */
+    let minX=svgWidth, maxX=0, minY=svgHeight, maxY=0;
+    nodes.forEach((n) => {
+      const r = n.arcs.length ? n.arcs[0].outerRadius + 10 : 10;
+      n.x = Math.max(r, Math.min(svgWidth - r, n.x));
+      n.y = Math.max(r, Math.min(svgHeight - r, n.y));
+      if (n.x<minX) minX=n.x;
+      if (n.x>maxX) maxX=n.x;
+      if (n.y<minY) minY=n.y;
+      if (n.y>maxY) maxY=n.y;
+    });
+    /* push them to be better distributed */
+    const scaleX = availableWidth/(maxX-minX);
+    const scaleY = availableHeight/(maxY-minY);
+    const offsetX = padFrac*svgWidth - minX; // -ve values indicate a leftward shift is desired
+    const offsetY = padFrac*svgHeight - minY;
+    nodes.forEach((n) => {
+      n.vx -= (n.x - (n.x+offsetX)*scaleX) * strength * alpha;
+      n.vy -= (n.y - (n.y+offsetY)*scaleY) * strength * alpha;
+    });
+  }
+
+  force.initialize = function _initialize(_) {
+    nodes = _;
+  };
+
+  force.strength = function _strength(_) {
+    strength = _;
+    return force;
+  };
+
+  return force;
+}
+
+
+const WithTranslation = withTranslation()(States);
+export default WithTranslation;
diff --git a/src/components/tree/infoPanels/hover.js b/src/components/tree/infoPanels/hover.js
index 5dbd61c47..4b299a71a 100644
--- a/src/components/tree/infoPanels/hover.js
+++ b/src/components/tree/infoPanels/hover.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { infoPanelStyles } from "../../../globalStyles";
 import { numericToCalendar } from "../../../util/dateHelpers";
-import { getTipColorAttribute } from "../../../util/colorHelpers";
 import { isColorByGenotype, decodeColorByGenotype } from "../../../util/getGenotype";
 import { getTraitFromNode, getDivFromNode, getVaccineFromNode, getFullAuthorInfoFromNode } from "../../../util/treeMiscHelpers";
 import { isValueValid } from "../../../util/globals";
@@ -87,7 +86,7 @@ const ColorBy = ({node, colorBy, colorByConfidence, colorScale, colorings}) => {
     const name = genotype.aa ?
       `Amino Acid at ${genotype.gene} site ${genotype.positions.join(", ")}:` :
       `Nucleotide at pos ${genotype.positions.join(", ")}:`;
-    return <InfoLine name={name} value={getTipColorAttribute(node, colorScale)}/>;
+    return <InfoLine name={name} value={getTraitFromNode(node, colorScale.colorBy, {genotype: true})}/>;
   }
   /* handle author as a special case */
   if (colorBy === "author") {
diff --git a/src/middleware/changeURL.js b/src/middleware/changeURL.js
index d697be20a..97a7515b3 100644
--- a/src/middleware/changeURL.js
+++ b/src/middleware/changeURL.js
@@ -72,7 +72,15 @@ export const changeURLMiddleware = (store) => (next) => (action) => {
       break;
     }
     case types.CHANGE_GEO_RESOLUTION: {
-      query.r = action.data === state.controls.defaults.geoResolution ? undefined : action.data;
+      query.r = action.geoResolution === state.controls.defaults.geoResolution ? undefined : action.geoResolution;
+    }
+    // fall through -- we also want to manipulate the `showNetwork` query when we change resolutions
+    case types.CHANGE_MAP_DISPLAY_TYPE: {
+      if (action.mapDisplayTypesAvailable.length !== 1 && action.mapDisplayType === "network") {
+        query.showNetwork = null; // `null` places it in the URL query without a value
+      } else {
+        query.showNetwork = undefined;
+      }
       break;
     }
     case types.TOGGLE_TRANSMISSION_LINES: {
diff --git a/src/reducers/controls.js b/src/reducers/controls.js
index 9b1cbb9be..7cdf9d6b6 100644
--- a/src/reducers/controls.js
+++ b/src/reducers/controls.js
@@ -10,6 +10,7 @@ import { defaultGeoResolution,
 import * as types from "../actions/types";
 import { calcBrowserDimensionsInitialState } from "./browserDimensions";
 import { doesColorByHaveConfidence } from "../actions/recomputeReduxState";
+import { isColorByGenotype } from "../util/getGenotype";
 
 /* defaultState is a fn so that we can re-create it
 at any time, e.g. if we want to revert things (e.g. on dataset change)
@@ -66,6 +67,8 @@ export const getDefaultControlsState = () => {
     filters: {},
     showDownload: false,
     quickdraw: false, // if true, components may skip expensive computes.
+    mapDisplayType: "geo",
+    mapDisplayTypesAvailable: [],
     mapAnimationDurationInMilliseconds: 30000, // in milliseconds
     mapAnimationStartDate: null, // Null so it can pull the absoluteDateMin as the default
     mapAnimationCumulative: false,
@@ -205,17 +208,27 @@ const Controls = (state = getDefaultControlsState(), action) => {
           action.panelsToDisplay.indexOf("map") !== -1
       });
     case types.NEW_COLORS: {
-      const newState = Object.assign({}, state, {
+      const updatedState = {
         colorBy: action.colorBy,
         colorScale: action.colorScale,
         colorByConfidence: doesColorByHaveConfidence(state, action.colorBy)
-      });
-      return newState;
+      };
+      /* genotype resolutions have to be modified on colorBy change */
+      if (isColorByGenotype(state.geoResolution)) {
+        updatedState.geoResolution = isColorByGenotype(action.colorBy) ?
+          action.colorBy :
+          state.defaults.geoResolution;
+      }
+      return Object.assign({}, state, updatedState);
     }
     case types.CHANGE_GEO_RESOLUTION:
       return Object.assign({}, state, {
-        geoResolution: action.data
+        geoResolution: action.geoResolution,
+        mapDisplayType: action.mapDisplayType,
+        mapDisplayTypesAvailable: action.mapDisplayTypesAvailable
       });
+    case types.CHANGE_MAP_DISPLAY_TYPE:
+      return {...state, mapDisplayType: action.mapDisplayType};
     case types.APPLY_FILTER: {
       // values arrive as array
       const filters = Object.assign({}, state.filters, {});
diff --git a/src/reducers/metadata.js b/src/reducers/metadata.js
index e283116cf..c4c1562b4 100644
--- a/src/reducers/metadata.js
+++ b/src/reducers/metadata.js
@@ -1,5 +1,6 @@
 import { colorOptions } from "../util/globals";
 import * as types from "../actions/types";
+import { isColorByGenotype } from "../util/getGenotype";
 
 /* The metdata reducer holds data that is
  * (a) mostly derived from the dataset JSON
@@ -30,6 +31,13 @@ const Metadata = (state = {
         return Object.assign({}, state, {buildUrl});
       }
       return state;
+    case types.NEW_COLORS: {
+      const geoResolutions = state.geoResolutions.filter((r) => !r.isGenotype);
+      if (isColorByGenotype(action.colorBy)) {
+        geoResolutions.push({key: action.colorBy, title: action.colorBy, isGenotype: true});
+      }
+      return {...state, geoResolutions};
+    }
     default:
       return state;
   }
diff --git a/src/util/colorHelpers.js b/src/util/colorHelpers.js
index e59520ff1..bd4f83461 100644
--- a/src/util/colorHelpers.js
+++ b/src/util/colorHelpers.js
@@ -51,22 +51,12 @@ export const getExtraVals = (nodes, nodesToo, colorBy, providedVals) => {
   return valsInTree.filter((x) => providedVals.indexOf(x) === -1);
 };
 
-
-/* a getter for the value of the colour attribute of the node provided for the currently set colour
-note this is not the colour HEX */
-export const getTipColorAttribute = (node, colorScale) => {
-  if (isColorByGenotype(colorScale.colorBy) && colorScale.genotype) {
-    return node.currentGt;
-  }
-  return getTraitFromNode(node, colorScale.colorBy);
-};
-
 /* generates and returns an array of colours (HEXs) for the nodes under the given colorScale */
 /* takes around 2ms on a 2000 tip tree */
 export const calcNodeColor = (tree, colorScale) => {
   if (tree && tree.nodes && colorScale && colorScale.colorBy) {
-    const nodeColorAttr = tree.nodes.map((n) => getTipColorAttribute(n, colorScale));
-    // console.log(nodeColorAttr.map((n) => colorScale.scale(n)))
+    const genotype = isColorByGenotype(colorScale.colorBy);
+    const nodeColorAttr = tree.nodes.map((n) => getTraitFromNode(n, colorScale.colorBy, {genotype}));
     return nodeColorAttr.map((n) => colorScale.scale(n));
   }
   return null;
diff --git a/src/util/spatialResolutionHelpers.js b/src/util/spatialResolutionHelpers.js
new file mode 100644
index 000000000..1ec6d5e3b
--- /dev/null
+++ b/src/util/spatialResolutionHelpers.js
@@ -0,0 +1,16 @@
+
+
+export const getMapTypesAvailable = ({currentMapDisplayType, currentMapDisplayTypesAvailable, newGeoResolution, geoResolutions}) => {
+  const geoResJsonData = geoResolutions.filter((x) => x.key === newGeoResolution)[0];
+  const geoAvailable = !!geoResJsonData.demes; // the presense of demes (i.e. lat/long mappings defined)
+  const mapDisplayTypesAvailable = ["network"]; // can always display netowrk statemap, even if lat-longs present
+  if (geoAvailable) mapDisplayTypesAvailable.push("geo");
+  /* If we're going from a resolution with only states to one with geo as well, we switch to geo representation
+     If we're going from a resolution with both to another resolution with both, we keep the old selection */
+  const mapDisplayType = mapDisplayTypesAvailable.length === 1
+    ? mapDisplayTypesAvailable[0]
+    : currentMapDisplayTypesAvailable.length === 1 // note: length can be zero (e.g. on load)
+      ? "geo"
+      : currentMapDisplayType;
+  return { mapDisplayType, mapDisplayTypesAvailable };
+};
diff --git a/src/util/tipRadiusHelpers.js b/src/util/tipRadiusHelpers.js
index db1033b89..e4fe7160e 100644
--- a/src/util/tipRadiusHelpers.js
+++ b/src/util/tipRadiusHelpers.js
@@ -1,6 +1,6 @@
 import { tipRadius, tipRadiusOnLegendMatch } from "./globals";
-import { getTipColorAttribute } from "./colorHelpers";
 import { getTraitFromNode } from "../util/treeMiscHelpers";
+import { isColorByGenotype } from "../util/getGenotype";
 
 /**
 * equates a single tip and a legend element
@@ -13,7 +13,7 @@ import { getTraitFromNode } from "../util/treeMiscHelpers";
 * @returns bool
 */
 const determineLegendMatch = (selectedLegendItem, node, colorScale) => {
-  const nodeAttr = getTipColorAttribute(node, colorScale);
+  const nodeAttr = getTraitFromNode(node, colorScale.colorBy, {genotype: isColorByGenotype(colorScale.colorBy)});
   if (colorScale.continuous) {
     return (nodeAttr <= colorScale.legendBounds[selectedLegendItem][1]) &&
            (nodeAttr >= colorScale.legendBounds[selectedLegendItem][0]);
diff --git a/src/util/treeMiscHelpers.js b/src/util/treeMiscHelpers.js
index bb6a21219..8c82b81ff 100644
--- a/src/util/treeMiscHelpers.js
+++ b/src/util/treeMiscHelpers.js
@@ -25,10 +25,10 @@ james hadfield, nov 2019.
  * NOTE: do not use this for "div", "vaccine" or other traits set on `node_attrs`
  * which don't share the same structure as traits. See the JSON spec for more details.
  */
-export const getTraitFromNode = (node, trait, {entropy=false, confidence=false}={}) => {
+export const getTraitFromNode = (node, trait, {entropy=false, confidence=false, genotype=false}={}) => {
   if (!node.node_attrs) return undefined;
 
-  if (!entropy && !confidence) {
+  if (!entropy && !confidence && !genotype) {
     if (!node.node_attrs[trait]) return undefined;
     const value = node.node_attrs[trait].value;
     if (!isValueValid(value)) return undefined;
@@ -39,6 +39,8 @@ export const getTraitFromNode = (node, trait, {entropy=false, confidence=false}=
   } else if (confidence) {
     if (node.node_attrs[trait]) return node.node_attrs[trait].confidence;
     return undefined;
+  } else if (genotype) {
+    return node.currentGt;
   }
   return undefined;
 };