Read data from Google Drive Spreadsheet and show on map using Leaflet. (http://leyseca.net/barrisicrisi/)
| 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