From c075d4466f8438aa863d0f45b9a69c867f98655c Mon Sep 17 00:00:00 2001 From: Javier Jimenez Shaw Date: Sat, 1 Jul 2017 16:46:13 +0200 Subject: [PATCH] move L.offsetHelper to L.Sync.offsetHelper --- L.Map.Sync.js | 3 ++- README.md | 12 ++++++------ examples/multiple_offset.html | 12 ++++++------ test/spec.js | 22 +++++++++++----------- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/L.Map.Sync.js b/L.Map.Sync.js index 393347b..51a4707 100644 --- a/L.Map.Sync.js +++ b/L.Map.Sync.js @@ -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. @@ -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) { diff --git a/README.md b/README.md index 70aa64a..d6e1b61 100644 --- a/README.md +++ b/README.md @@ -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] | | @@ -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]); diff --git a/examples/multiple_offset.html b/examples/multiple_offset.html index f08fc04..ffcbb0f 100644 --- a/examples/multiple_offset.html +++ b/examples/multiple_offset.html @@ -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; @@ -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])}); } diff --git a/test/spec.js b/test/spec.js index 11f4c14..504df61 100644 --- a/test/spec.js +++ b/test/spec.js @@ -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 () { @@ -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 () { @@ -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); }); @@ -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); @@ -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])}); }); /** @@ -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 () {