From 2f8efee26a2be307784abbd3a49e3a9977c7a9ad Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sat, 30 Jun 2018 03:47:03 -0400
Subject: [PATCH] Draw 2x icons (shadow and fill) so they stand out more

---
 css/60_photos.css    |  7 ++++++-
 modules/svg/notes.js | 34 +++++++++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index a372a7a9d..7213ee728 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -120,7 +120,12 @@
 .layer-notes * {
     pointer-events: visible;
     cursor: pointer;
-    color: #eebb00;
+}
+.layer-notes .note-shadow {
+    color: #000;
+}
+.layer-notes .note-fill {
+    color: #ee3;
 }
 
 
diff --git a/modules/svg/notes.js b/modules/svg/notes.js
index e9ad03cd2..ce869ddab 100644
--- a/modules/svg/notes.js
+++ b/modules/svg/notes.js
@@ -10,6 +10,7 @@ export function svgNotes(projection, context, dispatch) {
     var minZoom = 12;
     var layer = d3_select(null);
     var _notes;
+    var _selected;
 
     var noteEditor = uiNoteEditor(context);
 
@@ -62,6 +63,7 @@ export function svgNotes(projection, context, dispatch) {
     }
 
     function click(d) {
+        _selected = d;
         context.ui().sidebar.show(noteEditor, d);
     }
 
@@ -87,19 +89,37 @@ export function svgNotes(projection, context, dispatch) {
             .remove();
 
         var notesEnter = notes.enter()
-            .append('use')
-            .attr('class', function(d) { return 'note ' + d.id; })
-            .attr('width', '24px')
-            .attr('height', '24px')
-            .attr('x', '-12px')
-            .attr('y', '-12px')
-            .attr('xlink:href', '#fas-comment-alt')
+            .append('g')
+            .attr('class', function(d) { return 'note note-' + d.id; })
             .on('click', click)
             .on('mouseover', mouseover)
             .on('mouseout', mouseout);
 
+        notesEnter
+            .append('use')
+            .attr('class', 'note-shadow')
+            .attr('width', '24px')
+            .attr('height', '24px')
+            .attr('x', '-12px')
+            .attr('y', '-24px')
+            .attr('xlink:href', '#fas-comment-alt')
+
+        notesEnter
+            .append('use')
+            .attr('class', 'note-fill')
+            .attr('width', '20px')
+            .attr('height', '20px')
+            .attr('x', '-10px')
+            .attr('y', '-22px')
+            .attr('xlink:href', '#fas-comment-alt')
+
         notes
             .merge(notesEnter)
+            .sort(function(a, b) {
+                return (a === _selected) ? 1
+                    : (b === _selected) ? -1
+                    : b.loc[1] - a.loc[1];  // sort Y
+            })
             .attr('transform', transform);
     }