I would like to zoom into the mouseposition with leaflet maps. Like a doubleclick on the map.
Usually the zoom uses the center of the map, but I would like to zoom around the mousepos..
Per default the map behaves exactly as you want. The option scrollWheelZoom is set to true per default which means it will zoom in on the position of where your mouse is at that time. If you use 'scrollWheelZoom': 'center', it will zoom to the center of the current map bounds. 'scrollWheelZoom': false will disable the scrollwheel entirely. See the documentation: http://leafletjs.com/reference.html#map-scrollwheelzoom
If your map behaves differently it must mean that your map's scrollWheelZoom options is set to center; But your saying 'usually' which i'm finding very curious since it would mean your map behaves differently everytime you zoom, that would be very odd.
Here's a Plunker demonstration of all three behaviors: http://plnkr.co/edit/ZhHqK9?p=preview
Related
I am implementing a Google Maps for iOS SDK map in my app. I have a UISlider that controls the level of zoom in the map. I want to be able to have the map zoom in on a point that is not directly in the center of the map -- and after zooming in, this point should be offset from the center of the map by the same number of pixels as before.
I tried setting mapView.layer.anchorPoint to an off-center point, but if I do that, then it screws up the map drawing and it draws the whole map off-center, leaving black areas.
I tried zooming in on the point itself, but that moves it to the center of the map, which I don't want.
Is there a convenience method for simply telling the SDK to treat a different point other than the direct center, as being the "fulcrum", if you will, of the zooming?
I created markers with custom html for my bing map (doesn't matter if is was google maps). The new marker contains kinetic js stage that contains layers interactive to the user. everything is working just fine except that now I want to resize my marker when my map zooms out or in. I want to give my marker max and min sizes and it should change it's size when map is zoomed in or out.
I'm not getting any idea how I can resize my kineticjs canvas.
If I'm understanding correctly, you should be able to handle that by simply changing the scale of the stage.
stage.scale({x: newXScale, y: newYScale})
http://kineticjs.com/docs/Kinetic.Stage.html#scale
Using Google Maps InfoBox -
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Currently the map will scroll - pan control - when your infobox is outside of the bounds of the map.
I'm looking for a way to detect if the infobox will be outside of the bounds of the map, and if so the position is switched (currently I have the infoBoxAnchor set at 9,2) - so set the infoboxanchor in the opposite x direction.
Anyone done anything like this?
Thanks.
Could be tricky - infowindows are dynamically sized based on the content in them. What you could do, is in the InfoWindowOptions, set disableAutoPan=true. This will prevent the map panning to display the infowindow. Then I'm guessing you could use jQuery (or any other JS you like) to figure out:
the size of the infowindow based on the position where it's anchored to on the map,
is the entire infowindow visible
if not, move the infowindow's position
Related:
Auto adjustment of InfoWindow position on Google Maps
Google Maps Mashup with Intelligently positioning InfoBox
Google Maps: How to prevent InfoWindow from shifting the map
And a possible solution (thanks to above links) at http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.
Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:
have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Option 2 is not what I want to be coding right now.
Anybody know of a way to achieve Option 1?
(Google Maps API v3)
I would try to set high z-index(say 1000) on the div that wraps the info bubble.
I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.
You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').
Any ideas on how to bind a click event to an OverlayView in v3 of the GMaps API? The overlays seem to be buried under the map's panes so clicking on the overlay results in just a zoom. I'd ultimately like to bind an infowindow to the overlay but just being able to click it would be a fine start.
Would just changing the z-index be the way to go? I tried this for a little while but couldn't get through all of the nested divs loaded by the map.
This is the demo I'm playing with: dutrack.com/markerShapes.php.
Edit: The overlays on the demo map are the large 'teardrop' icons and the paths. The smaller blue icons are Markers at the moment.
Consider placing your overlays in a different pane so that their z-Index is higher than. According to the documentation, getPanes().floatPane will get you the pane which is above all other map panes.
Also give your overlays a high z-Index so that they appear above other content in this frame.
Then use google.maps.event.addDomListener(..) to attach a click listener to your custom overlay.