D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tmcw
Full window
Github gist
Interesting Storms from the Darksky API
<!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:960px; height:500px; } .simplestyle-marker { transform:rotate(180); } </style> </head> <body> <div class='map' id='map'> </div> <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)); wax.tilejson('https://darksky-proxy.herokuapp.com/interesting/', function(features) { storms = features.storms.map(function(f) { var gj = { properties: { title: f.city, description: '<a href="https://forecast.weather.gov/MapClick.php?lat=' + f.latitude + '&lon=' + f.longitude + '&site=okx&unit=0&lg=en&FcstType=text">on noaa</a>', 'marker-color': '#3D5982', 'marker-size': 'small' }, geometry: { coordinates: [ f.longitude, f.latitude ] } }; return gj; }); var ml = mapbox.markers.layer() .features(storms); m.addLayer(ml); m.extent(ml.extent()); mapbox.markers.interaction(ml); }); }); </script> </body> </html>