Scrollview with editable Mapview Under

map_list.js

(function() {
	 HeritageApp.ui.createMapListWindow = function () {
        var mapListWindow = Titanium.UI.createWindow({
            id: 'mapListWindow',
            title: 'Heritage',
			backgroundColor: '#efece9',
            barImage: HeritageApp.ui.barImage,
            navBarHidden: false,
            fullscreen: false
        });

        // create search bar
        var search = Titanium.UI.createSearchBar({
		    hintText:'Where are you?',
		    barColor: '#ccc',
		    showCancel:false,
		    height:43,
		    top:0
		});

		search.addEventListener("focus", function() {
		    search.showCancel = true;
		});

		search.addEventListener("blur", function() {
		    search.showCancel = false;
		});

		search.addEventListener('cancel', function(e) {
		    search.blur();
		});


        // create map view
        var mapview = Titanium.Map.createView({
        	mapType: Titanium.Map.STANDARD_TYPE,
        	region: {
        		latitude: HeritageApp.geo.latitude,
        		longitude: HeritageApp.geo.longitude,
        		latitudeDelta:0.04,
        		longitudeDelta:0.04
        	},
        	animate:true,
        	regionFit:true,
        	userLocation:true,
        	height: 200,
        	top: 43
        });

        var scrollView = Titanium.UI.createScrollView({
		    contentWidth:'auto',
		    contentHeight:'auto',
		    layout:'vertical',
		    top:0,
		    showVerticalScrollIndicator:true,
		    showHorizontalScrollIndicator:true
		});
		var blankView = Ti.UI.createView({
		    backgroundColor: 'transparent',
		    height: 243,
		    touchEnabled: false,
		    top: 0
		});
		var view = Ti.UI.createView({
		    backgroundColor: '#efece9',
		    top: 0
		});
		// create table view
        var item = new Item();
		var data = [];
		var mapData = [];

    	var timer = setInterval(function(){
    		if(HeritageApp.geo.hasGeo == true) {
    			mapview.region = {
	        		latitude: HeritageApp.geo.latitude,
	        		longitude: HeritageApp.geo.longitude,
	        		latitudeDelta:0.04,
	        		longitudeDelta:0.04
	        	}
    			fetchTableData();
    		}
    	}, 100);

        fetchTableData = function() {
        	var latitude = Ti.App.properties.getString('latitude');
	        var longitude = Ti.App.properties.getString('longitude');
        	var earthRadius = 6370.998685023;	// Radius of earth in km
			var distanceKM = 30 / 0.621;
			var latitudeFrom = latitude * (Math.PI / 180);
			var longitudeFrom = longitude * (Math.PI / 180);

			var rows = item.getByDistance(latitude, longitude);
			view.height = rows.length * 55;
			Ti.API.info(rows.length);
			for ( var i=0, len=rows.length; i<len; ++i ){
				Ti.API.info('ID: ' + rows[i].id + ' Title: ' + rows[i].title);
				
				var latitudeTo = rows[i].latitude * (Math.PI / 180);
				var longitudeTo = rows[i].longitude * (Math.PI / 180);
				var a = Math.pow(Math.sin((latitudeTo - latitudeFrom) / 2), 2) + (Math.cos(latitudeFrom) * Math.cos(latitudeTo) * Math.pow(Math.sin((longitudeTo - longitudeFrom) / 2), 2));
				var placeDistance = (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))) * earthRadius;

				var tableViewDataItem = Ti.UI.createTableViewRow({
					selectedBackgroundColor: '#cccccc',
					height: 55
				});
				var annotationDataItem = Titanium.Map.createAnnotation({
				    latitude:rows[i].latitude,
				    longitude:rows[i].longitude,
				    animate:true,
				    rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
				    title: rows[i].title,
				    subtitle: rows[i].county,
				});
				var title = Ti.UI.createLabel({
					color:'#000000',
					font:{fontWeight:'bold',fontSize:18},
					left:70,
					top:5,
					height:30,
					text: rows[i].title
				});
				var subTitle = Ti.UI.createLabel({
					color:'#bcbcbc',
					font:{fontWeight:'bold',fontSize:12},
					left:70,
					top:20,
					height:30,
					text: Math.round((placeDistance * 0.621)*100) / 100 + ' miles'
				});
				
				var photo = Ti.UI.createImageView({
					width: 60,
					height: 60,
				});
				var imageURL = 'http://uploads.heritage-app.com.s3.amazonaws.com/static/iphone/'+ rows[i].id +'.jpg';
				HeritageApp.ui.cachedImageView('iphone', imageURL, photo);
				
				/*
				var blob = photo.toImage();
				 
				// Turn blob into a square thumbnail
				blob = blob.imageAsThumbnail(64);
				 
				// Create new imageView for thumbnail
				var thumbnailImageView = Ti.UI.createImageView({
				   image: blob
				});
				*/
				var photoView = Ti.UI.createView({
					backgroundColor: '#ffffff',
					left:10,
					height:40,
					width:40,
					top:0,
					bottom:0,
					borderColor: '#FFFFFF',
					borderWidth: 3, 
					borderRadius: 20
				});
				photoView.add(photo);
				
				tableViewDataItem.add(title);
				tableViewDataItem.add(subTitle);
				tableViewDataItem.add(photoView);

				data.push(tableViewDataItem);
				mapData.push(annotationDataItem);

				mapview.annotations = mapData;
				tableview.setData(data);
				if(HeritageApp.geo.hasGeo == true) {
					clearInterval(timer);
				};
			}
        };

		var tableview = Titanium.UI.createTableView({
			top: 0,
			data:data,
			backgroundColor: '#efece9',
			scrollable: false,
			shadow:{
				shadowRadius:3,
				shadowOpacity:0.5,
				shadowOffset:{x:0, y:-3}
			}
		});

		view.add(tableview);


		mapListWindow.add(search);
		mapListWindow.add(mapview);
		scrollView.add(blankView);
		scrollView.add(view);

        mapListWindow.add(scrollView);

        return mapListWindow;
    };
})();