Read data from Google Drive Spreadsheet and show on map using Leaflet. (http://leyseca.net/barrisicrisi/)

map.js

var map = L.mapbox.map('map', 'geraldo.map-9fo9hnac').setView([41.722747, 1.825082], 8);

var cat11Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat1_bancos_tiempo.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat12Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat1_PAH_Obra_Social.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat21Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat2_hortsUrbans.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat22Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat2_somenergia.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat23Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat2_guifinet.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat31Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat3_fiare.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat32Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat3_grupsConsum.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});
var cat4Icon = L.icon({
	iconUrl: '/barrisicrisi/icons/cat4_espacios_autogestionados.png',
	iconSize:     [30, 30],
	iconAnchor:   [15, 30],
	popupAnchor:  [0, -30]
});

var markers = new L.MarkerClusterGroup({spiderfyDistanceMultiplier: 2.2, maxClusterRadius: 60, disableClusteringAtZoom: 11});	

var cat11 = new L.LayerGroup();
var cat12 = new L.LayerGroup();
var cat21 = new L.LayerGroup();
var cat22 = new L.LayerGroup();
var cat23 = new L.LayerGroup();
var cat31 = new L.LayerGroup();
var cat32 = new L.LayerGroup();
var cat4 = new L.LayerGroup();

//online from Google Maps
/*var geojson;
$.getJSON("crisis.geojson", function(json) {
	loadMarkersOffline(json);
});*/

//online from Google Maps
recline.Backend.GDocs.fetch({
  	url: 'https://docs.google.com/spreadsheet/ccc?key=0AnpWOY6ITtfIdGNOSjZMN0JVdDJ4SnVrbm1acFVWakE#gid=0'
})
  	.done(function(result) {
  		//console.log(result);
		loadMarkers(result.records);
});

function loadMarkers(json) {
	for (var i = 0; i < json.length; i++) {
		var a = json[i];
		var id = a.id;
		var title = a.title;
		var cat = a.category;
		var description = a.description;
		var source = a.source;
		var subcat = a.subcategory;
		var web = a.web;

		var color,icon;
		if (cat == 'solidaritat') { 
			color = '0d5ca8'; 
			if (subcat == 'banc') { 
				icon = cat11Icon;
			}
			else if (subcat == 'PAH') { 
				icon = cat12Icon;
			}
		}
		else if (cat == 'territori') { 
			color = '94c207'; 
			if (subcat == 'horts') { 
				icon = cat21Icon;
			}
			else if (subcat == 'somenergia') { 
				icon = cat22Icon;
			}
			else if (subcat == 'guifinet') { 
				icon = cat23Icon;
			}
		}
		else if (cat == 'economia') { 
			color = 'ca494f'; 
			if (subcat == 'fiare') { 
				icon = cat31Icon;
			}
			else if (subcat == 'grups') { 
				icon = cat32Icon;
			}
		}
		else if (cat == 'espais') { 
			color = '595959'; 
			icon = cat4Icon; 
		}

		var latitude = a.latitude;
		var longitude = a.longitude;
		console.log("["+id+"] "+title+":"+latitude+"|"+longitude);

		if (latitude != "" && longitude != "") {
			var marker = L.marker(new L.LatLng( latitude, longitude ), {
				icon: icon,
				title: title
			});
			marker.bindPopup('<h2>'+title+'</h2>'+description+'<br>web: '+web+'<br>category: '+cat+'<br>subcategory: '+subcat+'<br>source: '+source);

			if (cat == 'solidaritat') {
				if (subcat == 'banc') { 
					cat11.addLayer(marker);
				}
				else if (subcat == 'PAH') { 
					cat12.addLayer(marker);
				}
			}
			else if (cat == 'territori') {
				if (subcat == 'horts') { 
					cat21.addLayer(marker);
				}
				else if (subcat == 'somenergia') { 
					cat22.addLayer(marker);
				}
				else if (subcat == 'guifinet') { 
					cat23.addLayer(marker);
				}
			}
			else if (cat == 'economia') {
				if (subcat == 'Fiare') { 
					cat31.addLayer(marker);
				}
				else if (subcat == 'grups') { 
					cat32.addLayer(marker);
				}
			}
			else if (cat == 'espais') {
				cat4.addLayer(marker);
			}

			markers.addLayer(cat11);
			markers.addLayer(cat12);
			markers.addLayer(cat21);
			markers.addLayer(cat22);
			markers.addLayer(cat23);
			markers.addLayer(cat31);
			markers.addLayer(cat32);
			markers.addLayer(cat4);
		}
	}
	map.addLayer(markers);
}

