I need functionality to check in what direction is map scrolled.
I show some text on a map using tooltips and need to change font-size depending on zoom level.
I had tried with 'wheel' event but it is fired only out of a Map.
Also as I know there is no direction event on 'zoomstart' and 'zoomend' events.
I know that checking zoom direction is not Leaflet's by the book way but any suggestion or solution will help me a lot.
Related
Is it possible to make it so you can only zoom in and out by using the zoom buttons as opposed to been able to pinch the screen? Perhaps only sensing one touch at a time or something similar?
The solution is right there in the Leaflet documentation: simply set the map option touchZoom to false when instantiating the map.
I am using threejs (r73). I use a PerspectiveCamera. My goal is to implement mouse interaction. For that purpose I want to use
TrackballControls.js . But I want a slightly different behaviour.
I want to rotate around the point that the user picked on the screen
I want to zoom in direction of the mouse position
For the second point I already found a "solution" at stackoverflow. The zoom works, but when I change the target vector of the control, panning and rotating does not work any longer.
Can anyone provide such an modified implementation of TrackballControls or help me with that?
EDIT
With the applied "solution" panning still works but rotating doesn't.
The idea from https://stackoverflow.com/a/16817727/2657179 also does not work.
Currently iam using google map to display a particular location on map_canvas. There iam also plotting some markers too.
In my application there is an option to set zoom level of the map by the user. User can pinch zoom on map and return the current map zoom value, when clicking on a button the value will be saved. i attain it by using
this.mapObj.getZoom();
What my requirement is to get the zoom level of the map after the user performs the pinch zoom, so that i can display it in a div, so that the user can know the zoom level after each pinch zoom in/pinch zoom out.
Anyone have any idea how can i get the event just after the pinch zoom?
Hope you guys understand what i mean!
NB: Shoot! Found out!
Google Maps API v3: Is there a callback or event listener after zoom changed?
am gonna try this.
Yes, put this somewhere ( I would put that inside initialize() ):
google.maps.event.addListener(map, 'zoom_changed', function() {
...
}
And you read the zoom with map.getZoom().
Also, check out bounds_changed . That is triggerd by zoom, pan and resize of the map. Might become useful to you
I'm using D3's zoom behavior on a large world map.
var zoom = d3.behavior.zoom().scaleExtent([1, 100]);
It works great, providing a natural zoom functionality and disabling the usual scroll activity one expects from a MouseWheel event, as it should.
However, when the map takes up the whole screen, I worry that users will get frustrated if they try to scroll down using the mouse wheel when the map is zoomed all the way out. Is there a way to bubble up to this behavior only in that circumstance?
A good example is the way a scrollable DIV on the page will scroll down when the mouse wheel is used over top of it. But when it reaches the bottom, the page itself resumes scrolling down.
I don't know a lot about event bubbling, but I do see that the D3 zoom behavior does called a d3.event.preventDefault().
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.