offsetFn with zoom

[jjimenezshaw]

In response to #59 and #41 (thanks for the code suggestions; many are included here), this PR lets the user to return an object like {center, zoom} in the callback offsetFn.

To not break backwards compatibility, there is a wrapper function to add the zoom if only the center is returned. So both things can be returned in offsetFn: just the center, or an object with center and zoom.

This is WIP. Still some tests and documentation to be added.

There is one example, examples/multiple_offset_zoom.html, in case you want to have a look.

There is a problem detected. In case of a.sync(b) and b.sync(a) where the zoom changes are not properly correlated, it enters in an infinite loop. Leaflet detects a zoom change, and fires an update in the other.

[jjimenezshaw]

@jieter @nmoreaud what do you think?

[jieter]

@jjimenezshaw thanks for the pull, I've added some suggestions;

[jieter]

This is nice to retain backwards compatibility, but I think I prefer introducing a breaking change and require the return value to always be an object.

[jjimenezshaw]

I prefer not breaking compatibility, specially if it is easy in the code. Changing the zoom is a rare scenario.
Maybe you can deprecate it, and remove in a later release (with other breaking changes?)

[jjimenezshaw]

@jieter I had implemented almost all the suggestions. Any more comments?

[jjimenezshaw]

@jieter what about this PR?

[MasterPuffin]

I tried running your fork, however I get the following error

leaflet-src.js:1764 Uncaught TypeError: Cannot read properties of null (reading 'lat')
    at Object.project (leaflet-src.js:1764:1)
    at Object.latLngToPoint (leaflet-src.js:1601:1)
    at NewClass.project (leaflet-src.js:4095:1)
    at NewClass._getNewPixelOrigin (leaflet-src.js:4618:1)
    at NewClass._move (leaflet-src.js:4337:1)
    at NewClass._resetView (leaflet-src.js:4299:1)
    at NewClass.setView (leaflet-src.js:3319:1)
    at NewClass.sync (L.Map.Sync.js:60:1)
    at ./src/app.ts (app.ts:31:9)
    at __webpack_require__ (bootstrap:22:1)

This is the code I use for syncing

mainMap.sync(minimap, {
    offsetFn: function (center: any, zoom: number, refMap: any, targetMap: any) {
        return {center: center, zoom: zoom - 1};
    }
});