Skip to content

Commit

Permalink
move L.offsetHelper to L.Sync.offsetHelper
Browse files Browse the repository at this point in the history
  • Loading branch information
@jjimenezshaw
jjimenezshaw committed Jul 1, 2017
1 parent ec542f9 commit c075d44
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 24 deletions.
3 changes: 2 additions & 1 deletion L.Map.Sync.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
disableViewprereset: true
};

L.Sync = function () {};
// Helper function to compute the offset easily
// The arguments are relative positions with respect to reference and
// target maps of the point to sync.
Expand All @@ -17,7 +18,7 @@
// with the top right corner of the target map.
// The values can be less than 0 or greater than 1. It will sync
// points out of the map.
L.offsetHelper = function (ratioRef, ratioTgt) {
L.Sync.offsetHelper = function (ratioRef, ratioTgt) {
var or = L.Util.isArray(ratioRef) ? ratioRef : [0.5, 0.5]
var ot = L.Util.isArray(ratioTgt) ? ratioTgt : [0.5, 0.5]
return function (center, zoom, refMap, tgtMap) {
Expand Down
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ mapC.sync(mapB);
You can synchronize not only the centers, but other points, using the option `offsetFn`.
The parameters send to the function are `(center, zoom, referenceMap, targetMap)`, and it must return the equivalent center to produce your offset. That means, the center to pass to setView.

In most cases, you can use the factory `L.offsetHelper`, that accepts two arrays of two elements each `(ratioRef, ratioTgt)`. The meaning of this array is the relative position -relative to the top left corner and the whole size- in the map container of the point to synchronize. The first value in the array is for the x axis, where 0 is the left side and 1 the right side. The second value in the array is for the y axis, where 0 is the top side, and 1 the bottom side. So `[0, 0]` is the top left corner, `[0, 1]` is the bottom left corner, `[0.5, 1]` is the middle of the bottom side, `[0.5, 0.5]` is the center of the container, `[0.75, 0.25]` is the center of the top right quadrant, and `[2, 0]` is a point out of the container, one 'width' far to the right, in the top line.
In most cases, you can use the factory `L.Sync.offsetHelper`, that accepts two arrays of two elements each `(ratioRef, ratioTgt)`. The meaning of this array is the relative position -relative to the top left corner and the whole size- in the map container of the point to synchronize. The first value in the array is for the x axis, where 0 is the left side and 1 the right side. The second value in the array is for the y axis, where 0 is the top side, and 1 the bottom side. So `[0, 0]` is the top left corner, `[0, 1]` is the bottom left corner, `[0.5, 1]` is the middle of the bottom side, `[0.5, 0.5]` is the center of the container, `[0.75, 0.25]` is the center of the top right quadrant, and `[2, 0]` is a point out of the container, one 'width' far to the right, in the top line.
```
[0,0]------[0.5,0]------[1,0] ... [2,0]
| |
Expand All @@ -50,22 +50,22 @@ In most cases, you can use the factory `L.offsetHelper`, that accepts two arrays
```

For instance `mapB.sync(mapC, {offsetFn: L.offsetHelper([0, 1], [1, 1])});` will sync the bottom left corner `[0, 1]` in the reference map (mapB) with the bottom right corner `[1, 1]` in the target map (mapC).
For instance `mapB.sync(mapC, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])});` will sync the bottom left corner `[0, 1]` in the reference map (mapB) with the bottom right corner `[1, 1]` in the target map (mapC).

As well `mapB.sync(mapA, {offsetFn: L.offsetHelper([0, 0], [1, 0.5])});` will sync the top left corner `[0 ,0]` in mapB with the center of the right side `[1, 0.5]` in mapA.
As well `mapB.sync(mapA, {offsetFn: L.Sync.offsetHelper([0, 0], [1, 0.5])});` will sync the top left corner `[0 ,0]` in mapB with the center of the right side `[1, 0.5]` in mapA.

If you want the actions to be synced vice-versa, you should use symmetric values (as reference and target are swapped); for instance:
```JavaScript
// place B below A, and show a continuous map
mapA.sync(mapB, {offsetFn: L.offsetHelper([0, 1], [0, 0])});
mapB.sync(mapA, {offsetFn: L.offsetHelper([0, 0], [0, 1])});
mapA.sync(mapB, {offsetFn: L.Sync.offsetHelper([0, 1], [0, 0])});
mapB.sync(mapA, {offsetFn: L.Sync.offsetHelper([0, 0], [0, 1])});
```

The default behaviour is to synchronize the centers, the corresponding offset points are `[0.5, 0.5], [0.5, 0.5]`.

Have a look at the file [examples/multiple_offset.html](examples/multiple_offset.html) to see how to sync multiple maps with offsets.

If you need a different behaviour not supported by `L.offsetHelper`, create your own function. For instance, if you have a banner on the left side of mapA 100px width that you want to exclude, you can create something like this:
If you need a different behaviour not supported by `L.Sync.offsetHelper`, create your own function. For instance, if you have a banner on the left side of mapA 100px width that you want to exclude, you can create something like this:
```JavaScript
mapA.sync(mapB, {offsetFn: function (center, zoom, refMap, tgtMap) {
var pt = refMap.project(center, zoom).add([100, 0]);
Expand Down
12 changes: 6 additions & 6 deletions examples/multiple_offset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
zoom: 14
});

map.sync(mapA, {offsetFn: L.offsetHelper([1, 0], [0, 0])});
map.sync(mapB, {offsetFn: L.offsetHelper([1, 1], [0, 1])});
map.sync(mapA, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 0])});
map.sync(mapB, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 1])});

var doAll = false;
var doA = false;
Expand Down Expand Up @@ -93,13 +93,13 @@
// add other links as well
// or add ?all=1 to the url.
if (doAll || doA) {
mapA.sync(map, {offsetFn: L.offsetHelper([0, 0], [1, 0])});
mapA.sync(mapB, {offsetFn: L.offsetHelper([0, 1], [0, 0])});
mapA.sync(map, {offsetFn: L.Sync.offsetHelper([0, 0], [1, 0])});
mapA.sync(mapB, {offsetFn: L.Sync.offsetHelper([0, 1], [0, 0])});
}

if (doAll || doB) {
mapB.sync(map, {offsetFn: L.offsetHelper([0, 1], [1, 1])});
mapB.sync(mapA, {offsetFn: L.offsetHelper([0, 0], [0, 1])});
mapB.sync(map, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])});
mapB.sync(mapA, {offsetFn: L.Sync.offsetHelper([0, 0], [0, 1])});
}

</script>
Expand Down
22 changes: 11 additions & 11 deletions test/spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ describe('L.Sync', function () {
a = makeMap(a, 'mapA');
b = makeMap(b, 'mapB');

a.sync(b, {offsetFn: L.offsetHelper([1, 0], [0, 0])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 0])});
});

it('has correct inital view', function () {
Expand Down Expand Up @@ -454,7 +454,7 @@ describe('L.Sync', function () {
a = makeMap(a, 'mapA');
b = makeMap(b, 'mapB');

a.sync(b, {offsetFn: L.offsetHelper([0, 0], [0, 1])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([0, 0], [0, 1])});
});

it('has correct inital view', function () {
Expand Down Expand Up @@ -518,7 +518,7 @@ describe('L.Sync', function () {
a.should.have.view([1, 2], 3);
b.should.have.view([3, 4], 5);

a.sync(b, {offsetFn: L.offsetHelper([1, 0], [0, 1])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 1])});
a.should.have.view([1, 2], 3);
b.should.have.view([33.97094, 37.15625], 3);
});
Expand All @@ -535,8 +535,8 @@ describe('L.Sync', function () {
a.should.have.view([1, 2], 3);
b.should.have.view([0, 0], 5);

a.sync(b, {offsetFn: L.offsetHelper([1, 0], [0, 1])});
b.sync(a, {offsetFn: L.offsetHelper([0, 1], [1, 0])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 1])});
b.sync(a, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 0])});
a._syncMaps.should.have.length(1);
Object.keys(a._syncOffsetFns).should.have.length(1);
b._syncMaps.should.have.length(1);
Expand All @@ -552,10 +552,10 @@ describe('L.Sync', function () {
a = makeMap(a, 'mapA');
b = makeMap(b, 'mapB');
c = makeMap(c, 'mapC');
a.sync(b, {offsetFn: L.offsetHelper([1, 0], [0, 0])});
b.sync(a, {offsetFn: L.offsetHelper([0, 0], [1, 0])});
a.sync(c, {offsetFn: L.offsetHelper([1, 1], [0, 0])});
c.sync(a, {offsetFn: L.offsetHelper([0, 0], [1, 1])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 0])});
b.sync(a, {offsetFn: L.Sync.offsetHelper([0, 0], [1, 0])});
a.sync(c, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 0])});
c.sync(a, {offsetFn: L.Sync.offsetHelper([0, 0], [1, 1])});
});

/**
Expand Down Expand Up @@ -592,8 +592,8 @@ describe('L.Sync', function () {
a = makeMap(a, 'mapA');
b = makeMap(b, 'mapB');
c = makeMap(c, 'mapC');
a.sync(b, {offsetFn: L.offsetHelper([1, 0], [0, 0])});
a.sync(c, {offsetFn: L.offsetHelper([2, 0], [0, 0])});
a.sync(b, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 0])});
a.sync(c, {offsetFn: L.Sync.offsetHelper([2, 0], [0, 0])});
});

it('syncs', function () {
Expand Down

0 comments on commit c075d44

Please sign in to comment.