Create a gist now

Instantly share code, notes, and snippets.

@geraldo /map.js
Created Feb 28, 2014

Embed
What would you like to do?
Download ZIP
Read data from Google Drive Spreadsheet and show on map using Leaflet. (http://leyseca.net/barrisicrisi/)
Raw
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)');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment