Use Osmose supplied hex colors

css/65_data.css

@@ -153,61 +153,6 @@
     color: #EC1C24;
 }
 
-/* Osmose Errors
-------------------------------------------------------- */
-
-.osmose.item-0 {
-    color: #BDBDBD;
-}
-
-.osmose.item-1040,
-.osmose.item-1050,
-.osmose.item-1070,
-.osmose.item-1080,
-.osmose.item-1150,
-.osmose.item-1190,
-.osmose.item-1280 {
-    color: #DCB000;
-}
-
-.osmose.item-2110 {
-    color: #2CDCDC;
-}
-
-.osmose.item-3040,
-.osmose.item-3090,
-.osmose.item-3161,
-.osmose.item-3200,
-.osmose.item-3220,
-.osmose.item-3250 {
-    color: #2D9359;
-}
-
-.osmose.item-4010,
-.osmose.item-4030,
-.osmose.item-4080 {
-    color: #F2F230;
-}
-
-.osmose.item-5010,
-.osmose.item-5070 {
-    color: #EC0000;
-}
-
-.osmose.item-7040,
-.osmose.item-7090 {
-    color: #9F16B4;
-}
-
-.osmose.item-8300,
-.osmose.item-8360 {
-    color: #3DE736;
-}
-
-.osmose.item-9010 {
-    color: #976432;
-}
-
 /* Custom Map Data (geojson, gpx, kml, vector tile) */
 .layer-mapdata {
     pointer-events: none;

modules/services/osmose.js

@@ -18,6 +18,7 @@ const _osmoseItems =
     .reduce((unique, item) => unique.indexOf(item) !== -1 ? unique : [...unique, item], []);
 const _erZoom = 14;
 const _stringCache = {};
+const _colorCache = {};
 
 // This gets reassigned if reset
 let _erCache;
@@ -227,8 +228,11 @@ export default {
           return;
         }
 
-        // TODO: Item has 'color' key with hex color code value, automatically style issue markers
-        // const { item, color } = item;
+        // Cache served item colors to automatically style issue markers later
+        const { item: itemInt, color } = item;
+        if (color.test(/^#[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/)) {
+          _colorCache[itemInt] = color;
+        }
 
         // Value of root key will be null if no string exists
         // If string exists, value is an object with key 'auto' for string
@@ -261,6 +265,10 @@ export default {
     return (locale in _stringCache) ? _stringCache[locale][issueType] : {};
   },
 
+  getColor(itemType) {
+    return (itemType in _colorCache) ? _colorCache[itemType] : '#FFFFFF';
+  },
+
   postUpdate(d, callback) {
     if (_erCache.inflightPost[d.id]) {
       return callback({ message: 'Error update already inflight', status: -2 }, d);

modules/svg/osmose.js

@@ -142,7 +142,7 @@ export function svgOsmose(projection, context, dispatch) {
 
         markersEnter
             .append('polygon')
-            .attr('fill', 'currentColor')
+            .attr('fill', d => getService().getColor(d.item))
             .call(markerPath, 'qa_error-fill');
 
         markersEnter
@@ -262,4 +262,4 @@ export function svgOsmose(projection, context, dispatch) {
 
 
     return drawOsmose;
-}
+}

modules/ui/osmose_header.js

@@ -54,7 +54,7 @@ export function uiOsmoseHeader() {
 
         svgEnter
             .append('polygon')
-            .attr('fill', 'currentColor')
+            .attr('fill', d => services.osmose.getColor(d.item))
             .attr('class', 'qa_error-fill')
             .attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6');
 
@@ -90,4 +90,4 @@ export function uiOsmoseHeader() {
 
 
     return osmoseHeader;
-}
+}