Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10289] Android: Unlike iOS, clicking on map outside the annotation does not deselect the annotation

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-09-12T18:49:10.000+0000
Affected Version/sRelease 2.1.1
Fix Version/sRelease 3.0.0, Sprint 2012-19 API, 2012 Sprint 19
ComponentsAndroid
LabelsSupportTeam, api, qe-testadded
ReporterVarun Joshi
AssigneePing Wang
Created2012-08-01T14:46:24.000+0000
Updated2013-07-22T09:18:10.000+0000

Description

Issue

In iOS, on clicking the selected annotation gets deselected by clicking anywhere on the mapview. But on Android, one has to click on the selected annotation again to deselect it. The native Android behavior imitates the iOS behavior.

Sample Code

{noformat} var win = Ti.UI.createWindow({ backgroundColor : 'white' }); win.open(); //create object instance, a parasitic subclass of Observable var self = Ti.UI.createView(); win.add(self); var mapObject = Titanium.Map.createView({ mapType : Titanium.Map.STANDARD_TYPE, animate : true, regionFit : true, userLocation : true, top : '150', height : '400dp', zoomEnabled : true, region : { latitude : 37.77501, longitude : -122.419, latitudeDelta : 0.01, longitudeDelta : 0.01 }, }); mapObject.addEventListener('click', function() { alert('map clicked'); }); var selectAnnotations = Ti.UI.createButton({ title : "Select Annotations", top : '0', }); var annotations = [] annotations[0] = Titanium.Map.createAnnotation({ animate : true, title : 'Citibank', subtitle : '#1', id : '1', pincolor : Titanium.Map.ANNOTATION_RED, latitude : parseFloat(37.776), longitude : parseFloat(-122.419), image : '/images/locPin.png' }); annotations[1] = Titanium.Map.createAnnotation({ animate : true, title : 'Citibank', subtitle : '#2', id : '2', pincolor : Titanium.Map.ANNOTATION_RED, latitude : parseFloat(37.77501), longitude : parseFloat(-122.419), image : '/images/locPin.png' }); annotations[2] = Titanium.Map.createAnnotation({ animate : true, title : 'Citibank', subtitle : '#3', id : '3', pincolor : Titanium.Map.ANNOTATION_RED, latitude : parseFloat(37.770), longitude : parseFloat(-122.419), image : '/images/locPin.png' }); annotations[3] = Titanium.Map.createAnnotation({ animate : true, title : 'Citibank', subtitle : '#4', id : '4', pincolor : Titanium.Map.ANNOTATION_RED, latitude : parseFloat(37.770), longitude : parseFloat(-122.43), image : '/images/locPin.png' }); mapObject.addAnnotation(annotations[0]); mapObject.addAnnotation(annotations[1]); mapObject.addAnnotation(annotations[2]); mapObject.addAnnotation(annotations[3]); self.add(mapObject); self.add(selectAnnotations); var thisObj = this; selectAnnotations.addEventListener('click', function(e) { mapObject.selectAnnotation(annotations[2], true); }); {noformat}

