viewof mainMap = Flow.map({
id: "main-map",
center: [-0.1, 51.5],
zoom: 10,
height: "500px",
timer: true // Display a timer control on the map
})
Public
Edited
Jul 31
1 star
<flow-ui-alert variant="success" open>Welcome to Flo.w RDF v4</flow-ui-alert>
{
const button = html`<flow-ui-button variant="primary">Click Me</flow-ui-button>`;
button.addEventListener("click", () =>
console.log("Hello from Flo.w RDF UI")
);
return button;
}
<div>
<flow-ui-icon name="fas-house"></flow-ui-icon>
<flow-ui-icon name="fas-gear"></flow-ui-icon>
<flow-ui-icon name="fas-heart"></flow-ui-icon>
<flow-ui-icon name="unknown"></flow-ui-icon>
</div>
viewof timeVal = Flow.bindControl(html`<flow-ui-timer running style="width: 300px;"><flow-ui-timer>`)
timeVal
viewof rangeVal = Flow.bindControl(
html`<flow-ui-range style="width: 300px;"></flow-ui-range>`,
"flow-ui-input"
)
rangeVal
viewof inputVal = Flow.bindControl(
html`<input placeholder="Enter a value"></input>`,
"input"
)
inputVal
viewof qb = Flow.queryBuilder(qbConfig, {
condition: "and",
rules: [{ enabled: true }]
})
qbConfig = Flow.queryBuilderConfig({
datasetId: "airquality",
size: "small",
// Extra fields or overrides
fields: {
field1: { name: "Field 1", type: "string" }
}
})
console.log(qbConfig)
Flow.ui.flowQueryConverter(qb, qbConfig)
Flow.ui.mapLayerFilterConverter(qb, qbConfig)
popupTemplate = {
// Popup header template
const popupHeaderTemplate = (title) => Flow.html`<h4>${title}</h4>`;
// Table header template
const tableHeaderTemplate = () =>
Flow.html`<thead><tr><th>Property</th><th>Value</th></tr></thead>`;
// Property row template
const rowTemplate = (props, key) =>
Flow.html`<tr><td>${key}</td><td>${props[key]}</td></tr>`;
// Main popup template
return (feature) => Flow.html`
${popupHeaderTemplate(feature.properties.name)}
<table>
${tableHeaderTemplate()}
${Object.keys(feature.properties)
.filter((key) => key !== "name")
.map((key) => rowTemplate(feature.properties, key))}
</table>
`;
}
{
mainMap.popupPlugin.registerPopup("popup", {
content: popupTemplate
});
const source = new Flow.MapDataSource({
id: "airquality",
type: "vector",
src: "airquality",
featureId: "label"
});
const circleLayer = new Flow.MapLayer({
id: "circle-layer",
type: "circle",
source: "airquality",
style: Flow.layerStyle("circle")
.circleColor(
Flow.expr(`@no2 ? from-palette('YlOrRd', @no2, 0, 100) : gray`)
)
.circleStrokeWidth(Flow.expr("@@hover ? 5 : 0"))
.circleRadius(Flow.expr(`@no2 ? @no2 / 5 : 5`))
.build()
});
const symbolStyle = Flow.layerStyle("symbol")
.visibility(true)
.textField(Flow.expr("@name"))
.textColor("white")
.textSize(Flow.expr("interpolate(linear(), zoom(), 10, 10, 15, 20)"))
.textVariableAnchor(["top", "left"])
.textRadialOffset(0.5)
.build();
const symbolLayer = new Flow.MapLayer({
id: "symbol-layer",
type: "symbol",
source: "airquality",
interactive: false,
style: symbolStyle
});
mainMap.transaction(() => {
mainMap.addSource(source);
mainMap.addLayer(circleLayer);
mainMap.addLayer(symbolLayer);
});
mainMap.selectionPlugin.enableSelection("airquality", {
mode: "multi",
popup: "popup"
});
}
Flow.mapClickedFeature(mainMap)
Flow.mapSelection(mainMap, "airquality")
time = Flow.stateGet("time")
viewof selectedNumber = Inputs.range([0, 10], {
label: "Select a value:",
step: 0.5
})
Flow.stateSet("numberVal", selectedNumber)
num = Flow.stateGet("numberVal")
Flow.datasetSummary("airquality", { headingLevel: 4 })
viewof selected = Flow.datasetQueryTable({ datasetId: "airquality" })
config = {
return {
host: "https://flow.flow-ng.emu-analytics.net",
apiKey: "f7748763-e75f-4a79-a40a-92148855da49",
state: {
numberVal: 0,
time: new Date().toISOString(),
timerRunning: true
},
enableDebug: true,
version: "^4.0.4"
};
}
Flow
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
