Swello

Marine weather forecast mashup powered by NOAA and Forecast.io

Implementation

• Marine zone forecasts from NOAA found here are crawled using crawl-and-write-zone-links.js to get an index of available forecast zones.
• Each available forecast is parsed through parseForecastText.js. If a zone fails parsing, it is removed from the index of zones. This maintenance task is handled by write-zone-links-good.js
• Geo shape files found here representing each geographic forecast zone are converted to GeoJSON using mapshaper.org. This is required everytime NOAA updates their zones (very rare).
• GeoJSON is filtered down to forecast zones the parser can handle (there are a small amount that the parser can't handle). This is handled by write-zones-geometry-good.js
• Express API /api/marine takes zoneId
• URL gets looked up from available zone forecast index
• parseForecastText.js parses the forecast
• timestamps are generated for each forecast day
• Express API /api/forecast takes geo coordinates
• Calls Forecast.io DarkSky API and gets weather forecast
• Redux reducer takes timestamps from both forecasts (noaa and forecast.io) and mashes them together into one weather forecast object.
• ReactJS renders forecast with react-collapse and react-motion to make it pretty.
• Also powering this project
• CSS Modules
• Mapbox GL JS
• Wunderground API for animated weather radar
• Climacons by Adam Whitcroft
• Codeship.com for CI

Ocean Depth

Tampa Bay ocean depth data is shown in feet on the satellite map layer mapbox://styles/jcmuse/cikcm77hi007l9fm127xym4v1

Steps to add NOAA depth data to Mapbox style

• Download ENC chart from NOAA using the Interactive Chart catalog
• Use ogr's S-57 driver to convert to shapefile, e.g. ogr2ogr --config OGR_S57_OPTIONS RETURN_PRIMITIVES=ON,RETURN_LINKAGES=ON,LNAM_REFS=ON,SPLIT_MULTIPOINT=ON,ADD_SOUNDG_DEPTH=ON -nlt POINT25d US4FL10M.shp US4FL10M.000 SOUNDG Blog Post: Processing S57 soundings
• Open in a GIS editor tool, e.g. QGIS and convert meters to feet
• Upload shapefile to Mapbox Studio and add to style

How to run it

• see server.js and client.js config files
• enter tokens/keys from mapbox, forecast.io, and wunderground
• cd client && npm install && npm run start
• cd server && npm install && npm run serve
• Webpack dev server runs on http://localhost:8080 by default

Next Steps

• Celsius option
• Build React Native iOS/Android versions
• Implement auth so favorites can persist beyond local storage
• Get rid of inline functions (react/jsx-no-bind)