Comments

  1. Vishal Duggal 2012-08-07

    There is ambiguity in the way touch events will behave with the zoomControls set to toggle. This will be fixed after we fix TIMOB-9132 for the case where zoomControls are always visible or always hidden.
  2. Josh Roesslein 2012-08-20

    Varun, The idea is to replace the system controls with our own to resolve 9132. This also gives us the control needed to disable controls or just the fading behavior when you click on the map. This should then provide a way to work around the ambiguity of the map touch event.
  3. Karl Rowley 2012-08-24

    Assigning back to Neeraj pending fix of blocking issue.
  4. Blain Hamon 2012-09-05

    WRT Zoom controls and this behavior, the fix (if there is one) does not affect parity. I.e., Android has had both styles of functionality, natively, and changing the behavior to match iOS when the OS default is otherwise is probably undesirable from an end user PoV.
  5. Ping Wang 2012-09-07

    Steps for functional test: 1) Run the test case attached below. i) Click any annotation. The annotation is selected. A console log should show, eg:
       I/TiAPI   (25606):  ************** e.clicksource = pin
       I/TiAPI   (25606):  ************** e.latitude = 37.776
       I/TiAPI   (25606):  ************** e.longitude = -122.419
       I/TiAPI   (25606):  ************** e.title = Citibank
       I/TiAPI   (25606):  ************** e.subtitle = #1 #1 #1 #1 #1 #1 #1 #1
       
    ii) Click on the map outside of the selected annotation. The annotation should be deselected. A similar log should show in the console. iii) Select another annotation and then click anywhere on the annotation, eg "title", "subtitle", "pin". The annotation should not be deselected. A similar log shows in the console. 2) Run the test case without "hideAnnotationWhenTouchMap: true". The mapview and annotation should work the same as they are before this fix. i) Click any annotation. The annotation is selected. A similar log should show in the console. ii) Click on the map outside of the selected annotation. The annotation should not be deselected. iii) Click anywhere on the selected annotation except "pin". The annotation should not be deselected. A similar log shows in the console. iv) Click "pin" of the selected annotation. The annotation should be deselected. A similar log shows in the console.
       var win = Ti.UI.createWindow({
           backgroundColor : 'white'
       });
       win.open();
        
       //create object instance, a parasitic subclass of Observable
       var self = Ti.UI.createView();
       win.add(self);
       var mapObject = Titanium.Map.createView({
           mapType : Titanium.Map.STANDARD_TYPE,
           animate : true,
           regionFit : true,
           userLocation : true,
           top : '150',
           height : '400dp',
           zoomEnabled : true,
           hideAnnotationWhenTouchMap: true,
           region : {
               latitude : 37.77501,
               longitude : -122.419,
               latitudeDelta : 0.01,
               longitudeDelta : 0.01
           },
       });
       
       mapObject.addEventListener('click', function(e) {
           Ti.API.info("************** e.clicksource = " + e.clicksource);
           Ti.API.info("************** e.latitude = " + e.latitude);
           Ti.API.info("************** e.longitude = " + e.longitude);
           Ti.API.info("************** e.title = " + e.title);
           Ti.API.info("************** e.subtitle = " + e.subtitle);
       });
       
       
       var selectAnnotations = Ti.UI.createButton({
           title : "Select Annotations",
           top : '0',
       });
       var annotations = []
        
       annotations[0] = Titanium.Map.createAnnotation({
           animate : true,
           title : 'Citibank',
           subtitle : '#1 #1 #1 #1 #1 #1 #1 #1',
           id : '1',
           pincolor : Titanium.Map.ANNOTATION_RED,
           latitude : parseFloat(37.776),
           longitude : parseFloat(-122.419),
           leftButton : 'KS_nav_ui.png'
       });
        
       annotations[1] = Titanium.Map.createAnnotation({
           animate : true,
           title : 'Citibank',
           subtitle : '#2 #2 #2 #2 #2 #2 #2 #2',
           id : '2',
           pincolor : Titanium.Map.ANNOTATION_RED,
           latitude : parseFloat(37.77501),
           longitude : parseFloat(-122.419),
           rightButton: 'KS_nav_views.png'
       });
        
       annotations[2] = Titanium.Map.createAnnotation({
           animate : true,
           title : 'Citibank',
           subtitle : '#3 #3 #3 #3 #3 #3 #3 #3 #3',
           id : '3',
           pincolor : Titanium.Map.ANNOTATION_RED,
           latitude : parseFloat(37.770),
           longitude : parseFloat(-122.419),
           leftButton : 'KS_nav_ui.png'
       });
        
       annotations[3] = Titanium.Map.createAnnotation({
           animate : true,
           title : 'Citibank',
           subtitle : '#4 #4 #4 #4 #4 #4 #4 #4 #4',
           id : '4',
           pincolor : Titanium.Map.ANNOTATION_RED,
           latitude : parseFloat(37.770),
           longitude : parseFloat(-122.43),
           rightButton: 'KS_nav_views.png'
       });
        
       mapObject.addAnnotation(annotations[0]);
       mapObject.addAnnotation(annotations[1]);
       mapObject.addAnnotation(annotations[2]);
       mapObject.addAnnotation(annotations[3]);
        
       self.add(mapObject);
       self.add(selectAnnotations);
        
       var thisObj = this;
       selectAnnotations.addEventListener('click', function(e) {
           mapObject.selectAnnotation(annotations[2], true);
       });
       
  6. Ping Wang 2012-09-07

    PR https://github.com/appcelerator/titanium_mobile/pull/2885
  7. Tamila Smolich 2012-12-05

    Closing as fixed. Expected behavior is shown. Tested on: Titanium Studio, build: 3.0.0.201211301903 Titanium SDK, builds: 3.0.0.v20121204181658; 3.1.0.v20121203181001 Devices: Samsung Galaxy S III (4.0.4)

JSON Source