function loadMarkersOffline(geojson) {
	for (var i = 0; i < geojson.features.length; i++) {
		var a = geojson.features[i].properties;
		var title = a.title;
		var cat = a.category;
		var description = a.description;
		var source = a.source;
		var subcat = a.subcategory;
		var web = a.web;

		var color,icon;
		if (cat == 'solidaritat') { 
			color = '0d5ca8'; 
			if (subcat == 'banc') { 
				icon = cat11Icon;
			}
			else if (subcat == 'PAH') { 
				icon = cat12Icon;
			}
		}
		else if (cat == 'territori') { 
			color = '94c207'; 
			if (subcat == 'horts') { 
				icon = cat21Icon;
			}
			else if (subcat == 'somenergia') { 
				icon = cat22Icon;
			}
			else if (subcat == 'guifinet') { 
				icon = cat23Icon;
			}
		}
		else if (cat == 'economia') { 
			color = 'ca494f'; 
			if (subcat == 'fiare') { 
				icon = cat31Icon;
			}
			else if (subcat == 'grups') { 
				icon = cat32Icon;
			}
		}
		else if (cat == 'espais') { 
			color = '595959'; 
			icon = cat4Icon; 
		}

		var coordinates = geojson.features[i].geometry.coordinates;
		var marker = L.marker(new L.LatLng(coordinates[1], coordinates[0]), {
		    icon: icon,
		    title: title
		});
		marker.bindPopup('<h2>'+title+'</h2>'+description+'<br>web: <a href="'+web+'">'+web+'</a><br>category: '+cat+'<br>subcategory: '+subcat+'<br>source: '+source);

		if (cat == 'solidaritat') {
			if (subcat == 'banc') { 
				cat11.addLayer(marker);
			}
			else if (subcat == 'PAH') { 
				cat12.addLayer(marker);
			}
		}
		else if (cat == 'territori') {
			if (subcat == 'horts') { 
				cat21.addLayer(marker);
			}
			else if (subcat == 'somenergia') { 
				cat22.addLayer(marker);
			}
			else if (subcat == 'guifinet') { 
				cat23.addLayer(marker);
			}
		}
		else if (cat == 'economia') {
			if (subcat == 'fiare') { 
				cat31.addLayer(marker);
			}
			else if (subcat == 'grups') { 
				cat32.addLayer(marker);
			}
		}
		else if (cat == 'espais') {
			cat4.addLayer(marker);
		}

		markers.addLayer(cat11);
		markers.addLayer(cat12);
		markers.addLayer(cat21);
		markers.addLayer(cat22);
		markers.addLayer(cat23);
		markers.addLayer(cat31);
		markers.addLayer(cat32);
		markers.addLayer(cat4);
	}
	map.addLayer(markers);
}

function selectLayer(cat) {
	var cats=new Array();
	$('input:checked').each(function(){
		cats.push($(this).val());
	});
	showLayers(cats);
	//select category
	if (cat == 1) $('#filter').find('input[value=cat1]').prop('checked', 'checked');
	if (cat == 2) $('#filter').find('input[value=cat2]').prop('checked', 'checked');
	if (cat == 3) $('#filter').find('input[value=cat3]').prop('checked', 'checked');
}
function selectSubcat(cat) {
	if (cat == 1) {
		var on = $('#filter').find('input[value=cat1]').is(':checked');
		var cb = '';
		if (on) cb = 'checked';
		$('#filter').find('input[value=cat11]').prop('checked', cb);
		$('#filter').find('input[value=cat12]').prop('checked', cb);
	}
	else if (cat == 2) {
		var on = $('#filter').find('input[value=cat2]').is(':checked');
		var cb = '';
		if (on) cb = 'checked';
		$('#filter').find('input[value=cat21]').prop('checked', cb);
		$('#filter').find('input[value=cat22]').prop('checked', cb);
		$('#filter').find('input[value=cat23]').prop('checked', cb);
	}
	else if (cat == 3) {
		var on = $('#filter').find('input[value=cat3]').is(':checked');
		var cb = '';
		if (on) cb = 'checked';
		$('#filter').find('input[value=cat31]').prop('checked', cb);
		$('#filter').find('input[value=cat32]').prop('checked', cb);
	}
	selectLayer();
}
function selectAll() {
	$('#filter').find(':checkbox').prop('checked', 'checked');
	showLayers(['cat11','cat12','cat21','cat22','cat23','cat31','cat32','cat4']);
}
function selectNone() {
	$('#filter').find(':checkbox').prop('checked', '');
	showLayers([]);
}

