I was wondering, has smooth zooming and panning described in http://www.win.tue.nl/~vanwijk/zoompan.pdf been implemented in OpenLayers?
It has been implemented for PolyMaps: http://bl.ocks.org/RandomEtc/600144
And ModestMaps: https://github.com/stamen/modestmaps-js/tree/master/examples/zoompan
Since 3.20.0, OpenLayers has an ol.View.animate() method that allows smooth zooming and/or panning (among others) and deprecates the old ol.animation.
From the latest API docs:
The view's center, zoom (or resolution), and rotation can be animated for smooth transitions between view states.
So, you can zoom and pan by doing:
var view = map.getView();
view.animate({
center: coordinates,
zoom: zoomLevel
});
Related
I'm making an experiment with map animation. For now, I only use OpenLayers 6. I want to implement Google Maps as well.
The idea is to animate map interactions such as pan and zoom. Those animations need to be of a fixed duration. In OpenLayers, I'm using the handy view method animate() that way (variables can change depending on the context):
map.getView().animate({
center: [newx, newy],
zoom: newzoom,
easing: oleasing,
duration: durationms
})
I was wondering if there was any Google Maps equivalent. For now, I'm only looking for a way to animate a pan or a zoom with a fixed duration value.
I know there are the Maps methods panTo() and setZoom() but I cannot set a specific duration.
moveCamera works without animation, so you could program your own animation sequence using JavaScript timeouts - or even synchronize your Google map with the change:center and change:resolution events of a hidden OpenLayers view.
For example https://jsfiddle.net/r7kuge1y/ which applies OpenLayers animation from https://openlayers.org/en/latest/examples/animation.html to a Google map example from https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I'm trying to display a map just like Google does here https://www.google.fr/maps
With google maps API, I'm struggling at finding the following :
makeing ctrl + drag change the tilt
programmatically setting the tilt to 0, but keep 3D imagery (for high resolution purpose basically)
programmatically setting the tilt to a custom value (say 30 degrees)
makeing ctrl + drag rotate the map
programmatically rotate the map to a custom value
Is that even possible ?
First off, the map in your link by default does not support 45 degree tilt nor rotate options, as that is a roadmap. In order to enable tilt and rotate options in your map, you will need to set your mapTypeId to "Satellite" or "Hybrid" first and set the rotateControl in your Map Object to true; this is an example adapted from Google Maps API:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.390205, lng: 2.154007},
zoom: 12,
mapTypeId: 'satellite',
rotateControl: true
});
map.setTilt(45);
}
As far as I can tell from their documentation:
Google Maps JavaScript API support special 45 degree imagery for
certain location
You can set the heading option and tilt option dynamically by calling the respective method on the map object. But I do not think you can override the preset behavior programmatically unless this is something that I have missed from the documentation . This is another link to the 45 degree service for you.
if you are in 3d mode and using a desktop, you can tilt or rotate by holding SHIFT+CTRL at the same time. doesnt work in roadmap mode though
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
Check out a demo: http://jsfiddle.net/VudEC/3/
It's about using Google's Satellite Layer (in example: zoom=20), birds eye mode enabled and a marker.
var map = new L.Map('map_canvas', {
center: new L.LatLng(39.868841, -4.021938),
zoom: 20
});
var ggl = new L.Google('SATELLITE');
map.addLayer(ggl);
var marker = new L.Marker(new L.LatLng(39.868841, -4.021938));
map.addLayer(marker);
If you drag vertically the map (or use the function map.panBy()) you will see the marker moving up or down (vertically). And it shouldn't.
If the drag or movement is horizontal, no problem.
If I disabled the birds eye (or set a lower zoom), the issue disappear.
At least it happens with polygons too.
Btw, with Google Maps API it doesn't happen: http://jsfiddle.net/ew332/1/
I don't understand why I get this issue.
Thank you very much
It seems it's a bug of the plugin, you can read more here and for now, there is no a fix
Is it possible to use the DrawingManager library to draw polylines and polygons on a Google StreetView overlay?
I would like to implement some house height and roof angle measuring functions via user-drawn polyline(s), but even if I instantiate and enable the DrawingManager on a StreetView overlay, all mouse and keyboard events simply control the StreetView navigation instead of actually drawing polylines and polygons.
It seems that the DrawingManager library will not work on a StreetView overlay. Is this correct? Or do I need to disable a bunch of StreetView options like panning and zooming controls for this to work?
I am almost sure that you can't draw it over google maps, even disabling all the options you stated.