Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-4552] iOS: Z-Index on Map Annotations and Rooutes

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2011-08-12T14:11:12.000+0000
Affected Version/sRelease 1.7.1
Fix Version/sSprint 2011-32, Release 1.8.0
ComponentsiOS
Labelsmodule_map, qe-testadded
ReporterPedro Enrique
AssigneeSabil Rahim
Created2011-07-05T10:32:43.000+0000
Updated2014-06-19T12:46:12.000+0000

Description

Feature

This is a feature request to add z-index to the mapview's annotations and routes.

Problem

When annotations and routes come together, it is unpredictable which one will be on top.

Example Code

This is an example code from the customer requesting this feature
var testapp = {};
testapp.UI = {};

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();

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
});

(function() {
	
	// Googles polyline decoder
	function decodeLine(encoded) {
	  var len = encoded.length;
	  var index = 0;
	  var array = [];
	  var lat = 0;
	  var lng = 0;
	
	  while (index < len) {
	    var b;
	    var shift = 0;
	    var result = 0;
	    do {
	      b = encoded.charCodeAt(index++) - 63;
	      result |= (b & 0x1f) << shift;
	      shift += 5;
	    } while (b >= 0x20);
	    var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
	    lat += dlat;
	
	    shift = 0;
	    result = 0;
	    do {
	      b = encoded.charCodeAt(index++) - 63;
	      result |= (b & 0x1f) << shift;
	      shift += 5;
	    } while (b >= 0x20);
	    var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
	    lng += dlng;
	
	    array.push([lat * 1e-5, lng * 1e-5]);
	  }
	
	  return array;
	}

	
	testapp.UI.createPlaceMap = function(/*Object*/ _args) {
	    var v;
		v = Titanium.Map.createView({
			mapType: _args.mapType||Titanium.Map.STANDARD_TYPE,
			region: {
				latitude: _args.latitude||57.6790883208692,
				longitude: _args.longitude||11.987113952636719,
				latitudeDelta: _args.latitudeDelta||0.015,
				longitudeDelta: _args.longitudeDelta||0.015
			},
			top: _args.top||0, //200+60,
			left: _args.left||0,
			width: _args.width||'100%',
			height: _args.height||'100%',
			animate:true,
			userLocation:true,
			regionFit:true
		});

		function annotationClick(_e) {
			switch(_e.clicksource) {
				case "rightButton":
				case "title":
				case "annotation":
					v.fireEvent('annotationClick', { annotation: _e.annotation });
				break;
			}

		}

		var rp = [];
		var polyline = "gx}~IaxhhA_AHKsDW[A_A}DbAwVjB_OGaEjBqClBsDtDeCjDsC~EwArBsB~BcBxAwFpDOiBkVOJEd@fDuG~Da@wDm@d@uClC_DvFUTSaAgDlEyHpHcJ~Jg@Fg@]c@sDb@rDf@\\f@GeBvByB~DyFnGsJxJ}Ax@w@RZNH@_@vBiGhSyCvH~DfMp@kAq@jAnDfLjEzDf@@|BkAd@^~@hDpBzNlD_Bj@Ox@EZTJ~@j@A\\ZbAm@@xAvHgJhCuDxJ_JkAqH]o@RUTs@\\yBu@wOMEGmBnFcB|Cm@dHa@\\D]EkG\\YsHnE}GBm@tHyAThBTh@PJrAPzF|GfA\\lBLNYTGBaJVqFh@cBrAaBdBmGxAgHxDuWz@qCLuCe@cEe@eBN_@N{BvAmFbByEmBuKyAiMJcIxIsCSoDfDmBzCc@xK_AfEStC_@b@PLRHzClAM";
		var polylineArray = decodeLine(polyline);
		for(var i=0; i<polylineArray.length; i++) {
			rp.push({
				latitude: polylineArray[i][0],
				longitude: polylineArray[i][1]
			});
		}

		var routeData = {
			name: 'Route',
			color: '#6fb5e2',
			points: rp,
			width: 4
		};

		

		var places = [];
		places.push(Titanium.Map.createAnnotation({
			id: "stop1",
			latitude: 57.66535304545455,
			longitude: 12.010266780853271,
			title: "Stop 1",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop2",
			latitude: 57.680157,
			longitude: 12.0036,
			title: "Stop 2",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop3",
			latitude: 57.684402602337414,
			longitude: 11.998636722564697,
			title: "Stop 3",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop4",
			latitude: 57.69192959513693,
			longitude: 11.992749273777008,
			title: "Stop 4",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop5",
			latitude: 57.695699672340446,
			longitude: 11.98831021785736,
			title: "Stop 5",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop6",
			latitude: 57.6969180544713,
			longitude: 11.980089247226715,
			title: "Stop 6",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop7",
			latitude: 57.689663059537324,
			longitude: 11.973609030246735,
			title: "Stop 7",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop8",
			latitude: 57.68191620066136,
			longitude: 11.98360562324524,
			title: "Stop 8",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop9",
			latitude: 57.676876914304884,
			longitude: 11.989511847496033,
			title: "Stop 9",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));
		places.push(Titanium.Map.createAnnotation({
			id: "stop10",
			latitude: 57.674932141805016,
			longitude: 12.006458044052124,
			title: "Stop 10",
			rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
			image: 'images/MapMarker.png'
		}));


		v.addRoute(routeData);
		v.addAnnotations(places);



	    return v;
	};

	
})();
var map = testapp.UI.createPlaceMap({});

win1.add(map);

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
});

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  

tabGroup.open();

Comments

  1. Pedro Enrique 2011-07-14

    The customer has made a change to the following function in TiMapView.m and so far this has solved the issue.
       // mapView:didAddAnnotationViews: is called after the annotation views have been added and positioned in the map.
       // The delegate can implement this method to animate the adding of the annotations views.
       // Use the current positions of the annotation views as the destinations of the animation.
       - (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray *)views
       {
       	if (routeViews!=nil)
       	{
       		// re-enable and re-poosition the route display. 
       		for(NSObject* key in [routeViews allKeys])
       		{
       			TiMapRouteAnnotationView* routeView = [routeViews objectForKey:key];
       			[[routeView superview] sendSubviewToBack:routeView];
       			[routeView regionChanged]; // Don't know if this is needed?
       		}
       	}
       
       ... rest of function ...
       
  2. Sabil Rahim 2011-08-11

    pending pull #366
  3. Natalie Huynh 2011-11-17

    Pass: Tested with 1.8.0.1.v20111116185058 on iPad 2 4.3.5 iPod Touch 4.02 iPhone 4s 5.0

JSON Source