Add halo to currently selected note

diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb
index 4a9f432ad8956046aea22b0f14645fe11caf9abb..b6b464f73c631e9904b6b0a76ef96e7a44cf5f37 100644 (file)
--- a/app/assets/javascripts/index/note.js.erb
+++ b/app/assets/javascripts/index/note.js.erb
@@ -2,7 +2,8 @@ OSM.Note = function (map) {
   var noteLayer = map.noteLayer,
     content = $('#sidebar_content'),
     page = {},
   var noteLayer = map.noteLayer,
     content = $('#sidebar_content'),
     page = {},

-    marker;
+    noteState = map.hasLayer(noteLayer),
+    halo;

 
   var noteIcons = {
     "new": L.icon({
 
   var noteIcons = {
     "new": L.icon({


@@ -78,13 +79,23 @@ OSM.Note = function (map) {
       clearTimeout(loadTimer);
       clearLoading();
 
       clearTimeout(loadTimer);
       clearLoading();
 

-      if (!map.hasLayer(noteLayer)) map.addLayer(noteLayer);
-      if (window.location.hash == "") map.panTo($('.details').data().coordinates.split(','));
-    });
+      var data = $('.details').data();
+      if (!noteState) map.addLayer(noteLayer);
+      if (window.location.hash == "") map.panTo(data.coordinates.split(','));
+
+      if (!map.hasLayer(halo)) {
+          halo = L.circleMarker(data.coordinates.split(','), {
+            weight: 2.5,
+            radius: 20
+          });
+        map.addLayer(halo);
+      }
+  });

   };
 
   page.unload = function () {
   };
 
   page.unload = function () {

-    if (marker) map.removeLayer(marker);
+    if (map.hasLayer(halo)) map.removeLayer(halo);
+    if (!noteState) map.removeLayer(noteLayer);

   };
 
   function setLoading() {
   };
 
   function setLoading() {

diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index 18febde4d1d92b774ec2a0d6b3d464918d0db495..10ad2607a5a4c5bbbc56b6df50892edff384ac54 100644 (file)
--- a/app/assets/stylesheets/leaflet-all.css.scss
+++ b/app/assets/stylesheets/leaflet-all.css.scss
@@ -25,34 +25,3 @@ div.leaflet-marker-icon.location-filter.move-marker {
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }

-
-img.leaflet-marker-icon:after {
-  content:'';
-  position:absolute; left:50%; top:50%;
-  margin:-30px 0 0 -30px;
-  width:59px;
-  height:59px;
-  display:block;
-  background:rgba(0,0,0,0.2);
-  border:2px solid rgba(0,0,0,0.6);
-  border-radius:50%;
-  opacity:0;
-  -webkit-animation:place-tmp 2000ms infinite;
-     -moz-animation:place-tmp 2000ms infinite;
-          animation:place-tmp 2000ms infinite;
-  @-webkit-keyframes place-tmp {
-    0%   { opacity:1; -webkit-transform:scale(0); }
-    50%  { opacity:0; -webkit-transform:scale(1); }
-    100% { opacity:0; -webkit-transform:scale(1); }
-  }
-  @-moz-keyframes place-tmp {
-    0%   { opacity:1; -moz-transform:scale(0); }
-    50%  { opacity:0; -moz-transform:scale(1); }
-    100% { opacity:0; -moz-transform:scale(1); }
-  }
-  @keyframes place-tmp {
-    0%   { opacity:1; transform:scale(0); }
-    50%  { opacity:0; transform:scale(1); }
-    100% { opacity:0; transform:scale(1); }
-  }
-}
\ No newline at end of file