diff --git a/src/hooks/use-isochrones.js b/src/hooks/use-isochrones.js
index 22e8e0f..76d0857 100644
--- a/src/hooks/use-isochrones.js
+++ b/src/hooks/use-isochrones.js
@@ -1,14 +1,11 @@
-import reverse from 'lodash/reverse'
 import React from 'react'
 
 import useOnLoad from './use-on-load'
 
 const EmptyCollection = {type: 'FeatureCollection', features: []}
-const getId = i => `isochrone-${i}`
 
 /**
- * Reverse to add the top layer first so that we can insert subsequent
- * layers beneath. Use consistently for ID purposes.
+ * Isochrones are in reverse order of the networks.
  */
 export default function useIsochrones (map, isochrones) {
   useOnLoad(initializeIsochrones, map, [isochrones])
@@ -16,23 +13,21 @@ export default function useIsochrones (map, isochrones) {
   React.useEffect(() => {
     if (!map) return
 
-    reverse(isochrones).forEach((isochrone, i) => {
-      const source = map.getSource(getId(i))
-      if (source) source.setData(isochrone || EmptyCollection)
+    isochrones.forEach((isochrone, i) => {
+      const source = map.getSource(isochrone.properties.id)
+      if (source) source.setData(isochrone)
     })
   }, [map, isochrones])
 }
 
 function initializeIsochrones (map, isochrones) {
-  reverse(isochrones).forEach((isochrone, i) => {
-    const id = `isochrone-${i}`
-    const data = isochrone || EmptyCollection
-
-    map.addSource(id, {type: 'geojson', data})
+  isochrones.forEach((isochrone, i) => {
+    const id = isochrone.properties.id
+    map.addSource(id, {type: 'geojson', data: isochrone})
 
     const beforeLayer = i === 0
       ? 'waterway'
-      : `isochrone-${i - 1}`
+      : isochrones[i - 1].properties.id
 
     // Fill the base layer
     map.addLayer({
diff --git a/src/selectors/isochrones.js b/src/selectors/isochrones.js
index a5202af..74b288c 100644
--- a/src/selectors/isochrones.js
+++ b/src/selectors/isochrones.js
@@ -1,4 +1,5 @@
 import get from 'lodash/get'
+import reduceRight from 'lodash/reduceRight'
 import {createSelector} from 'reselect'
 
 import {colors, cutoffs, opacities} from '../constants'
@@ -9,24 +10,29 @@ export default createSelector(
   state => state.networks,
   state => state.timeCutoff,
   (start, networks = [], timeCutoff) =>
-    networks.map((n, i) => {
+    reduceRight(networks, (isochrones, n, i) => {
       const data = get(n, 'travelTimeSurface.data')
-      if (start && data) {
-        return {
-          type: 'FeatureCollection',
+      const features = start && data
+        ? getIsochroneForNetwork(n, start, timeCutoff)
+        : {}
+
+      const isochrone = {
+        type: 'FeatureCollection',
+        properties: {
+          name: n.name,
+          id: `isochrone-${i}`
+        },
+        features: [{
+          ...features,
           properties: {
-            name: n.name
-          },
-          features: [{
-            ...getIsochroneForNetwork(n, start, timeCutoff),
-            properties: {
-              color: n.hexColor || colors[i].hex,
-              opacity: 1,
-              timeCutoff: timeCutoff,
-              width: 1
-            }
-          }]
-        }
+            color: n.hexColor || colors[i].hex,
+            opacity: 1,
+            timeCutoff: timeCutoff,
+            width: 1
+          }
+        }]
       }
-    })
+
+      return [...isochrones, isochrone]
+    }, [])
 )