How can I have a smooth animated move between 2 Maps locations?

How-to Discussions
1

Hi all,

I would like to move from A to B using a smooth transition (or animated move).
Here is a code snippet:

<App>
	<StatusBarBackground Dock="Top"/>
	<JavaScript>
	function gotoA(){
		map.setLocation(43, 10);
	}
	function gotoB(){
		map.setLocation(20, 10);
	}

	module.exports ={
		gotoB : gotoB,
		gotoA : gotoA
	}
	</JavaScript>

	<NativeViewHost  Height="90%">		
            <Panel Height="100" Alignment="Bottom" >
            	<StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="20">
            		<Button Color="#aabbcc" Padding="20" Clicked="{gotoB}">
            			<Text Value="Position A" />
            			<Shadow/>
            		</Button>
            		<Button Color="#aabbdd" Padding="20" Clicked="{gotoA}">
            			<Text Value="Position B"/>
            			<Shadow/>
            		</Button>
            	</StackPanel>
            </Panel>

            <MapView ux:Name="map"  ShowCompass="true" ShowMyLocation="true" ShowMyLocationButton="true" AllowScroll="true" >
                
            </MapView>
            
    </NativeViewHost>

</App>

Do you have any idea of how can I proceed?
Thanks

2

I would like to see this as well.

3

If you want to get it, here is the code you have to change in MapViewDelegate.m :

 [_mapView setRegion:MKCoordinateRegionMake(newCenter, span) animated: true];

I fixed also another bug on the map where the scale factor is not symetric. If you set a specific zoom factor and then get it back, with the current Fuse release, you will get a delta. I fixed it using that :

double zoomer = log2(MKMapSizeWorld.width / 256) - log2(zoomScale); //19.0
		if ( zoomer < 0.0 ) zoomer = 0.0;

        return zoomer-0.5;

The whole modification it here:

-(MKCoordinateSpan)coordinateSpanWithMapView:(MKMapView *)mapView centerCoordinate:(CLLocationCoordinate2D)centerCoordinate andZoomLevel:(NSUInteger)zoomLevel
	{
		// convert center coordiate to pixel space
		double centerPixelX = [self longitudeToPixelSpaceX:centerCoordinate.longitude];
		double centerPixelY = [self latitudeToPixelSpaceY:centerCoordinate.latitude];

		// determine the scale value from the zoom level
		NSInteger zoomExponent = log2(MKMapSizeWorld.width / 256) - zoomLevel;
		double zoomScale = pow(2, zoomExponent);

		// scale the map’s size in pixel space
		CGSize mapSizeInPixels = mapView.bounds.size;
		double scaledMapWidth = mapSizeInPixels.width * zoomScale;
		double scaledMapHeight = mapSizeInPixels.height * zoomScale;

		// figure out the position of the top-left pixel
		double topLeftPixelX = centerPixelX - (scaledMapWidth / 2);
		double topLeftPixelY = centerPixelY - (scaledMapHeight / 2);

		// find delta between left and right longitudes
		CLLocationDegrees minLng = [self pixelSpaceXToLongitude:topLeftPixelX];
		CLLocationDegrees maxLng = [self pixelSpaceXToLongitude:topLeftPixelX + scaledMapWidth];
		CLLocationDegrees longitudeDelta = maxLng - minLng;

		// find delta between top and bottom latitudes
		CLLocationDegrees minLat = [self pixelSpaceYToLatitude:topLeftPixelY];
		CLLocationDegrees maxLat = [self pixelSpaceYToLatitude:topLeftPixelY + scaledMapHeight];
		CLLocationDegrees latitudeDelta = -1 * (maxLat - minLat);

		// create and return the lat/lng span
		MKCoordinateSpan span = MKCoordinateSpanMake(latitudeDelta, longitudeDelta);
     
		return span;
	}


-(void)moveTo:(double)lat longitude:(double)lng zoom:(double)z tilt:(double)t orientation:(double)o
{
    z = MAX(2.0, MIN(z, 21));
    
    CLLocationCoordinate2D newCenter = CLLocationCoordinate2DMake(lat, lng);
    
    MKCoordinateSpan span = [self coordinateSpanWithMapView:_mapView centerCoordinate:newCenter andZoomLevel:z];
    [_mapView setRegion:MKCoordinateRegionMake(newCenter, span) animated: true];
}

-(double)getZoomLevel
{
    double zoomer;
    CLLocationDegrees longitudeDelta = _mapView.region.span.longitudeDelta;
    double density = [[UIScreen mainScreen] scale];
    CGFloat mapWidthInPixels = _mapView.bounds.size.width * density;
    double zoomScale = longitudeDelta * MERCATOR_RADIUS * M_PI / (180.0 * mapWidthInPixels);
    zoomer = log2(MKMapSizeWorld.width / 256) - log2(zoomScale); //19.0
    if ( zoomer < 0.0 ) zoomer = 0.0;
    return zoomer-(0.5/750)*mapWidthInPixels;
}
4

Here is my pull request: https://github.com/fusetools/fuselibs-public/pull/1123
Thank you !

5

This is great. Do you also have a fix for Android?