From 802d5707d6541c8eea02cb882b9de9e494f2fcb7 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 14 Jul 2017 02:32:35 -0400
Subject: [PATCH] Style detections for better visibility

---
 css/60_mapillary.css          | 12 ++++++++++++
 modules/services/mapillary.js | 16 ++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/css/60_mapillary.css b/css/60_mapillary.css
index a248a1ac2..2910342e1 100644
--- a/css/60_mapillary.css
+++ b/css/60_mapillary.css
@@ -66,3 +66,15 @@
     z-index: 80;
 }
 
+
+/* Mapillary viewer */
+#mly .domRenderer .TagSymbol {
+    font-size: 12px;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: 0 4px;
+    border-radius: 4px;
+    transform: translate(-50%, -120%) !important;
+}
+
+
+
diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index d0dec62f1..846e0504e 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -523,7 +523,12 @@ export default {
 
 
         function makeTag(data) {
+            var valueParts = data.properties.value.split('--');
+            if (valueParts.length !== 3) return;
+
+            var text = valueParts[1].replace(/-/g, ' ');
             var tag;
+
             // Currently only two shapes <Polygon|Point>
             if (data.properties.shape.type === 'Polygon') {
                 var polygonGeometry = new Mapillary
@@ -534,7 +539,12 @@ export default {
                     data.properties.key,
                     polygonGeometry,
                     {
-                        text: data.properties.value
+                        text: text,
+                        textColor: 0xffff00,
+                        lineColor: 0xffff00,
+                        lineWidth: 2,
+                        fillColor: 0xffff00,
+                        fillOpacity: 0.3,
                     }
                 );
 
@@ -547,7 +557,9 @@ export default {
                     data.properties.key,
                     pointGeometry,
                     {
-                        text: data.properties.value
+                        text: text,
+                        color: 0xffff00,
+                        textColor: 0xffff00
                     }
                 );
             }