Created
July 9, 2012 18:02
-
-
Save tmcw/3077915 to your computer and use it in GitHub Desktop.
Loading features from google docs and supporting filtering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function mmg_google_docs(id, callback) { | |
if (typeof reqwest === 'undefined') { | |
throw 'CSV: reqwest required for mmg_csv_url'; | |
} | |
function response(x) { | |
var features = [], | |
latfield = '', | |
lonfield = ''; | |
if (!x || !x.feed) return features; | |
for (var f in x.feed.entry[0]) { | |
if (f.match(/\$Lat/i)) latfield = f; | |
if (f.match(/\$Lon/i)) lonfield = f; | |
} | |
for (var i = 0; i < x.feed.entry.length; i++) { | |
var entry = x.feed.entry[i]; | |
var feature = { | |
geometry: { | |
type: 'Point', | |
coordinates: [] | |
}, | |
properties: {} | |
}; | |
for (var y in entry) { | |
if (y === latfield) feature.geometry.coordinates[1] = parseFloat(entry[y].$t); | |
else if (y === lonfield) feature.geometry.coordinates[0] = parseFloat(entry[y].$t); | |
else if (y.indexOf('gsx$') === 0) { | |
feature.properties[y.replace('gsx$', '')] = entry[y].$t; | |
} | |
} | |
if (feature.geometry.coordinates.length == 2) features.push(feature); | |
} | |
return callback(features); | |
} | |
var url = 'https://spreadsheets.google.com/feeds/list/' + id + | |
'/od0/public/values?alt=json-in-script&callback=callback'; | |
reqwest({ | |
url: url, | |
type: 'jsonp', | |
jsonpCallback: 'callback', | |
success: response, | |
error: response | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>markers.js: simple markers for Modest Maps</title> | |
<script type='text/javascript' | |
src='http://mapbox.com/markers.js/dist/markers.min.js'></script> | |
<script type='text/javascript' | |
src='http://mapbox.com/markers.js/dist/markers.externals.js'></script> | |
<link href='http://mapbox.com/markers.js/dist/markers.css' | |
rel='stylesheet' type='text/css' /> | |
<style> | |
body { font: 14px/20px 'Helvetica', 'Helvetica Neue'; background:#eee; } | |
#map { | |
position:absolute; | |
top:0; | |
left:0; | |
width:699px; | |
border-right:1px solid #000; | |
height:500px; | |
} | |
#options { | |
position:absolute; | |
top:0; | |
padding:10px; | |
left:700px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class='map' id='map'></div> | |
<div id='options'></div> | |
<script type='text/javascript' src='google_docs.js'></script> | |
<script type='text/javascript'> | |
wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.map-bzuvyug3.jsonp', | |
function(tj) { | |
var m = new MM.Map('map', new wax.mm.connector(tj)); | |
mmg_google_docs('0ApRKQU2Gi7CrdHBObkhYTEdLUGxvZjF3bXo3REppU0E', function(features) { | |
var types = {}; | |
types.All = true; | |
features = features.map(function(f) { | |
f.properties.title = f.properties.occupation, | |
f.properties.description = f.properties.incidenttype | |
types[f.properties.incidenttype] = true; | |
return f; | |
}); | |
var ml = mapbox.markers.layer() | |
.features(features); | |
m.addLayer(ml); | |
m.extent(ml.extent()); | |
mapbox.markers.interaction(ml); | |
for (var type in types) { | |
var input = document.getElementById('options').appendChild(document.createElement('input')); | |
input.type = 'radio'; | |
input.value = type; | |
input.id = type; | |
input.name = 'group'; | |
input.onchange = function() { | |
var that = this; | |
ml.filter(function(f) { | |
return (that.value === 'All') ? true : f.properties.incidenttype == that.value; | |
}); | |
} | |
var label = document.getElementById('options').appendChild(document.createElement('label')); | |
label.innerHTML = type; | |
label.setAttribute('for', type); | |
document.getElementById('options').appendChild(document.createElement('br')); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment