Examples Reference

Simple Map

Add a simple 2 layer map to the page.

<div id="map"></div>

@openlayers.addMap({});
-openlayers.addLayer({"name":"osm","type":"osm"});
-openlayers.addLayer({"name":"data","type":"vector"});

Include Openlayers styles

Make a style file, styles/reports.js

import {Circle, Fill, Stroke, Style} from 'ol/style.js';
export function reportStyle(feature, resolution) {
	return [
		new Style({

			fill: new Fill({
				color: [247,182,67,0.8]
			}),
			stroke: new Stroke({
				color: [0, 0, 0, 1],
				width: 2,
			})
		})
	]
}

Include it in your build

import {reportStyle} from '../../site/map-styles/reports';
window.styles={};
window.styles.reportStyle=reportStyle;

Select it for a layer

-openlayers.addLayer({"map":"map_1","name":"data","type":"vector","geojson":"memory.reportAPI.value.API.Response[{{memory.for0.value.index}}].map","style":"styles.reportStyle"});

Button to hide a DIV

Most UI related event involve clicking something and having an action performed and form a big part of ourthings. A simple example being to hide a bit of the UI when a button is click or expose something hidden and render a template

Hide from button

<div class="thing">Visible</div>
<button @elements.addClass({"targetId":".thing","class":"hidden"});>Hide</button>

A hovering class toggle

To emulate a css style hover you can combine two event to call a class toggle

<div id="hover" @elements.toggleClass({"targetId":"#hover","class":"over"},{"queueEvent":"mouseenter,mouseout"});>Hover</div>

Render template and show

This example forms the basis of a lot of the grunt work you will do with our things. Putting in new content to the page and displaying it to the user. That content can be the result of an API call, a template to dump out some client memory or just about anything

<script id="hello" type="text/html">Hello World</script>
<div class="thing hidden">Hidden</div>
<button @templates.render({"targetId":".thing","template":"#hello"}>Show</button>
	-elements.removeClass({"targetId":".thing","class":"hidden"});

Form values changed monitor

If you want to check if fields in a form have changed and highlight those fields plus the save button

<label for="orgName">Organisation Name</label>
<input type="text" class="functionMonitor" id="orgName" placeholder="My Organisation Ltd">
<button class="form-save"></button>

@elements.formActivityMonitor({"targetId":".functionMonitor","buttonId":".form-save","modifiedClass":"modified"},{"queueRun":"Instant"});

API Calls

Post request, execute and load response into session memory

@api.post({"url":"{{config.api}}api/","body":{"_token":"{{!memory.token.value}}","schema":"{{!memory.sub.value}}","app":"boundary","api":"reporting_api","action":"run_report","payload":{"scenario_id":"{{memory.selectedShare.value.scenario_id}}","report_name":"polling_district_shared_scenario_details"}}},{"memoryMode":"Session","memoryName":"reportAPI","queueRun":"Instant"});