D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tmcw
Full window
Github gist
MapBox markers.js with random points a dynamic factory, and changing factories on the fly
<!DOCTYPE html> <html> <head> <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 { margin:0; padding: 0; } </style> </head> <body> <div id='map' style='width:960px;height:200px;'></div> <script> var rand = mapbox.markers.layer().url('random_geojson_points.geojson').factory(function(x) { var d = document.createElement('div'); d.setAttribute('class', 'mmg-default'); d.innerHTML = '-'; return d; }); function mixuprand() { rand.factory(function(x) { var d = document.createElement('div'); d.setAttribute('class', 'my-custom'); window.setInterval(function() { d.innerHTML = Math.random() > 0.5 ? '!' : '+'; }, 100); return d; }); } wax.tilejson('https://a.tiles.mapbox.com/v3/tmcw.boldness.jsonp', function(tj) { var m = new MM.Map('map', new wax.mm.connector(tj)) .setCenterZoom(new MM.Location(0, 0), 2); m.addLayer(rand); var ft = [{ 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-40.0, 30.0] }, 'properties': { 'name': 'Tom' } }]; var tomLayer = mapbox.markers.layer().factory(function(x) { var d = document.createElement('div'); d.setAttribute('class', 'my-custom'); d.innerHTML = x.properties.name; d.onclick = function() { alert('hi, ' + this.innerHTML); }; return d; }).features(ft); m.addLayer(tomLayer); }); </script> <style> .mmg-default { background:magenta; width:10px; height:10px; } .my-custom { position:absolute; background:#fffa96; } </style> </body>