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.
selecting a map pin pops up an annotation that runs off the edge of the screen,
the map should move so that the annotation title and subtitle are fully visible.
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.
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.
https://github.com/appcelerator/titanium_modules/pull/122
SDK PR: https://github.com/appcelerator/titanium_mobile/pull/4495 https://github.com/appcelerator/titanium_mobile/pull/4496
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.