The purpose of this notebook is to draw a map from public data and demonstrate execution of a javascript code (not just a hyperlink) upon ward selection.

This can be expanded to select from a table using data from the selected ward.

Thanks to @mootari for some help, see

https://observablehq.com/@mootari/vega-lite-input-widget

// The field that should become the selection value.

const selectionField = "properties";

const bhamMap = vl.markGeoshape({"strokeWidth": "2", "stroke": "White",})

.data(bhamWardBoundaries)

.params([

{ name: "selected", select: { type: "point", fields: [selectionField]} },

])

// .transform({

// "calculate": "'https://www.google.com/search?q=' + datum.properties.WD21NM", "as": "url"

// })

.encode(

vl.tooltip({"field": "properties.WD21NM"}),

// This would be the alternative - to follow a hyperlink

//vl.href({"field": "url", "type": "nominal"})

)

.width(500)

.height(500);

// .render() returns a Promise that resolves to the chart element.

const element = await bhamMap.render();

// The whole Vega view instance.

const view = element.value;

// Wrap the Vega element so that we can set our own .value property.

const input = html`<div>${element}`;

// Listen to selection changes.

view.addSignalListener("selected", (signal, selection) => {

// Vega rewrites "." in the field path to "\."

const key = selectionField.replace(".", "\\.");

const items = selection[key];

// Update the viewof value and notify the Observable Runtime.

input.value = items[0].WD21NM

const outputField = document.querySelector('#outputField');

outputField.innerHTML = items[0].WD21CD + ":" + items[0].WD21NM;

//outputField.style.display = 'none';

input.dispatchEvent(new Event("input"));

});

return input;

wardToLAsWorkbook = FileAttachment("WD21_LAD21_UK_LU.xlsx").xlsx()

bhamWardToLAs = wardToLAsWorkbook.sheet(0, { headers: true }).filter(d => d.LAD21NM === 'Birmingham')

bhamWardCodes = bhamWardToLAs.map(({ WD21CD }) => WD21CD)

ukWardBoundaries = FileAttachment("Wards_(December_2021)_UK_BSC.geojson").json()

bhamWardBoundaries = ukWardBoundaries.features.filter(feature => bhamWardCodes.includes(feature.properties.WD21CD))