With Leaflet integration brought by the v1 release of MapBox.js, it’s easy to add live data feeds as custom-styled layers on top of your custom MapBox maps. In this post, I go over using MapBox.js to power a Live Flood Warning site, which is powered by Weather Decision Technologies’ live weather feeds.
Following a choropleth map example, I created the blue polygon layer, which visualizes each county under flood warning, using client-side Javascript. This means that visitors will always have the most up to date information, as it is pulled from WDT each time the page loads.
Applying custom styles to the live data layer was simple with MapBox.js. For our alerts site, polygon opacity is scaled on how recent each alert was issued. This means that newer alerts are nearly opaque while alerts 24 hours or older approach full transparency - making newer, more critical information immediately eye-catching. All of these styles amounted to about 30 lines of javascript. Tooltips allow users to see exactly when warnings were issued and when they expire. Clicking on alerted counties zooms the user to that county for a closer look of where will be affected.
vargeojsonLayer=L.geoJson(data,{style:getStyle,onEachFeature:onEachFeature}).addTo(map);functiongetStyle(feature){return{weight:1,opacity:getOpacity(feature.properties.init_time),color:'#0077ff',fillOpacity:getOpacity(feature.properties.init_time),fillColor:'#0077ff'};console.log(getOpacity(feature.properties.init_time));}functiongetOpacity(d){varnow=newDate().getTime()/1000;return(now-d)>1440*60?0.1:(now-d)>720*60?0.2:(now-d)>180*60?0.3:(now-d)>120*60?0.4:(now-d)>60*60?0.5:(now-d)>30*60?0.6:(now-d)>10*60?0.7:(now-d)>5*60?0.8:(now-d)>1*60?0.9:1;}This is just one example of what could be possible with WDT weather available to MapBox users. You can get started with MapBox.js right away. Just sign up for free and checkout the MapBox.js example gallery for more inspiration for your maps.