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

iOS: Map setAnnotation image doesn't work properly +1.8.2

    Details

    • Type: Bug
    • Status: Closed
    • Priority: High
    • Resolution: Invalid
    • Affects Version/s: Release 2.0.0, Release 1.8.2
    • Fix Version/s: None
    • Component/s: iOS
    • Labels:
    • Environment:

      Product: Mobile
      Titanium SDK: Mobile 1.8.x, 1.9, 2.0
      Platform OS: iOS
      Platform OS Version: 4.3

      Description

      Issue

      setAnnotations method doesn't work properly starting from Titanium SDK 1.8.2

      Titanium API

      http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Map.View.setAnnotations-method.html

      Steps to reproduce

      1. Throw to an app.js code below or import the attached project into Studio - Annotation.zip
      2. There's a map with 4 annotations, the first one has another image (a pin) than the other three (Titanium logo).
      3. By pressing one of the update buttons the corresponding annotation should get the pin image.

      Expected behavior

      Annotation image is set as per annotation being set (This works with Mobile SDK 1.7.5, 1.8.0.1)

      Unexpected behavior

      Annotation images are not set properly (not with 1.8.2, 1.9, 2.0)

      Repro sequence

      app.js

      // this sets the background color of the master UIView (when there are no windows/tab groups on it)
      Titanium.UI.setBackgroundColor('#000');
       
      // create tab group
      var tabGroup = Titanium.UI.createTabGroup();
       
       
      var mountainView1 = Titanium.Map.createAnnotation({
          latitude:37.390749,
          longitude:-122.081651,
          // title:"Appcelerator Headquarters",
          subtitle:'Mountain View, CA',
          image:'map_pin.png',
          animate:true,
          leftButton: '../images/appcelerator_small.png',
          myid:1 // Custom property to uniquely identify this annotation.
      });
       
      var mountainView2 = Titanium.Map.createAnnotation({
          latitude:37.380749,
          longitude:-122.071651,
          // title:"Appcelerator Headquarters",
          subtitle:'Mountain View, CA',
          image:'appicon.png',
          animate:true,
          leftButton: '../images/appcelerator_small.png',
          myid:1 // Custom property to uniquely identify this annotation.
      });
       
      var mountainView3 = Titanium.Map.createAnnotation({
          latitude:37.370749,
          longitude:-122.061651,
          // title:"Appcelerator Headquarters",
          subtitle:'Mountain View, CA',
          image:'appicon.png',
          animate:true,
          leftButton: '../images/appcelerator_small.png',
          myid:1 // Custom property to uniquely identify this annotation.
      });
       
      var mountainView4 = Titanium.Map.createAnnotation({
          latitude:37.360749,
          longitude:-122.051651,
          title:"Appcelerator Headquarters",
          subtitle:'Mountain View, CA',
          image:'appicon.png',
          animate:true,
          leftButton: '../images/appcelerator_small.png',
          myid:1 // Custom property to uniquely identify this annotation.
      });
       
      var arr = [mountainView1, mountainView2, mountainView3, mountainView4];
       
      var mapview = Titanium.Map.createView({
          mapType: Titanium.Map.STANDARD_TYPE,
          region: {latitude:37.375749, longitude:-122.066651, 
                  latitudeDelta:0.01, longitudeDelta:0.01},
          animate:true,
          regionFit:true,
          userLocation:true,
          annotations:arr
      });
       
      var btnUpdate1 = Titanium.UI.createButton({
         title: 'Update anno 1',
         top: 1,
         left:0,
         width: 80,
         height: 50
      });
      btnUpdate1.addEventListener('click',function(e)
      {
         updateAnnotations( 0 );
      });
       
      var btnUpdate2 = Titanium.UI.createButton({
         title: 'Update anno 2',
         top: 1,
         left:80,
         width: 80,
         height: 50
      });
      btnUpdate2.addEventListener('click',function(e)
      {
         updateAnnotations( 1 );
      });
       
      var btnUpdate3 = Titanium.UI.createButton({
         title: 'Update anno 3',
         top: 1,
         left:160,
         width: 80,
         height: 50
      });
      btnUpdate3.addEventListener('click',function(e)
      {
         updateAnnotations( 2 );
      });
       
      var btnUpdate4 = Titanium.UI.createButton({
         title: 'Update anno 4',
         top: 1,
         left:240,
         width: 80,
         height: 50
      });
      btnUpdate4.addEventListener('click',function(e)
      {
         updateAnnotations( 3 );
      });
       
      //
      // create base UI tab and root window
      //
      var win1 = Titanium.UI.createWindow({  
          title:'Tab 1',
          backgroundColor:'#fff'
      });
      var tab1 = Titanium.UI.createTab({  
          icon:'KS_nav_views.png',
          title:'Tab 1',
          window:win1
      });
       
      mapview.add(btnUpdate1, btnUpdate2, btnUpdate3, btnUpdate4);
      win1.add(mapview);
       
      //
      // create controls tab and root window
      //
      var win2 = Titanium.UI.createWindow({  
          title:'Tab 2',
          backgroundColor:'#fff'
      });
      var tab2 = Titanium.UI.createTab({  
          icon:'KS_nav_ui.png',
          title:'Tab 2',
          window:win2
      });
       
      var label2 = Titanium.UI.createLabel({
      	color:'#999',
      	text:'I am Window 2',
      	font:{fontSize:20,fontFamily:'Helvetica Neue'},
      	textAlign:'center',
      	width:'auto'
      });
       
      win2.add(label2);
       
       
       
      //
      //  add tabs
      //
      tabGroup.addTab(tab1);  
      tabGroup.addTab(tab2);  
       
       
      // open tab group
      tabGroup.open();
       
      /**
       * @description Updates the image of a map annotation when user scrolls through the detail views below the map.
       * @param {Number} _i Annotations array index (MUST correspond with scrollable view pages index).
       * @returns {null}
       */
      function updateAnnotations( _i ) {
      	for (var i=0, l=arr.length; i < l; i++) {
      		if ( i == _i) {
      			arr[i].image = 'map_pin.png';
      			// arr[_i].setImage( CM.global.DIR_RES_ICONS + 'map_pin_aktiv.png' );
      		} else{
      			arr[i].image = 'appicon.png';
      		};
      	};
       
      	mapview.setAnnotations( arr );
      };
      

        Attachments

        1. AnnotationImage1.jpg
          AnnotationImage1.jpg
          55 kB
        2. Annotations.zip
          3.48 MB
        3. appicon.png
          appicon.png
          4 kB
        4. map_pin.png
          map_pin.png
          2 kB
        5. missing_annotations.png
          missing_annotations.png
          280 kB

          Issue Links

            Activity

              People

              • Assignee:
                srahim Sabil Rahim
                Reporter:
                egomez Eduardo Gomez (Inactive)
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

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

                    Git Source Code