function showLayers(layers) {
console.log(layers);
	markers.clearLayers();
	for (var i = 0; i < layers.length; i++) {
		if (layers[i] == 'cat11') {
			markers.addLayer(cat11);
		}
		else if (layers[i] == 'cat12') {
			markers.addLayer(cat12);
		}
		else if (layers[i] == 'cat21') {
			markers.addLayer(cat21);
		}
		else if (layers[i] == 'cat22') {
			markers.addLayer(cat22);
		}
		else if (layers[i] == 'cat23') {
			markers.addLayer(cat23);
		}
		else if (layers[i] == 'cat31') {
			markers.addLayer(cat31);
		}
		else if (layers[i] == 'cat32') {
			markers.addLayer(cat32);
		}
		else if (layers[i] == 'cat4') {
			markers.addLayer(cat4);
		}

	}
	map.addLayer(markers);
	setMarkerColor();
}

function setMarkerColor() {
	var cat = new Array();
	cat[0] = $('#filter').find('input[value=cat1]').is(':checked');
	cat[1] = $('#filter').find('input[value=cat2]').is(':checked');
	cat[2] = $('#filter').find('input[value=cat3]').is(':checked');
	cat[3] = $('#filter').find('input[value=cat4]').is(':checked');
	
	var num = 0;
	for (var i=0; i<cat.length; i++) {
		if (cat[i]) num++;
	}

	if (num == 1) {
		if (cat[0]) {
			$('.marker-cluster-small').css('background-color', 'rgba(60, 115, 168, 0.6)');
			$('.marker-cluster-medium').css('background-color', 'rgba(60, 115, 168, 0.6)');
			$('.marker-cluster-large').css('background-color', 'rgba(60, 115, 168, 0.6)');
			$('.marker-cluster-small div').css('background-color', 'rgba(13, 92, 168, 0.6)');
			$('.marker-cluster-medium div').css('background-color', 'rgba(13, 92, 168, 0.6)');
			$('.marker-cluster-large div').css('background-color', 'rgba(13, 92, 168, 0.6)');
		}
		else if (cat[1]) {
			$('.marker-cluster-small').css('background-color', 'rgba(164, 194, 73, 0.6)');
			$('.marker-cluster-medium').css('background-color', 'rgba(164, 194, 73, 0.6)');
			$('.marker-cluster-large').css('background-color', 'rgba(164, 194, 73, 0.6)');
			$('.marker-cluster-small div').css('background-color', 'rgba(148, 194, 7, 0.6)');
			$('.marker-cluster-medium div').css('background-color', 'rgba(148, 194, 7, 0.6)');
			$('.marker-cluster-large div').css('background-color', 'rgba(148, 194, 7, 0.6)');
		}
		else if (cat[2]) {
			$('.marker-cluster-small').css('background-color', 'rgba(202, 141, 144, 0.6)');
			$('.marker-cluster-medium').css('background-color', 'rgba(202, 141, 144, 0.6)');
			$('.marker-cluster-large').css('background-color', 'rgba(202, 141, 144, 0.6)');
			$('.marker-cluster-small div').css('background-color', 'rgba(202, 73, 79, 0.6)');
			$('.marker-cluster-medium div').css('background-color', 'rgba(202, 73, 79, 0.6)');
			$('.marker-cluster-large div').css('background-color', 'rgba(202, 73, 79, 0.6)');
		}
		else if (cat[3]) {
			$('.marker-cluster-small').css('background-color', 'rgba(170, 170, 170, 0.6)');
			$('.marker-cluster-medium').css('background-color', 'rgba(170, 170, 170, 0.6)');
			$('.marker-cluster-large').css('background-color', 'rgba(170, 170, 170, 0.6)');
			$('.marker-cluster-small div').css('background-color', 'rgba(89, 89, 89, 0.6)');
			$('.marker-cluster-medium div').css('background-color', 'rgba(89, 89, 89, 0.6)');
			$('.marker-cluster-large div').css('background-color', 'rgba(89, 89, 89, 0.6)');
		}
	} else if (num > 1) {
		$('.marker-cluster-small').css('background-color', 'rgba(241, 211, 87, 0.6)');
		$('.marker-cluster-medium').css('background-color', 'rgba(241, 211, 87, 0.6)');
		$('.marker-cluster-large').css('background-color', 'rgba(241, 211, 87, 0.6)');
		$('.marker-cluster-small div').css('background-color', 'rgba(240, 194, 12, 0.6)');
		$('.marker-cluster-medium div').css('background-color', 'rgba(240, 194, 12, 0.6)');
		$('.marker-cluster-large div').css('background-color', 'rgba(240, 194, 12, 0.6)');
	}
}