Updated Interaction (markdown)
+34
-7
@@ -1,31 +1,58 @@
|
|||||||
# Interaction
|
# Interaction
|
||||||
|
|
||||||
Double Click Zoom:
|
## Double Click Zoom
|
||||||
|
|
||||||
* Apply a zoom factor
|
* Apply a zoom factor
|
||||||
* Apply resolution constraint for each double click
|
* Apply resolution constraint for each double click
|
||||||
|
* Is `zoomFactor` an option/property of the interaction or of the map?
|
||||||
|
* Double click handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: true, animate: false};
|
||||||
|
map.moveTo(center, map.getResolution() * zoomFactor, options);
|
||||||
|
```
|
||||||
|
|
||||||
```
|
## Pinch Zoom
|
||||||
var options = {constrained: true, animated: false};
|
|
||||||
map.moveTo(center, map.getResolution() * factor, options)
|
|
||||||
```
|
|
||||||
|
|
||||||
Pinch Zoom:
|
|
||||||
|
|
||||||
* No resolution constraint while pinching
|
* No resolution constraint while pinching
|
||||||
* Use CSS3 transforms?
|
* Use CSS3 transforms?
|
||||||
* Apply resolution constraint when releasing mouse to determine the final resolution
|
* Apply resolution constraint when releasing mouse to determine the final resolution
|
||||||
* Animate to final resolution
|
* Animate to final resolution
|
||||||
|
* Pinching handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: false, animate: false};
|
||||||
|
map.moveTo(center, map.getResolution() * scale, options);
|
||||||
|
```
|
||||||
|
Done pinching handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: true, animate: true};
|
||||||
|
map.moveTo(center, map.getResolution() * scale, options);
|
||||||
|
```
|
||||||
|
|
||||||
(Alt) Drag Rotate:
|
(Alt) Drag Rotate:
|
||||||
|
|
||||||
* No rotation constraint while rotating
|
* No rotation constraint while rotating
|
||||||
* Apply rotation constraint when releasing mouse to determine the final angle
|
* Apply rotation constraint when releasing mouse to determine the final angle
|
||||||
* Animate to final angle
|
* Animate to final angle
|
||||||
|
* Rotating handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: false, animate: false};
|
||||||
|
map.rotate(angle, options);
|
||||||
|
```
|
||||||
|
Done rotating handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: true, animate: true};
|
||||||
|
map.rotate(angle, options);
|
||||||
|
```
|
||||||
|
|
||||||
Mouse Wheel Zoom:
|
Mouse Wheel Zoom:
|
||||||
|
|
||||||
* Apply resolution constraint as the user scrolls
|
* Apply resolution constraint as the user scrolls
|
||||||
|
* Mouse wheel handler:
|
||||||
|
```
|
||||||
|
var options = {constrain: true, animate: false};
|
||||||
|
map.zoomTo(center, map.getResolution() * scale, options);
|
||||||
|
```
|
||||||
|
```
|
||||||
|
|
||||||
Map API:
|
Map API:
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user