Comments (10)
I'm currently struggling with that exactly that problem. (funny that I'm reading this now in the Github feed) http://stackoverflow.com/questions/3604190/constrained-panning-zooming-using-a-viewmatrix
Can you point me to some resources describing how this can be done?
-- Michael
from polymaps.
@michael Sounds like you're describing a different problem. Polymaps does have code to constrain panning and zooming, and the centerRange
constraint is specifically designed so that the user can zoom in to any visible point on screen without needing to recenter. This avoids shifting the center while zooming, which (in my personal opinion) is icky usability. However, not doing this means it is possible to push (pan) the map just outside the edge of the screen. More details on this commit:
http://github.com/simplegeo/polymaps/commit/62171ece9609e4454ec56f4bcb6b12cc9f196557
The code isn't structured to constrain an matrix-tranformed view, though; the view is defined using a center point (a location), a zoom level, and a rotation angle. (It's also possible to apply an affine transformation to the tiles, which requires some fancy logic to determine tile visibility, but that doesn't affect the panning and zooming constraints.)
Protovis has some code for constraining panning and zooming. See:
http://github.com/mbostock/protovis/blob/master/src/behavior/Zoom.js
http://github.com/mbostock/protovis/blob/master/src/behavior/Pan.js
However, this is simpler yet because it only supports panning and zooming and not arbitrary affine/rigid-body transforms.
from polymaps.
Well, what you're describing in the first par. is the "scale around a reference point" approach on zooming. This is already working in my case. I do a translate(x,y) to the reference point (mouse position) followed by a scale, to translate(-x,-y) back. This avoids shifting the center during zooming as you've described. When zooming in this way there's no problem. I can't get out of the scene boundaries. But when I want to zoom back to 100% I'm violating the scene boundaries. The problem is that I can't just scale down around the mouse position again. I need a different approach on scaling back to the full (original) view. Actually what I want to reach eventually on zooming back to origin is an identity matrix as the view transformation. I need to somehow tween the current view matrix to the origin (=identity matrix). I guess I can do that with linear combinations. However I'm not entirely sure if that's how it's done. What do you think?
It's a bit hard to explain that in text since I'm neither s native speaker, nor a mathematician. ;)
Thanks for pointing me to the Protovis Zoom and Pan behaviors, that's a good reference. One question: In Protovis I can add zoom/pan behaviors to any panel in the scene, right? What happens with the objects inside a smaller panel (with zooming enabled), placed somewhere in the middle of the screen when I perform a zoom in. Are they visible in the scene outside the panel's boundaries? If not, how do you manage this clippling? It seems to be pretty hard with Canvas do that, that's why for now I allow zoom and pan behaviors to be attached to the whole scene only (or to the output display to be exact).
Thanks a lot!
-- Michael
from polymaps.
@michael Check this out, if you want to interpolate between two matrix transforms:
http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition
from polymaps.
Thanks for the link.
I've now solved it by justifying the view matrix after each transform by clamping the values of tx,ty accordingly.
Here's the code (~50 lines) for both behaviors:
http://github.com/michael/unveil/blob/master/src/scene/behaviors.js
Demo:
http://quasipartikel.at/unveil/examples/multiple_displays/
from polymaps.
@michael If you're doing mousewheel stuff, be aware that the wheelDelta is broken in Safari & Chrome (unless you're using a WebKit or Chromium nightly). See this bug:
https://bugs.webkit.org/show_bug.cgi?id=40441
And this bug-detection and work-around:
http://github.com/mbostock/polymaps/commit/3f591e76126d40a37ef4cf20113ba244f7b19157
from polymaps.
Good to know! Thanks for the hint.
Could I integrate po.wheel in my code? ...Trying to get rid of jQuery dependencies anyway.
from polymaps.
@michael Yep, it's all BSD licensed.
from polymaps.
Implemented here:
http://github.com/mbostock/polymaps/commit/75973cc3c87fbbc458f2f587241aca4e52230fc0
from polymaps.
Superb, thank you!
from polymaps.
Related Issues (20)
- Upgrade polymaps.org to 2.5.1 -- Currently examples breaking in IE9/Firefox HOT 2
- 'show' event is called with bad data the first time
- How to disable wrap-around? HOT 9
- Load function should be called with layer as context
- Polymaps has stopped working in Firefox HOT 3
- Maps start jumping in Chrome when dragging
- Custom Coordinate systems or Projects? HOT 2
- Round up in fractional zooming
- Examples don't work in firefox HOT 4
- [enhancement] Add missing bower.json. HOT 1
- SOURCE CODE FOR IMAGE MAP USED IN NEWSPAPER HOT 1
- Attaching event listeners to geoJson layer HOT 1
- Navigation image viewport
- Overlays
- Examples on http://polymaps.org/ex/ not resizing. HOT 3
- how to add custom icons on locations and toolip on those
- Integrating polyMaps with angular2 webpack
- Using Polymaps with Mapbox
- Examples on website no longer work because of CORS
- Is polymaps dead ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from polymaps.