Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13778] Android: Maps V2 module - selecting a map pin pops up an annotation that runs off the edge of the screen

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-07-12T22:41:13.000+0000
Affected Version/sRelease 3.1.0
Fix Version/s2013 Sprint 14, 2013 Sprint 14 API, Release 3.1.2, Release 3.2.0
ComponentsAndroid
Labelsmapv2, qe-testadded, supportTeam
ReporterEduardo Gomez
AssigneeHieu Pham
Created2013-05-07T16:45:02.000+0000
Updated2013-09-24T07:27:19.000+0000

Description

Issue

When an annotation is selected using the selectAnnotation function or when a pin is clicked on the map the map view used to automatically move so that the annotation title and subtitle would be visible. This is how the native google maps application and current TiMap View object performs. Sample attached reproduces on TiMapView object. Tap on "Open TiMapView" row. Using the V2 Maps module when an annotation is selected using the function or when a pin is clicked the map stay stationary and the annotation is shown with half or more of it potentially cut off. Tap on "Open MapModule" row.

Actual behavior

selecting a map pin pops up an annotation that runs off the edge of the screen,

Expected behavior

the map should move so that the annotation title and subtitle are fully visible.

snippet

var MapModule = require('ti.map');

var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var tableData = [];

var centerTrue = Ti.UI.createTableViewRow({
	title : 'Open TiMapView'
});
tableData.push(centerTrue);
centerTrue.addEventListener('click', function(e) {
	openTiMapView();
});

var annotationRow = Ti.UI.createTableViewRow({
	title : 'Open MapModule'
});
tableData.push(annotationRow);
annotationRow.addEventListener('click', function(e) {
	annotationTest();
});

table.setData(tableData);
win.add(table);
win.open();

function openTiMapView() {
	var win = Ti.UI.createWindow({
		backgroundColor : '#fff'
	});
	var map = Ti.Map.createView({
		mapType : Ti.Map.STANDARD_TYPE,
		regionFit : true
	});
	var annotation = Ti.Map.createAnnotation({
		latitude : 59.93473,
		longitude : 10.760797,
		title : 'Center TRUE _ Print House AS',
		subtitle : 'Sandakerveien 24 C Bygg A2, 0473 Oslo',
		animate : true,
		pincolor : Ti.Map.ANNOTATION_PURPLE
	});
	map.addAnnotation(annotation);
	map.selectAnnotation({
		annotation : annotation,
		center : false//either true or false makes no difference
	});
	map.setLocation({
		latitude : 60,
		longitude : 10.760797,
		latitudeDelta : 0.035,
		longitudeDelta : 0.035
	});

	win.add(map);
	win.open();

}

function annotationTest() {
	var win = Ti.UI.createWindow({
		fullscreen : false
	});
	var anno = MapModule.createAnnotation({
		latitude : -33.87365,
		image : 'map_pin.png',
		longitude : 151.20689,
		title : "Sydney",
		subtitle : "Sydney is quite chill",
		draggable : true
	});
	var anno2 = MapModule.createAnnotation({
		latitude : -33.86365,
		pincolor : MapModule.ANNOTATION_BLUE,
		longitude : 151.21689,
		title : "Anno2",
		subtitle : "This is anno2",
		draggable : true
	});
	var anno3 = MapModule.createAnnotation({
		latitude : -33.85365,
		longitude : 151.20689,
		title : "Anno3",
		subtitle : "This is anno3",
		draggable : false
	});
	var anno4 = MapModule.createAnnotation({
		latitude : -33.86365,
		longitude : 151.22689,
		title : "Anno4",
		subtitle : "This is anno4",
		draggable : true
	});

	Ti.API.info("Latitude:" + anno.latitude);
	Ti.API.info("Title:" + anno.title);

	var map = MapModule.createView({
		userLocation : true,
		mapType : MapModule.NORMAL_TYPE,
		animate : true,
		annotations : [anno, anno2, anno4],
		region : {
			latitude : -33.87365,
			longitude : 151.20689,
			latitudeDelta : 0.1,
			longitudeDelta : 0.1
		}, //Sydney
		top : '30%'
	});
	Ti.API.info("userLocation: " + map.userLocation);
	win.add(map);

	map.addEventListener('click', function(e) {
		Ti.API.info("Latitude: " + e.latitude);
		Ti.API.info("Source: " + e.clicksource);
	});
	var button = Ti.UI.createButton({
		top : 0,
		left : 0,
		title : "Go Mt. View"
	});
	button.addEventListener('click', function(e) {
		map.region = {
			latitude : 37.3689,
			longitude : -122.0353,
			latitudeDelta : 0.1,
			longitudeDelta : 0.1
		};
		//Mountain View
	});

	var button2 = Ti.UI.createButton({
		top : 0,
		right : 0,
		title : "add anno3"
	});
	button2.addEventListener('click', function(e) {
		map.addAnnotation(anno3);
	});

	var button3 = Ti.UI.createButton({
		top : 0,
		title : "rm anno3"
	});
	button3.addEventListener('click', function(e) {
		map.removeAnnotation(anno3);
	});

	var button4 = Ti.UI.createButton({
		top : '10%',
		title : "rm all"
	});
	button4.addEventListener('click', function(e) {
		map.removeAllAnnotations();
	});

	var button5 = Ti.UI.createButton({
		top : '10%',
		left : 0,
		title : "remove annos"
	});
	button5.addEventListener('click', function(e) {
		Ti.API.info(anno.getTitle());
		map.removeAnnotations(["Sydney", anno2]);
	});

	var button6 = Ti.UI.createButton({
		top : '10%',
		right : 0,
		title : "select anno2"
	});
	button6.addEventListener('click', function(e) {
		map.selectAnnotation(anno2);
	});
	map.selectAnnotation(anno2);
	var button7 = Ti.UI.createButton({
		top : '20%',
		left : 0,
		title : "desel anno2"
	});
	button7.addEventListener('click', function(e) {
		map.deselectAnnotation(anno2);
	});

	var button8 = Ti.UI.createButton({
		top : '20%',
		right : 0,
		title : "modify anno2"
	});
	button8.addEventListener('click', function(e) {
		anno2.title = "Hello";
		anno2.subtitle = "Hi there.";
		anno2.longitude = 151.27689;
	});

	win.add(button);
	win.add(button2);
	win.add(button3);
	win.add(button4);
	win.add(button5);
	win.add(button6);
	win.add(button7);
	win.add(button8);
	win.open();
}
Testing Steps: 1. Click on "Open MapModule" 2. Click on an annotation, it should be centered.

Comments

  1. Hieu Pham 2013-06-25

    PR: https://github.com/appcelerator/titanium_modules/pull/122 In Android map v2, default behavior is annotation will be centered when clicked. This is fixed with the above PR. This will be a behavior change from map v1, where clicking on an annotation will just move it enough to be fully on screen.
  2. Hieu Pham 2013-07-01

    https://github.com/appcelerator/titanium_modules/pull/122
  3. Ping Wang 2013-07-26

    SDK PR: https://github.com/appcelerator/titanium_mobile/pull/4495 https://github.com/appcelerator/titanium_mobile/pull/4496
  4. Eric Merriman 2013-08-15

    Verified fixed with: SDK 3.1.2.v20130814124556 Titanium Studio: 3.1.2.201308091617 Map v1 annotation moves enough to be fully visible, map v2 centers.

JSON Source