D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tmcw
Full window
Github gist
Loading features from google docs and supporting filtering
<!DOCTYPE html> <html> <head> <title>markers.js: simple markers for Modest Maps</title> <script type='text/javascript' src='https://mapbox.com/markers.js/dist/markers.min.js'></script> <script type='text/javascript' src='https://mapbox.com/markers.js/dist/markers.externals.js'></script> <link href='https://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('https://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>