Wt.extensions

Wt is a C++ library for developing web applications.

Wt.extensions adds use of several popular Javascript libraries:

Leaflet

Plotly.js

Cesium

Examples

To run all the examples, this same set of parameters is used, as typical for any Wt application

./test_extensions --http-address=0.0.0.0 --http-port=8080  --docroot=.

In addition to these parameters, each example has a set of extra parameters, to load specific data to the example. The parameters for these examples are of the form

-t TEST: test number (1 to 9)
-d DATABASE: data file
-g GEOJSON: geojson file
-u DATABASE: data file
-z GEOJSON: data file

All examples run in a browser in port 8080

http://127.0.0.1:8080/

Washington DC 311 database (Leaflet)

Washington DC311 code (rodent complaints) occurrences for year 2016. The circle has a radius of 100 meters

demo

http://www.eden-earth.org:8082/

run

./test_extensions --http-address=0.0.0.0 --http-port=8081  --docroot=. -t 2 -d dc_311-2016.csv.s0311.csv -g ward-2012.geojson

Montgomery County schools (Leaflet)

This example shows Montgomery County, MD, schools, with a color rating. The red circles are Metro Read line stations. The county boundaries is read from .geoJSON files and shown as polygons.

demo

http://www.eden-earth.org:8086/

run

./test_extensions --http-address=0.0.0.0 --http-port=8080  --docroot=. -t 6 -d montgomery_county_schools.csv -g montgomery_county_boundary.json  -m wmata_stations.json -z md_maryland_zip_codes_geo.min.json

US states (Leaflet)

This example shows US states, with random colors. The topograghy is read from .geoJSON files.

demo

http://www.eden-earth.org:8083/

run

./test_extensions --http-address=0.0.0.0 --http-port=8080  --docroot=. -t 3 -g ../../../examples/test_extensions/data/gz_2010_us_040_00_20m.json

NASA ATMS HDF5 satellite data (Cesium)

The Advanced Technology Microwave Sounder (ATMS) is a NASA satellite that measures atmospheric temperature and moisture for weather forecasting, and its data is saved in HDF5. https://jointmission.gsfc.nasa.gov/atms.html HDF5 (Hierarchical Data Format) is a data format funded by NASA and its original use was to store NASA satellite data. https://www.hdfgroup.org/ This example shows HDF5 ATMS data (converted to JSON)

demo

http://www.eden-earth.org:8089/

run

./test_extensions --http-address=0.0.0.0 --http-port=8080  --docroot=. -t 9 -d TATMS_npp_d20141130_t1817273_e1817589_b16023_c20141201005810987954_noaa_ops.h5.star.json 

Dow Jones chart(Plotly)

This example shows a Plotly.js chart using data from Dow Jones Industrial Average index, read from a CSV file.

demo

http://www.eden-earth.org:8090/

run

./test_extensions --http-address=0.0.0.0 --http-port=8080  --docroot=. -t 10 -d DJI_2018_minor.3600.txt

Building Wt.extensions

Install dependencies

Linux Ubuntu

Install packages with

sudo apt-get install cmake
sudo apt-get install build-essential
sudo apt-get install python-dev

Mac OSX

Install Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install packages with

brew install cmake 

APIs

Usage of the Leaflet Wt class

The API supports 2 map tile providers: CartoDB and RRZE Openstreetmap-Server

cartoDB

RRZE Openstreetmap-Server

enum class tile_provider_t
{
  CARTODB, RRZE
};

Example of a map of Washington DC using CartoDB tiles

class MapApplication : public WApplication
{
public:
  MapApplication(const WEnvironment& env) : WApplication(env)
  {
    std::unique_ptr<WLeaflet> leaflet = cpp14::make_unique<WLeaflet>(tile_provider_t::CARTODB, 38.9072 -77.0369, 13);
    root()->addWidget(std::move(leaflet));
  }
};

API

void Circle(const std::string &lat, const std::string &lon);
void Polygon(const std::vector<double> &lat, const std::vector<double> &lon);