Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created July 9, 2012 18:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/3077915 to your computer and use it in GitHub Desktop.
Save tmcw/3077915 to your computer and use it in GitHub Desktop.
Loading features from google docs and supporting filtering
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
});
}
<!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