diff --git a/css/20_map.css b/css/20_map.css
index 79c127555..13c72a12b 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -306,33 +306,3 @@ g.turn circle {
     stroke: #68f;
 }
 
-
-/* Other Data (gpx, kml, geojson, mvt, pbf) */
-
-.layer-mapdata {
-    pointer-events: none;
-}
-
-.layer-mapdata path {
-    stroke: #ff26d4;
-    stroke-width: 2;
-    fill: none;
-}
-
-.layer-mapdata text.label-halo,
-.layer-mapdata text.label {
-    font-size: 10px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-.layer-mapdata text.label {
-    fill: #ff26d4;
-}
-
-.layer-mapdata text.label-halo {
-    opacity: 0.7;
-    stroke: #000;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
-}
diff --git a/css/65_data.css b/css/65_data.css
index 38346e8a2..fcf5d3a66 100644
--- a/css/65_data.css
+++ b/css/65_data.css
@@ -41,140 +41,49 @@
 .note-header-icon .preset-icon-28 {
     top: 18px;
 }
-
 .note-header-icon .note-icon-annotation {
     position: absolute;
     top: 22px;
     left: 22px;
     margin: auto;
 }
-
 .note-header-icon .note-icon-annotation .icon {
     width: 15px;
     height: 15px;
 }
 
 
-/* OSM Note UI */
-.note-header {
-    background-color: #f6f6f6;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
+
+.layer-mapdata {
+    pointer-events: none;
 }
 
-.note-header-icon {
-    background-color: #fff;
-    padding: 10px;
-    flex: 0 0 62px;
-    position: relative;
-    width: 60px;
-    height: 60px;
-    border-right: 1px solid #ccc;
-    border-radius: 5px 0 0 5px;
+.layer-mapdata path {
+    stroke: #ff26d4;
+    stroke-width: 2;
+    fill: none;
 }
-[dir='rtl'] .note-header-icon {
-    border-right: unset;
-    border-left: 1px solid #ccc;
-    border-radius: 0 5px 5px 0;
+.layer-mapdata path.MultiPolygon,
+.layer-mapdata path.Polygon {
+    stroke-width: 1;
+    fill: #ff26d4;
+    fill-opacity: 0.2;
 }
 
-.note-header-icon .icon-wrap {
-    position: absolute;
-    top: 0px;
-}
-
-.note-header-label {
-    background-color: #f6f6f6;
-    padding: 0 15px;
-    flex: 1 1 100%;
-    font-size: 14px;
+.layer-mapdata text.label-halo,
+.layer-mapdata text.label {
+    font-size: 10px;
     font-weight: bold;
-    border-radius: 0 5px 5px 0;
+    dominant-baseline: middle;
 }
-[dir='rtl'] .note-header-label {
-    border-radius: 5px 0 0 5px;
+.layer-mapdata text.label {
+    fill: #ff26d4;
+}
+.layer-mapdata text.label-halo {
+    opacity: 0.7;
+    stroke: #000;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
 }
 
-.note-category {
-    margin: 20px 0px;
-}
-
-.comments-container {
-    background: #ececec;
-    padding: 1px 10px;
-    border-radius: 8px;
-    margin-top: 20px;
-}
-
-.comment {
-    background-color: #fff;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    margin: 10px auto;
-    display: flex;
-    flex-flow: row nowrap;
-}
-.comment-avatar {
-    padding: 10px;
-    flex: 0 0 62px;
-}
-.comment-avatar .icon.comment-avatar-icon {
-    width: 40px;
-    height: 40px;
-    object-fit: cover;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-}
-.comment-main {
-    padding: 10px 10px 10px 0;
-    flex: 1 1 100%;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    overflow-wrap: break-word;
-}
-[dir='rtl'] .comment-main {
-    padding: 10px 0 10px 10px;
-}
-
-.comment-metadata {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-}
-.comment-author {
-    font-weight: bold;
-    color: #333;
-}
-.comment-date {
-    color: #aaa;
-}
-.comment-text {
-    color: #333;
-    margin-top: 10px;
-    overflow-y: auto;
-    max-height: 250px;
-}
-.comment-text::-webkit-scrollbar {
-    border-left: none;
-}
-
-.note-save {
-    padding: 10px;
-}
-
-.note-save #new-comment-input {
-    width: 100%;
-    height: 100px;
-    max-height: 300px;
-    min-height: 100px;
-}
-
-.note-save .detail-section {
-    margin: 10px 0;
-}
-
-.note-report {
-    float: right;
-}
diff --git a/css/80_app.css b/css/80_app.css
index c33de8c30..0894a06fd 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1204,7 +1204,7 @@ a.hide-toggle {
 }
 
 
-/* preset form basics */
+/* Preset Editor */
 
 .preset-editor {
     overflow: hidden;
@@ -2415,6 +2415,133 @@ input.key-trap {
     border: 1px solid rgba(0,0,0,0);
 }
 
+
+/* OSM Note UI */
+.note-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.note-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+[dir='rtl'] .note-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+}
+
+.note-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
+}
+
+.note-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+[dir='rtl'] .note-header-label {
+    border-radius: 5px 0 0 5px;
+}
+
+.note-category {
+    margin: 20px 0px;
+}
+
+.comments-container {
+    background: #ececec;
+    padding: 1px 10px;
+    border-radius: 8px;
+    margin-top: 20px;
+}
+
+.comment {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin: 10px auto;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.comment-avatar {
+    padding: 10px;
+    flex: 0 0 62px;
+}
+.comment-avatar .icon.comment-avatar-icon {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+}
+.comment-main {
+    padding: 10px 10px 10px 0;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+[dir='rtl'] .comment-main {
+    padding: 10px 0 10px 10px;
+}
+
+.comment-metadata {
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+.comment-author {
+    font-weight: bold;
+    color: #333;
+}
+.comment-date {
+    color: #aaa;
+}
+.comment-text {
+    color: #333;
+    margin-top: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+}
+.comment-text::-webkit-scrollbar {
+    border-left: none;
+}
+
+.note-save {
+    padding: 10px;
+}
+
+.note-save #new-comment-input {
+    width: 100%;
+    height: 100px;
+    max-height: 300px;
+    min-height: 100px;
+}
+
+.note-save .detail-section {
+    margin: 10px 0;
+}
+
+.note-report {
+    float: right;
+}
+
+
+
 /* Fullscreen button */
 div.full-screen {
     float: right;
diff --git a/modules/services/vector_tile.js b/modules/services/vector_tile.js
index d5a5e2fc9..1239dd06b 100644
--- a/modules/services/vector_tile.js
+++ b/modules/services/vector_tile.js
@@ -37,9 +37,6 @@ function vtToGeoJSON(data, tile, mergeCache) {
             for (var i = 0; i < layer.length; i++) {
                 var feature = layer.feature(i).toGeoJSON(tile.xyz[0], tile.xyz[1], tile.xyz[2]);
                 var geometry = feature.geometry;
-                if (layers.length > 1) {
-                    feature.properties.vt_layer = layerID;
-                }
 
                 // Treat all Polygons as MultiPolygons
                 if (geometry.type === 'Polygon') {
@@ -59,9 +56,10 @@ function vtToGeoJSON(data, tile, mergeCache) {
                     if (!feature.geometry.coordinates[0].length) continue;   // not actually on this tile
                 }
 
-                // force some unique id generation
+                // Generate some unique IDs and add some metadata
                 var featurehash = utilHashcode(stringify(feature));
                 var propertyhash = utilHashcode(stringify(feature.properties || {}));
+                feature.__layerID__ = layerID.replace(/[^_a-zA-Z0-9\-]/g, '_');
                 feature.__featurehash__ = featurehash;
                 feature.__propertyhash__ = propertyhash;
                 features.push(feature);
diff --git a/modules/svg/data.js b/modules/svg/data.js
index 581da8fc7..8ae1ab4fc 100644
--- a/modules/svg/data.js
+++ b/modules/svg/data.js
@@ -151,6 +151,15 @@ export function svgData(projection, context, dispatch) {
     }
 
 
+    function featureClasses(d) {
+        return [
+            'data' + d.__featurehash__,
+            d.geometry.type,
+            d.__layerID__ || ''
+        ].join(' ');
+    }
+
+
     function drawData(selection) {
         var vtService = getService();
         var getPath = svgPath(projection).geojson;
@@ -190,7 +199,7 @@ export function svgData(projection, context, dispatch) {
         // enter/update
         paths = paths.enter()
             .append('path')
-            .attr('class', 'pathdata')
+            .attr('class', function(d) { return 'pathdata ' + featureClasses(d); })
             .merge(paths)
             .attr('d', getPath);
 
@@ -216,7 +225,7 @@ export function svgData(projection, context, dispatch) {
             // enter/update
             labels = labels.enter()
                 .append('text')
-                .attr('class', textClass)
+                .attr('class', function(d) { return textClass + ' ' + featureClasses(d); })
                 .merge(labels)
                 .text(function(d) {
                     return d.properties.desc || d.properties.name;