Using one element to pan/zoom another?

[stodge]

I have a strange use case where I have a custom map. I can successfully use panzoom to pan the map but I have a background rectangle element that I want users to also interact with. Users should be able to drag the background - but it won't pan the background element. Instead I want to use a callback to pan the map group instead, if this makes sense. Is there anyway in your plugin to do this? Thanks

[timmywil]

Let me see if I understand the use case. You would like to move the background element in conjunction with the panzoom element? If so, I'd suggest using the panzoomchange event to set the background element transform as the panzoom element moves. Does that help?

[stodge]

I'm sorry - my description was dreadful. I need a "delegate" pattern, where dragging on one element transforms another.

[timmywil]

I see! In that case, I suggest assigning the element that panzoom changes to the delegate element. You can do this like so:

var panzoom = $('#custom-map').panzoom();
var $delegate = $('#background-elem');
panzoom.$elem = $delegate;
panzoom.elem = $delegate[0];

The events will be bound to the custom map, but the transforms will be set on the background.

[stodge]

Thanks, alternatively, could I use callbacks to get events when a user drags an element? This way I could manage the pan/zoom myself and just let your plugin handle the eventing.

[stodge]

Ok - how would I use delegate to add events for both "#map" and "#background" SVG elements, but I only want to move "#map"? Is there an efficient way? Thanks again.

[stodge]

I used this code, but when I drag the background, the background moves, not the map:

    this.mapPanZoom = $("#map").panzoom({
    });

    this.backgroundPanZoom = $("#background").panzoom({
    });
    var $delegate = $("#map");
    this.backgroundPanZoom.$elem = $delegate;
    this.backgroundPanZoom.elem = $delegate[0];

Thanks

[stodge]

Sorry to be a pain - this delegation method doesn't work for me. I checked the event received in the onPan callback and the delegate and target are all the background element. So the following code didn't work:

    var $delegate = $("#map");
    this.backgroundPanZoom.$elem = $delegate;
    this.backgroundPanZoom.elem = $delegate[0];

[timmywil]

My guess is that the map covers the background, so only binding to one doesn't always trigger a move. Is that an accurate assessment? What about initializing panzoom on both, but delegating the transform settings from the background element to the map? Something like this:

http://codepen.io/timmywil/pen/rsJCy

[stodge]

This is all SVG, and the map partial covers the background. The background is visible. Thanks again.

[timmywil]

But the solution is sound, right? http://codepen.io/timmywil/pen/rsJCy

[stodge]

I'll try it out when I get back to work on Monday. I don't think I'll have time before then. Thanks.

[stodge]

The idea is ok but it won't work as I have lots of RECT elements that display object information on the map. So the solution of running panzoom on all RECT elements won't work. Thanks.

[timmywil]

@stodge You can adapt the solution to your needs. The selector itself is irrelevant. Thank you for your question!

[barnettj7]

Say I had a instance where there are two images side by side. I would like the to both zoom and pan simultaneously. how would this be achieved?