Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13778

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

    Details

      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.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                hpham Hieu Pham
                Reporter:
                egomez Eduardo Gomez (Inactive)
                Reviewer:
                Ping Wang
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-16422
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code