diff --git a/css/80_app.css b/css/80_app.css
index 0f51f871b..8fb0f17b0 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1,6 +1,5 @@
 /* Basics
 ------------------------------------------------------- */
-
 /*
   Opera misbehaves when the window is resized vertically unless 100% width + height are
   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
@@ -202,7 +201,6 @@ a:hover {
 
 /* Forms
 ------------------------------------------------------- */
-
 textarea  {
     resize: vertical;
     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
@@ -288,7 +286,6 @@ table.tags, table.tags td, table.tags th {
 
 /* Grid
 ------------------------------------------------------- */
-
 .col0    { float: left; width: 04.1666%; }
 .col1    { float: left; width: 08.3333%; }
 .col2    { float: left; width: 16.6666%; }
@@ -305,7 +302,6 @@ table.tags, table.tags td, table.tags th {
 
 /* UI Lists
 ------------------------------------------------------- */
-
 ul li { list-style: none;}
 
 .toggle-list > label {
@@ -348,22 +344,18 @@ ul li { list-style: none;}
     background: #fff;
     color: #333;
 }
-
 .fillL2 {
     background: #f6f6f6;
     color: #333;
 }
-
 .fillL3 {
     background: #ececec;
     color: #333;
 }
-
 .fillD {
     background: rgba(0,0,0,.5);
     color: #fff;
 }
-
 .fillD2 {
     background: rgba(0,0,0,.75);
     color: #fff;
@@ -396,31 +388,9 @@ li.hide {
     background-size: 5px 5px;
 }
 
-.panewrap {
-    position: absolute;
-    width: 200%;
-    height: 100%;
-    right: -100%;
-}
-
-
-.pane {
-    position: absolute;
-    width: 50%;
-    top: 0;
-    bottom: 30px;
-}
-
-.pane:first-child {
-    left: 0;
-}
-
-.pane:last-child {
-    right: 0;
-}
-
-/* Buttons */
 
+/* Buttons
+------------------------------------------------------- */
 button {
     text-align: center;
     line-height: 20px;
@@ -611,8 +581,8 @@ button.add-note svg.icon {
 }
 
 
-/* Icons */
-
+/* Icons
+------------------------------------------------------- */
 .icon {
     vertical-align: top;
     width: 20px;
@@ -664,9 +634,8 @@ button.add-note svg.icon {
 }
 
 
-/* ToolBar / Persistent UI Elements
+/* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
-
 #bar {
     position: fixed;
     padding: 10px 0;
@@ -687,7 +656,6 @@ button.add-note svg.icon {
 
 /* Header for modals / panes
 ------------------------------------------------------- */
-
 .header {
     border-bottom: 1px solid #ccc;
     height: 60px;
@@ -775,7 +743,6 @@ button.add-note svg.icon {
     justify-content: space-between;
     list-style: none;
     display: flex;
-
 }
 
 .footer > a {
@@ -791,9 +758,8 @@ button.add-note svg.icon {
 }
 
 
-/* Hide-Toggle
+/* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */
-
 .hide-toggle .icon.pre-text {
     vertical-align: text-top;
     width: 16px;
@@ -814,9 +780,8 @@ a.hide-toggle {
 }
 
 
-/* Inspector
+/* Sidebar / Inspector
 ------------------------------------------------------- */
-
 #sidebar {
     position: relative;
     float: left;
@@ -838,6 +803,28 @@ a.hide-toggle {
     right: 0;
 }
 
+.panewrap {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    right: -100%;
+}
+
+.pane {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    bottom: 30px;
+}
+
+.pane:first-child {
+    left: 0;
+}
+
+.pane:last-child {
+    right: 0;
+}
+
 .inspector-wrap {
     width: 100%;
     height: 100%;
@@ -859,15 +846,12 @@ a.hide-toggle {
 .feature-list-pane .inspector-body {
     top: 120px;
 }
-
 .preset-list-pane .inspector-body {
     top: 120px;
 }
-
 .entity-editor-pane .inspector-body {
     top: 60px;
 }
-
 .selection-list-pane .inspector-body {
     top: 60px;
 }
@@ -903,12 +887,12 @@ a.hide-toggle {
     font-weight: bold;
 }
 
-/* Feature list */
 
+/* Feature List / Search Results
+------------------------------------------------------- */
 .feature-list  {
     width: 100%;
 }
-
 .no-results-item,
 .geocode-item,
 .feature-list-item {
@@ -977,11 +961,8 @@ a.hide-toggle {
 }
 
 
-/* Presets
+/* Preset List and Icons
 ------------------------------------------------------- */
-
-/* Preset grid  */
-
 .preset-list  {
     width: 100%;
     padding: 20px 20px 10px 20px;
@@ -1159,7 +1140,6 @@ a.hide-toggle {
 .preset-list-item button.tag-reference-button:hover {
     background: #f1f1f1;
 }
-
 .preset-list-item button.tag-reference-button .icon {
     opacity: .5;
 }
@@ -1206,27 +1186,23 @@ a.hide-toggle {
 }
 
 
-/* Preset Editor */
-
+/* Entity/Preset Editor
+------------------------------------------------------- */
 .preset-editor {
     overflow: hidden;
     padding-bottom: 10px;
 }
-
 .preset-editor a.hide-toggle {
     margin: 0 20px 5px 20px;
 }
-
 .preset-editor .form-fields-container {
     padding: 10px;
     margin: 0 10px 10px 10px;
     border-radius: 8px;
 }
-
 .preset-editor .form-fields-container:empty {
     display: none;
 }
-
 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
     margin-bottom: 0;
 }
@@ -1326,8 +1302,8 @@ a.hide-toggle {
     border-bottom: 1px solid #ccc
 }
 
-/* Preset form (hover mode) */
-
+/* Inspector (hover styles)
+------------------------------------------------------- */
 .inspector-hover .checkselect label:last-of-type,
 .inspector-hover .preset-input-wrap .label,
 .inspector-hover .form-field-multicombo,
@@ -1462,8 +1438,8 @@ a.hide-toggle {
     overflow: hidden;
 }
 
-/* adding additional preset fields */
-
+/* More Fields dropdown
+------------------------------------------------------- */
 .more-fields {
     padding: 0 20px 20px 20px;
     font-weight: bold;
@@ -1499,10 +1475,8 @@ a.hide-toggle {
 }
 
 
-/* preset form access */
-/* preset form cycleway */
-/* preset form structure extras */
-
+/* Field - Access, Cycleway, Structure
+------------------------------------------------------- */
 .structure-extras-wrap li,
 .form-field-cycleway .preset-input-wrap li,
 .form-field-access .preset-input-wrap li {
@@ -1571,8 +1545,8 @@ a.hide-toggle {
 }
 
 
-/* preset form multicombo */
-
+/* Field - Multicombo
+------------------------------------------------------- */
 .form-field-multicombo {
     border: 1px solid #cfcfcf;
     border-top: 0px;
@@ -1582,11 +1556,9 @@ a.hide-toggle {
     border-radius: 0 0 4px 4px;
     overflow: hidden;
 }
-
 .form-field-multicombo:focus {
     border-bottom: 0px;
 }
-
 .form-field-multicombo.active {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1631,8 +1603,8 @@ a.hide-toggle {
 }
 
 
-/* preset form numbers */
-
+/* Field - Numeric
+------------------------------------------------------- */
 input[type=number] {
     position: relative;
     padding-right: 20%;
@@ -1685,13 +1657,11 @@ input[type=number] {
     left: 0; right: 0; bottom: 0; top: 0;
     margin: auto;
 }
-
 .spin-control button.decrement::after {
     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
 }
-
 .spin-control button.increment::after {
     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
@@ -1699,27 +1669,23 @@ input[type=number] {
 }
 
 
-/* preset form checkbox */
-
+/* Field - Checkbox
+------------------------------------------------------- */
 .checkselect label:last-of-type {
     display: block;
     background: #fff;
     padding: 5px 10px;
     color: #7092ff;
 }
-
 .checkselect label:hover {
     background: #f1f1f1;
 }
-
 .checkselect .set {
     color: inherit;
 }
-
 .checkselect label:not(.set) input[type="checkbox"] {
     opacity: .5;
 }
-
 .checkselect .reverser.button {
     display: block;
     float: right;
@@ -1735,21 +1701,23 @@ input[type=number] {
     display: none;
 }
 
-/* Preset form radio button */
 
+/* Field - Radio button
+------------------------------------------------------- */
 .toggle-list button.remove {
     border-radius: 0 0 3px 3px;
 }
-
 .toggle-list button.remove .icon {
     position: absolute;
     left: 5px;
 }
-
 .toggle-list button.remove::before {
     content: none;
 }
 
+
+/* Field - Maxspeed
+------------------------------------------------------- */
 #preset-input-maxspeed_advisory,
 #preset-input-maxspeed {
     border-right: none;
@@ -1771,7 +1739,9 @@ input[type=number] {
     border-radius: 0 0 0 4px;
 }
 
-/* Wikipedia field */
+
+/* Field - Wikipedia
+------------------------------------------------------- */
 .form-field .wiki-lang {
     border-radius: 0;
 }
@@ -1791,7 +1761,9 @@ input[type=number] {
     left: 32px;
 }
 
-/* Localized field */
+
+/* Field - Localized Name
+------------------------------------------------------- */
 .form-field .localized-main {
     padding-right: 12%;
 }
@@ -1822,7 +1794,6 @@ input[type=number] {
 .form-field .localized-wrap {
     padding: 0 10px;
 }
-
 .form-field .localized-wrap .entry {
     position: relative;
     overflow: hidden;
@@ -1845,18 +1816,17 @@ input[type=number] {
     border-radius: 0;
     border-top-width: 0;
 }
-
 .form-field .localized-wrap .entry .localized-value {
     border-top-width: 0;
     border-radius: 0 0 4px 4px;
 }
-
 .form-field .localized-wrap .form-label button {
     border-top-right-radius: 3px;
 }
 
-/* Preset form address */
 
+/* Field - Address
+------------------------------------------------------- */
 .addr-row input {
     border-right: 0;
     border-bottom: 0;
@@ -1895,8 +1865,9 @@ input[type=number] {
     border-radius: 0 0 0 4px;
 }
 
-/* Restrictions editor */
 
+/* Field - Restriction Editor
+------------------------------------------------------- */
 .form-field-restrictions .restriction-controls-container {
     background-color: #fff;
     border-top: 1px solid #ccc;
@@ -1986,8 +1957,9 @@ input[type=number] {
     color: #78f;
 }
 
-/* Changeset editor while comment text is empty */
 
+/* Field - Changeset Comment
+------------------------------------------------------- */
 .form-field-comment:not(.present) #preset-input-comment {
     border-color: rgb(230, 100, 100);
 }
@@ -2008,8 +1980,9 @@ input[type=number] {
     border-color: rgb(230, 100, 100);
 }
 
-/* combobox dropdown */
 
+/* Field - Combobox
+------------------------------------------------------- */
 div.combobox {
     z-index: 9999;
     display: none;
@@ -2066,8 +2039,9 @@ div.combobox {
     border-right: 5px solid transparent;
 }
 
-/* Field Help */
 
+/* Field Help
+------------------------------------------------------- */
 .field-help-body {
     display: block;
     position: absolute;
@@ -2167,8 +2141,8 @@ div.combobox {
 }
 
 
-/* Raw Tag Editor */
-
+/* Raw Tag Editor
+------------------------------------------------------- */
 .tag-list {
     padding-top: 10px;
 }
@@ -2294,7 +2268,6 @@ div.combobox {
 }
 
 /* Adding form fields to tag editor */
-
 .raw-tag-editor .add-tag {
     width: 40%;
     height: 30px;
@@ -2312,7 +2285,6 @@ div.combobox {
 }
 
 /* Tag reference */
-
 button.minor.tag-reference-loading {
     background-color: #f5f5f5;
 }
@@ -2374,8 +2346,8 @@ img.tag-reference-wiki-image {
 }
 
 
-/* Raw relation membership editor */
-
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
 .raw-member-editor .member-list li:first-child,
 .raw-membership-editor .member-list li:first-child {
     padding-top: 10px;
@@ -2422,7 +2394,8 @@ input.key-trap {
 }
 
 
-/* OSM Note UI */
+/* OSM Note Editor
+------------------------------------------------------- */
 .note-header {
     background-color: #f6f6f6;
     border-radius: 5px;
@@ -2547,7 +2520,8 @@ input.key-trap {
 }
 
 
-/* Map Data Inspector */
+/* Custom Data Editor
+------------------------------------------------------- */
 .data-header {
     background-color: #f6f6f6;
     border-radius: 5px;
@@ -2600,29 +2574,8 @@ input.key-trap {
 }
 
 
-/* Fullscreen button */
-div.full-screen {
-    float: right;
-    width: 40px;
-    margin-right: 10px;
-}
-
-div.full-screen .tooltip {
-    min-width: 160px;
-}
-
-div.full-screen > button, div.full-screen > button.active {
-    width: 40px;
-    height: 40px;
-    background: transparent;
-}
-
-div.full-screen > button:hover {
-    background-color: rgba(0, 0, 0, .8);
-}
-
-/* Map Controls */
-
+/* Map Controls
+------------------------------------------------------- */
 .map-controls {
     right: 0;
     top: 132px;
@@ -2650,7 +2603,32 @@ div.full-screen > button:hover {
     background: #7092ff;
 }
 
-/* Zoomer */
+
+/* Fullscreen Button (disabled)
+------------------------------------------------------- */
+div.full-screen {
+    float: right;
+    width: 40px;
+    margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+    min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+}
+
+div.full-screen > button:hover {
+    background-color: rgba(0, 0, 0, .8);
+}
+
+
+/* Zoom Buttons
+------------------------------------------------------- */
 .zoombuttons > button.zoom-in {
     border-radius: 4px 0 0 0;
 }
@@ -2658,7 +2636,9 @@ div.full-screen > button:hover {
     border-radius: 0 4px 0 0;
 }
 
-/* Geolocator */
+
+/* Geolocate Button
+------------------------------------------------------- */
 .geolocate-control {
     margin-bottom: 10px;
 }
@@ -2669,7 +2649,9 @@ div.full-screen > button:hover {
     border-radius: 0 0 4px 0;
 }
 
-/* Pane Buttons */
+
+/* Background / Map Data / Help Pane buttons
+------------------------------------------------------- */
 .help-control > button {
     border-radius: 0 0 0 4px;
 }
@@ -2689,8 +2671,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Background / Map Data Settings */
-
+/* Background / Map Data Settings
+------------------------------------------------------- */
 .map-data-control,
 .background-control {
     position: relative;
@@ -2721,19 +2703,15 @@ div.full-screen > button:hover {
 .layer-list > li:first-child {
     border-radius: 3px 3px 0 0;
 }
-
 .layer-list > li:last-child {
     border-radius: 0 0 3px 3px;
 }
-
 .layer-list > li:only-child {
     border-radius: 3px;
 }
-
 .layer-list li:not(:last-child) {
     border-bottom: 1px solid #ccc;
 }
-
 .layer-list li:hover {
     background-color: #ececec;
 }
@@ -2774,9 +2752,45 @@ div.full-screen > button:hover {
     text-overflow: ellipsis;
 }
 
+.map-data-control .layer-list button,
+.background-control .layer-list button {
+    float: right;
+    height: 100%;
+    width: 10%;
+    border-left: 1px solid #ccc;
+    border-radius: 0;
+}
+[dir='rtl'] .map-data-control .layer-list button,
+[dir='rtl'] .background-control .layer-list button {
+    float: left;
+    border-left: none;
+    border-right: 1px solid #ccc;
+}
 
-/* Background Display Options */
+.map-data-control .layer-list button .icon,
+.background-control .layer-list button .icon {
+    opacity: 0.5;
+}
 
+.map-data-control .layer-list button:first-of-type,
+.background-control .layer-list button:first-of-type {
+    border-radius: 0 3px 3px 0;
+}
+[dir='rtl'] .map-data-control .layer-list button:first-of-type,
+[dir='rtl'] .background-control .layer-list button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.map-data-control .vectortile-container .vectortile-header {
+    padding-bottom: 5px;
+}
+.map-data-control .vectortile-container .vectortile-footer {
+    padding-bottom: 10px;
+}
+
+
+/* Background - Display Options Sliders
+------------------------------------------------------- */
 .display-options-container {
     padding: 10px;
 }
@@ -2809,8 +2823,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Adjust Alignment controls */
-
+/* Background - Adjust Alignment
+------------------------------------------------------- */
 .background-control .nudge-container {
     border: 1px solid #ccc;
     border-radius: 4px;
@@ -2937,36 +2951,8 @@ div.full-screen > button:hover {
 }
 
 
-.map-data-control .layer-list button,
-.background-control .layer-list button {
-    float: right;
-    height: 100%;
-    width: 10%;
-    border-left: 1px solid #ccc;
-    border-radius: 0;
-}
-[dir='rtl'] .map-data-control .layer-list button,
-[dir='rtl'] .background-control .layer-list button {
-    float: left;
-    border-left: none;
-    border-right: 1px solid #ccc;
-}
-
-.map-data-control .layer-list button .icon,
-.background-control .layer-list button .icon {
-    opacity: 0.5;
-}
-
-.map-data-control .layer-list button:first-of-type,
-.background-control .layer-list button:first-of-type {
-    border-radius: 0 3px 3px 0;
-}
-[dir='rtl'] .map-data-control .layer-list button:first-of-type,
-[dir='rtl'] .background-control .layer-list button:first-of-type {
-    border-radius: 3px 0 0 3px;
-}
-
-/* Side panes */
+/* Side Panes - Background / Map Data / Help
+------------------------------------------------------- */
 .map-pane {
     position: fixed;
     top: 60px;
@@ -3012,9 +2998,9 @@ div.full-screen > button:hover {
     padding-bottom: 15px;
 }
 
-/* Help */
-
 
+/* Help
+------------------------------------------------------- */
 .help-wrap p {
     font-size: 15px;
     margin-bottom: 20px;
@@ -3115,9 +3101,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Tiles
+/* Raster Background Tiles
 ------------------------------------------------------- */
-
 img.tile {
     position: absolute;
     transform-origin: 0 0;
@@ -3177,7 +3162,6 @@ img.tile-debug {
 
 /* Map
 ------------------------------------------------------- */
-
 #map {
     position: relative;
     overflow: hidden;
@@ -3205,6 +3189,7 @@ img.tile-debug {
     bottom: 0;
 }
 
+
 /* Map-In-Map
 ------------------------------------------------------- */
 .map-in-map {
@@ -3262,7 +3247,7 @@ img.tile-debug {
 }
 
 
-/* Debug
+/* Debug Data
 ------------------------------------------------------- */
 .debug {
     stroke: currentColor;
@@ -3301,7 +3286,8 @@ img.tile-debug {
     padding: 0 5px;
 }
 
-/* Info Box
+
+/* Information Panels
 ------------------------------------------------------- */
 .info-panels {
     display: flex;
@@ -3358,7 +3344,6 @@ img.tile-debug {
 .panel-title button.close:hover {
     color: #fff;
 }
-
 .panel-title button.close .icon {
     height: 20px;
     width: 16px;
@@ -3407,9 +3392,8 @@ img.tile-debug {
 }
 
 
-/* About Section
+/* About Section, Attribution, Footer
 ------------------------------------------------------- */
-
 #about {
     width: 100%;
     position: absolute;
@@ -3474,8 +3458,9 @@ img.tile-debug {
     height: 30px;
 }
 
-/* footer flash message */
 
+/* Footer - Flash messages
+------------------------------------------------------- */
 #flash-wrap {
     display: flex;
     flex: 0 0 100%;
@@ -3557,8 +3542,8 @@ img.tile-debug {
 }
 
 
-/* footer scale */
-
+/* Footer - Scale bar, About, Source Switcher
+------------------------------------------------------- */
 #scale-block {
     vertical-align: bottom;
     width: 250px;
@@ -3604,7 +3589,6 @@ img.tile-debug {
     shape-rendering: crispEdges;
 }
 
-
 #about-list {
     text-align: right;
     margin-right: 10px;
@@ -3633,7 +3617,6 @@ img.tile-debug {
     padding: 5px 5px 5px 0;
 }
 
-
 #about-list li:last-child {
     border-left: 0;
     margin-left: 0;
@@ -3686,8 +3669,8 @@ img.tile-debug {
     color: #ccf;
 }
 
-/* Notification Badges */
-
+/* Notification Badges
+------------------------------------------------------- */
 /* For an icon (e.g. new version) */
 .badge {
     display: inline-block;
@@ -3734,9 +3717,8 @@ img.tile-debug {
 }
 
 
-/* Modals
+/* Modals / Prompts
 ------------------------------------------------------- */
-
 .modal {
     top: 40px;
     display: inline-block;
@@ -3752,7 +3734,6 @@ img.tile-debug {
 .modal .loader {
     margin-bottom: 10px;
 }
-
 .modal .description {
     text-align: center;
 }
@@ -3766,7 +3747,6 @@ img.tile-debug {
     right: 0;
     overflow: auto;
 }
-
 .shaded:before {
     content:'';
     background: rgba(0,0,0,0.5);
@@ -3778,11 +3758,9 @@ img.tile-debug {
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }
-
 .modal-section.header h3 {
     padding: 0;
 }
-
 .modal-section.buttons {
     text-align: center;
 }
@@ -3856,7 +3834,7 @@ img.tile-debug {
     color: #e06c5e;
 }
 
-/* Success Modal
+/* Success Screen / Community Index
 ------------------------------------------------------- */
 .save-success.body {
     overflow-y: scroll;
@@ -4071,7 +4049,6 @@ svg.mouseclick use.right {
     margin-bottom: 20px;
 }
 
-
 .settings-custom-data .instructions-url {
     margin-bottom: 10px;
 }
@@ -4178,9 +4155,9 @@ svg.mouseclick use.right {
 
 .changeset-list li:first-child { border-top: 0;}
 
+
 /* Conflict resolution
 ------------------------------------------------------- */
-
 .conflicts-help {
     padding: 20px;
     background-color: #ffffbb;
@@ -4228,9 +4205,9 @@ svg.mouseclick use.right {
     height: 30px;
 }
 
-/* Notices
-------------------------------------------------------- */
 
+/* Notices (Zoom in to Edit)
+------------------------------------------------------- */
 .notice {
     position: absolute;
     top: 45px;
@@ -4262,9 +4239,9 @@ svg.mouseclick use.right {
     margin-right: 0;
 }
 
+
 /* Tooltips
 ------------------------------------------------------- */
-
 .tooltip {
     position: absolute;
     display: none;
@@ -4505,8 +4482,8 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 }
 
 
-/* radial menu (deprecated) */
-
+/* Contextual Radial Menu (deprecated)
+------------------------------------------------------- */
 .radial-menu-tooltip {
     opacity: 0.8;
     display: none;
@@ -4544,8 +4521,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     color: rgba(40,40,40,.5);
 }
 
-/* edit menu */
 
+/* Contextual Edit Menu
+------------------------------------------------------- */
 .edit-menu-tooltip {
     display: none;
     position: absolute;
@@ -4579,13 +4557,14 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     color: #79f;
     pointer-events: none;
 }
-
 .edit-menu-item.disabled use {
     fill: rgba(32,32,32,.2);
     color: rgba(40,40,40,.2);
 }
 
 
+/* Lasso
+------------------------------------------------------- */
 .lasso-path {
     fill-opacity: 0.3;
     stroke: #fff;
@@ -4594,22 +4573,19 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     stroke-dasharray: 5, 5;
 }
 
+
 /* Media Queries
 ------------------------------------------------------- */
-
 @media only screen and (max-width: 840px) {
     /* override hide for save button */
     #bar .save .label { display: block;}
 }
-
 @media screen and (max-width: 1200px) {
     .user-list { display: none !important; }
 }
-
 @media screen and (max-width: 1000px) {
     #userLink { display: none !important; }
 }
-
 @media screen and (max-width: 900px) {
     #scale-block { display: none !important; }
 }
@@ -4617,7 +4593,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 
 /* Scrollbars
  ----------------------------------------------------- */
-
 ::-webkit-scrollbar {
     height: 20px;
     overflow: visible;
@@ -4644,9 +4619,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     background-color: rgba(0,0,0,.05);
 }
 
+
 /* Intro walkthrough
  ----------------------------------------------------- */
-
 .curtain-darkness {
     pointer-events: all;
     fill-opacity: 0.7;
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index e886bf231..d69e04c76 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -8,6 +8,7 @@ import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
 import { svgIcon } from '../svg';
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
+import { geoExtent } from '../geo';
 import { modeBrowse } from '../modes';
 import { uiBackground } from './background';
 import { uiDisclosure } from './disclosure';
@@ -210,6 +211,7 @@ export function uiMapData(context) {
     // Beta feature - sample vector layers to support Detroit Mapping Challenge
     // https://github.com/osmus/detroit-mapping-challenge
     function drawVectorItems(selection) {
+        var dataLayer = layers.layer('data');
         var vtData = [
             {
                 name: 'Detroit Neighborhoods/Parks',
@@ -229,24 +231,45 @@ export function uiMapData(context) {
             }
         ];
 
-        var dataLayer = layers.layer('data');
+        // Only show this if the map is around Detroit..
+        var detroit = geoExtent([-83.5, 42.1], [-82.8, 42.5]);
+        var showVectorItems = (context.map().zoom() > 9 && detroit.contains(context.map().center()));
 
-        var header = selection.selectAll('.layer-list-vectortile-header')
-            .data([0]);
+        var container = selection.selectAll('.vectortile-container')
+            .data(showVectorItems ? [0] : []);
 
-        header.enter()
+        container.exit()
+            .remove();
+
+        var containerEnter = container.enter()
+            .append('div')
+            .attr('class', 'vectortile-container');
+
+        containerEnter
             .append('h4')
-            .attr('class', 'layer-list-vectortile-header')
-            .text('Vector Tiles (beta)');
+            .attr('class', 'vectortile-header')
+            .text('Detroit Vector Tiles (Beta)');
 
-        var ul = selection
-            .selectAll('.layer-list-vectortile')
-            .data([0]);
-
-        ul = ul.enter()
+        containerEnter
             .append('ul')
             .attr('class', 'layer-list layer-list-vectortile')
-            .merge(ul);
+
+        containerEnter
+            .append('div')
+            .attr('class', 'vectortile-footer')
+            .append('a')
+            .attr('target', '_blank')
+            .attr('tabindex', -1)
+            .call(svgIcon('#iD-icon-out-link', 'inline'))
+            .attr('href', 'https://github.com/osmus/detroit-mapping-challenge')
+            .append('span')
+            .text('About these layers');
+
+        container = container
+            .merge(containerEnter);
+
+
+        var ul = container.selectAll('.layer-list-vectortile');
 
         var li = ul.selectAll('.list-item')
             .data(vtData);
@@ -481,8 +504,8 @@ export function uiMapData(context) {
         _dataLayerContainer
             .call(drawOsmItems)
             .call(drawPhotoItems)
-            .call(drawVectorItems)       // beta - detroit mapping challenge
-            .call(drawCustomDataItems);
+            .call(drawCustomDataItems)
+            .call(drawVectorItems);      // Beta - Detroit mapping challenge
 
         _fillList
             .call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);