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)'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment