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
Related
I'm trying to add a 2D/3D view tilt(same as what google map has)functionality to my cesium project, but am having trouble figuring out how to do it with the provided cesium functions.
I've tried camera rotate and look functions provided by cesium. but the camera viewer.scene.camera.rotateup and rotatedown function only rotate the camera without modifying the camera's position and attitude. I've also tried using viewer.scene.camera.flyTo function but had trouble finding ways to get the right destination.
I Use Leaflet Map Plugin. i Write this code for create and load google map tiles in LeafLet
var map = L.map('map').setView([31.2744015, 48.7251283], 18);
// load a tile layer
//Satellite:
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
this code work fine. But I Want Load another google Map option in this plugin Like 3D View map
But will this be done?
thanks for help me.
Two things:
Loading map tiles from Google using just a L.TileLayer contravenes the terms&conditions of Google Maps (the part about "accessing the content only through the Google Maps API"). Do not be surprised if Google gets angry at that.
As pointed out in the answers to the question «Leaflet Map API with Google Satellite Layer» , look in the Leaflet plugins list. In particular, GoogleMutant might be of interest.
As of now, Leaflet is able to display 2D maps only. There are no plans to make it display oblique imagery, or provide tilt capabilities.
If you need these features, you might want to have a look at other web mapping libraries, such as https://www.mapbox.com/mapbox-gl-js/api/ or https://cesiumjs.org/. These can handle more degrees of camera freedom, and some degree of terrain elevation display.
https://labs.mapbox.com/bites/00093/
pls see the source code of it , as
window.setInterval(function(){
$('.rotating').attr('style','-webkit-transform:rotateZ('+angle+'deg);-moz-transform:rotateZ('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
if ($('.rotating').length>0) $('.pivotmarker').attr('style','-webkit-transform: rotateY('+angle+'deg);-moz-transform: rotateY('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
angle=angle*-1;
},1500);
may it help
Google Maps API v3 currently supports two types of animation for markers: DROP and BOUNCE
Is there a way I can speed up the BOUNCE or slow down the DROP animation?
Google Maps API doesn't support animation properties or customization, just the ability to select "drop" or "bounce" as you said.
It should be possible to apply custom animations to marker elements through jQuery or other framework. Alternatively you could supply an animated GIF as a marker.
I tried integrating google maps tile layer into leaflet using leaflet-google plugin. Everything loads fine, but when i try to zoom in/out, first my custom feature layer zooms and then the google map tile layer zooms. Why don't they zoom together?
var map = new L.Map('map', {center: new L.LatLng(18.93718 , 72.79366), zoom: 10});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
and I am adding my feature layer by:
L.geoJson(inputgeoJson, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Thanks!
The Google layer in Leaflet is a hack (a possibly illegal one), and involves using the Google Maps API within Leaflet. Since Leaflet and the Google Maps API have different zoom transition animations, you see this effect. You could use Google tiles directly in Leaflet, but that's definitely be illegal, not just maybe.
When clicking from one marker to another in Google Maps, the map screen animates the move smoothly if both markers are within them initial map view but jumps if one of the markers is off screen.
I'm trying to set up a map which has several locations within the main map area but has one which is 'off screen'. I have a signpost icon to the more distant location within the initial map area which I want to smoothly scroll to the off screen location when clicked (so as to give a better sense of it's relative location). I can't find anything in the Maps API which would let me do this however.
I could zoom out, move and then zoom in again but this looks a bit jarring. Am I missing something in the API, or does anyone have any suggestions?
Unfortunately, I don't think this is possible (without a change from Google). From the v3 API reference for panTo:
Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.
which implies that if that change is not less than the dimensions of the map, the transition won't be smoothly animated. The other pan methods are similar.
You could try moving in multiple steps but that's a bit of a hack and I suspect the result will be poor.
Sorry that's not very helpful (I have the same problem).
For me this method works, but i'm using Google Maps API v2.
LatLng latLng = new LatLng(lat,lng);
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, ZOOM_FACTOR));
This animates the camera from current position to the new one.
If you are using Gmaps API V2, then you can implement smooth animated move very easily by using panBy() method. You have to use fromLatLngToContainerPixel() method to find the amount of pixels to pan by.
Here is the bit of code:
var newLoc = map.fromLatLngToContainerPixel(new GLatLng(lat, lng));
map.panBy(new GSize( newLoc.x, newLoc.y ));
However, what I am trying to do is to achieve the same thing in maps API V3, but sadly fromLatLngToContainerPixel() method does not work anymore the way it did :(