# Flo.w Reactive Data Framework

Flo.w RDF is a framework for building Flo.w web applications. It supports a declarative style of programming that allows a developer to build interactive geospatial web applications powered by the Flo.w ecosystem.

Flo.w RDF comprises a collection of reactive Web Components and a JavaScript API. Provided components include:

Input controls
Timer control
Maps
Charts
Data Tables
Gauges

Learn about important Flo.w RDF Concepts and see Using Flo.w RDF for information on how to get started using Flo.w RDF in your own applications.

An simple example of a Flo.w RDF application is shown below. Click 'Show code' to view the code of the application or click the icon to open in the CodePen (opens new window) online editor.

<style>
/* Stack zoom buttons */
.zoom-button {
  display: block;
  margin-bottom: 5px;
}

/* Left drawer header */
div[slot="header"] h2 {
  margin: 8px 16px;
  font-size: 20px;
  border: none;
}
</style>

<html>
<flow-drawer-container class="flow-theme-dark" style="height: 450px;">

<flow-drawer position="start" side-tab open>
  <!-- Left drawer header -->
  <div slot="header">
    <h2>London Air Quality</h2>
  </div>

  <!-- Left drawer lists -->
  <flow-list-group>
    <flow-list-header icon="fas-map">Mapping</flow-list-header>
    <flow-list selection-state="$enabledLayers">
      <flow-list-item type="checkbox" value="airquality">Air Quality</flow-list-item>
      <flow-list-item type="checkbox" value="labels">Labels</flow-list-item>
    </flow-list>
  </flow-list-group>

  <!-- Left drawer footer -->
  <div slot="footer">
    <flow-timer static #timer update-interval="5 seconds" minor-step="24 hours" major-step="1 week" timer-state="$time">
    </flow-timer>
  </div>
</flow-drawer>

<!-- Flow Map -->
<flow-map id="map1" map-style="osm-bright" center="-0.2,51.5,10" style="height: 100%;">

  <!-- Airquality Data Source -->
  <flow-map-data-source name="no2" type="geojson" src="airquality">
  </flow-map-data-source>

  <!-- Circle Layer -->
  <flow-map-layer name="circles" type="circle" source="no2">
    circle-color: @no2 ? from-palette('OrRd', @no2, 0, 100) : gray;
    circle-radius: @no2 ? @no2 / 5 : 5;
    visibility: in('airquality', $enabledLayers);
  </flow-map-layer>

  <!-- Labels layer -->
  <flow-map-layer name="labels" type="symbol" source="no2" min-zoom="10">
    text-field: @name;
    text-size: interpolate(linear(), zoom(), 12, 10, 18, 20);
    text-color: black;
    text-halo-color: white;
    text-halo-width: 1;
    text-variable-anchor: ['top'];
    text-radial-offset: 1.8;
    visibility: in('labels', $enabledLayers);
  </flow-map-layer>

  <!-- Map Controls -->
  <div slot="bottom-left">
    <flow-fab class="zoom-button" compact square icon="fas-plus" onclick="map1.zoomBy(1);"></flow-fab>
    <flow-fab class="zoom-button" compact square icon="fas-minus" onclick="map1.zoomBy(-1);"></flow-fab>
  </div>

  <!-- Map popup template -->
  <div class="popup" slot="popup">
    <flow-data-table data="$selectedFeature" no-scroll wrap>
      <flow-data-column width="104px" name="Property" property="key"></flow-data-column>
      <flow-data-column name="Value" property="value"></flow-data-column>
    </flow-data-table>
  </div>

</flow-map>
</flow-drawer-container>
</html>

<script>
// Set initial enabledLayers
context.state.set('enabledLayers', ['airquality']);

// Add click handler to open map popup
map1.addEventListener('flowMapClick', async ev => {
  const features = ev.detail.features;
  if (features[0]) {
    context.state.set('selectedFeature', features[0].properties);
    map1.openPopup(features[0].geometry.coordinates);
  } else {
    context.state.set('selectedFeature', null);
  }
});
</script>

Application State →