Fix syncing cursors

jieter · May 19, 2016 · 0a9261d · 0a9261d
1 parent 27b4485
commit 0a9261d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 37 deletions.
diff --git a/L.Map.Sync.js b/L.Map.Sync.js
@@ -11,31 +11,42 @@
     L.Map = L.Map.extend({
         sync: function (map, options) {
             this._initSync();
-            options = options || {};
+            options = L.extend({
+                noInitialSync: false,
+                syncCursor: false,
+                syncCursorMarkerOptions: {
+                    radius: 10,
+                    fillOpacity: 0.3,
+                    color: '#da291c',
+                    fillColor: '#fff'
+                }
+            }, options);
 
             // prevent double-syncing the map:
             if (this._syncMaps.indexOf(map) === -1) {
                 this._syncMaps.push(map);
             }
 
             if (!options.noInitialSync) {
-                if (options.syncCursor) {
-                    map.cursor = L.circleMarker([0, 0], {
-                        radius: 25,
-                        fillOpacity: 0.3,
-                        weight: 2,
-                        color: '#da291c',
-                        fillColor: '#FFFFFF'
+                map.setView(this.getCenter(), this.getZoom(), NO_ANIMATION);
+            }
+            if (options.syncCursor) {
+                map.cursor = L.circleMarker([0, 0], options.syncCursorMarkerOptions).addTo(map);
+
+                var cursors = this._cursors;
+                cursors.push(map.cursor);
+
+                this.on('mousemove', function (e) {
+                    cursors.forEach(function (cursor) {
+                        cursor.setLatLng(e.latlng);
                     });
-                    map.cursor.addTo(map);
-                    this.on('mousemove', function (e) {
-                        map.cursor.setLatLng(e.latlng);
-                        if ('undefined' !== typeof this.cursor) {
-                            this.cursor.setLatLng(e.latlng);
-                        }  
+                });
+                this.on('mouseout', function (e) {
+                    cursors.forEach(function (cursor) {
+                        // TODO: hide cursor in stead of moving to 0, 0
+                        cursor.setLatLng([0, 0]);
                     });
-                }
-                map.setView(this.getCenter(), this.getZoom(), NO_ANIMATION);
+                });
             }
             return this;
         },
@@ -48,7 +59,7 @@
                 this._syncMaps.forEach(function (synced, id) {
                     if (map === synced) {
                         self._syncMaps.splice(id, 1);
-                        if ('undefined' !== typeof map.cursor) {
+                        if (map.cursor) {
                             map.cursor.removeFrom(map);
                         }
                     }
@@ -71,6 +82,7 @@
             var originalMap = this;
 
             this._syncMaps = [];
+            this._cursors = [];
 
             L.extend(originalMap, {
                 setView: function (center, zoom, options, sync) {

diff --git a/examples/dual_withCircles.html → examples/syncCursor_dual.html b/examples/dual_withCircles.html → examples/syncCursor_dual.html
diff --git a/examples/multiple_withCircles.html → examples/syncCursor_multiple.html b/examples/multiple_withCircles.html → examples/syncCursor_multiple.html
diff --git a/test/spec.js b/test/spec.js
@@ -1,10 +1,6 @@
 'use strict';
 
 var NO_ANIMATE = {animate: false};
-var ADD_CIRCLE = {
-    syncCursor: true,
-    attributionControl: false
-};
 
 // Generate coords for a square-wave pattern (m=2) or
 // a saw tooth with (m - 1) steps
@@ -289,16 +285,15 @@ describe('L.Sync', function () {
             a._syncMaps.should.eql([]);
         });
     });
-    
-    describe('sync with circle marker', function () {
+
+    describe('sync with syncCursor', function () {
         beforeEach(function () {
-            a = makeMap(a, 'mapA', ADD_CIRCLE);
-            b = makeMap(b, 'mapB', ADD_CIRCLE);
+            b = makeMap(b, 'mapB', {syncCursor: true});
             a.setView([1, 2], 3, NO_ANIMATE);
             b.setView([0, 0], 5, NO_ANIMATE);
         });
 
-        it('sync initial view by default', function () {
+        it('sync should still work with syncCursor ', function () {
             a.should.have.view([1, 2], 3);
             b.should.have.view([0, 0], 5);
 
@@ -308,16 +303,5 @@ describe('L.Sync', function () {
             b.should.have.view([1, 2], 3);
         });
 
-        it('does not sync initially when disabled', function () {
-            a.should.have.view([1, 2], 3);
-            b.should.have.view([0, 0], 5);
-
-            a.sync(b, {
-                noInitialSync: true
-            });
-
-            a.should.have.view([1, 2], 3);
-            b.should.have.view([0, 0], 5);
-        });
     });
 });