The avatar for @cassdavid
David Cass
Web content at the Houses of the Oireachtas
Public
Edited
Dec 23, 2024
Importers
2
Insert cell
Insert cell
//constituenciesFromAPI = fetch(`https://data-osi.opendata.arcgis.com/datasets/osi::constituency-boundaries-ungeneralised-national-electoral-boundaries-2023.geojson?where=1=1&outSR=%7B%22latestWkid%22%3A2157%2C%22wkid%22%3A2157%7D`).then((response) => response.json())
Insert cell
Insert cell
Insert cell
Insert cell
constituencyMapExperimentClickable34 = {
const container = yield htl.html`<div style="height: 600px;">`;
const map = L.map(container);
const constituencylayer = L.geoJSON(filtered).addTo(map);
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.ENG_NAME_VALUE) {
layer.bindTooltip(feature.properties.ENG_NAME_VALUE);
}
}

function myStyle(feature) {
return {
fillColor: "yellow",
weight: 2,
opacity: 1,
color: "grey",
dashArray: 1,
fillOpacity: 0.1
};
}
//function onLocationFound(e) {
//var radius = e.accuracy;

//L.marker(e.latlng).addTo(map)
// .bindPopup("Your current location").openPopup();

//L.circle(e.latlng, //radius
// ).addTo(map);

//}
function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 1,
color: "",
dashArray: "",
fillOpacity: 0.01
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
filtered.resetStyle(e.target);
}

L.geoJSON(filtered, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function (feature, layer) {
return feature.properties.CON_SEAT_;
}
}).addTo(map);
map.fitBounds(constituencylayer.getBounds(), { maxZoom: 19 });
//map.locate({setView: false, maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
turf = require("https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js")
Insert cell
//viewof constituencyPicker = Inputs.select(Array.from(constituencyNames).map(d => d).sort(d3.ascending), {label: "Choose a constituency", width: 800})
Insert cell
Insert cell
filtered = constituenciesFromAPI.features.filter(d => d.properties.ENG_NAME_VALUE == `${selectConstituency.id}`)
Insert cell
constituencyMapExperimentClickable = {
const container = yield htl.html`<div style="height: 600px;">`;
const map = L.map(container);
const constituencylayer = L.geoJSON(constituenciesFromAPI).addTo(map);
function onLocationFound(e) {
var userLocation = e.latlng;
var radius = e.accuracy;
var userConstituency = "Unknown Constituency"; // Default message

// Loop through constituencies to find the user's constituency
constituenciesFromAPI.features.forEach((feature) => {
// Convert GeoJSON to a Leaflet polygon layer
const layer = L.geoJSON(feature);

// Check if the user's location is within this constituency polygon
layer.eachLayer(function (polygonLayer) {
if (
polygonLayer instanceof L.Polygon &&
polygonLayer.getBounds().contains(userLocation)
) {
if (L.GeometryUtil.inside(userLocation, polygonLayer)) {
userConstituency = feature.properties.ENG_NAME_VALUE;
}
}
});
});

// Display user's location with the constituency name
L.marker(userLocation)
.addTo(map)
.bindPopup(`You are here in ${userConstituency}`)
.openPopup();

L.circle(userLocation, radius).addTo(map);
}

function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.ENG_NAME_VALUE) {
layer
.bindTooltip(feature.properties.ENG_NAME_VALUE.slice(0, -4))
.openPopup(feature.properties.ENG_NAME_VALUE.slice(0, -4));
}
}

function myStyle(feature) {
return {
fillColor: "yellow",
weight: 2,
opacity: 1,
color: "grey",
dashArray: 1,
fillOpacity: 0.1
};
}

function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 1,
color: "",
dashArray: "",
fillOpacity: 0.01
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
constituenciesFromAPI.resetStyle(e.target);
}
map.on("locationfound", onLocationFound);

L.geoJSON(constituenciesFromAPI, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function (feature, layer) {
return feature.properties.ENG_NAME_VALUE;
}
}).addTo(map);
map.fitBounds(constituencylayer.getBounds(), { maxZoom: 19 });
map.locate({ setView: true, maxZoom: 9 });
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
constituencyMapExperimentClickable1 = {
const container = yield htl.html`<div style="height: 600px;">`;
const map = L.map(container);
const constituencyLayer = L.geoJSON(constituenciesFromAPI).addTo(map);

function onLocationFound(e) {
var userLocation = e.latlng;
var radius = e.accuracy;
var userConstituency = "Unknown Constituency"; // Default message

// Loop through constituencies to find the user's constituency
constituenciesFromAPI.features.forEach((feature) => {
const layer = L.geoJSON(feature);
if (layer.getBounds().contains(userLocation)) {
userConstituency = feature.properties.ENG_NAME_VALUE;
}
});

// Display user's location with the constituency name
L.marker(userLocation)
.addTo(map)
.bindPopup(`You are here in ${userConstituency}`)
.openPopup();

L.circle(userLocation, radius).addTo(map);
}

function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.ENG_NAME_VALUE) {
// Bind pop-up with the constituency name
layer.bindPopup(feature.properties.ENG_NAME_VALUE);
}
}

function myStyle(feature) {
return {
fillColor: "yellow",
weight: 2,
opacity: 1,
color: "grey",
dashArray: "1",
fillOpacity: 0.1
};
}

function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 2,
color: "grey",
dashArray: "1",
fillOpacity: 0.3
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}

function resetHighlight(e) {
constituencyLayer.resetStyle(e.target);
}

map.on("locationfound", onLocationFound);

L.geoJSON(constituenciesFromAPI, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function (feature) {
return feature.properties.ENG_NAME_VALUE;
}
}).addTo(map);

map.fitBounds(constituencyLayer.getBounds(), { maxZoom: 19 });
map.locate({ setView: true, maxZoom: 9 });

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
constituencyMapExperimentClickableSmall = {
const container = yield htl.html`<div style="height: 400px; width: 450px">`;
const map = L.map(container);
const constituencylayer = L.geoJSON(constituenciesFromAPI).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy;

L.marker(e.latlng).addTo(map)
.bindPopup("This is your current location").openPopup();

L.circle(e.latlng, //radius
).addTo(map);

}
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.ENG_NAME_VALUE) {
layer.bindTooltip((feature.properties.ENG_NAME_VALUE).slice(0,-4)).openPopup((feature.properties.ENG_NAME_VALUE).slice(0,-4));
}
}


function myStyle(feature) {
return {
fillColor: 'yellow',
weight: 2,
opacity: 1,
color: 'grey',
dashArray: 1,
fillOpacity: .1
};
}

function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 1,
color: '',
dashArray: '',
fillOpacity: 0.01
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
constituenciesFromAPI.resetStyle(e.target);
}
map.on('locationfound', onLocationFound);

L.geoJSON(constituenciesFromAPI, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function(feature, layer){return feature.properties.ENG_NAME_VALUE}
}).addTo(map);
map.fitBounds(constituencylayer.getBounds(), {maxZoom: 19});
map.locate({setView: true, maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
//viewof selectConstituency = Inputs.select(Array.from(new Set(combined.map(d => (d.properties.ENG_NAME_VALUE)))))
Insert cell
//filtered = combined.filter(d => d.properties.ENG_NAME_VALUE == `${constituencyPicker}`)
Insert cell
names_seats = FileAttachment("Names_Seats.json").json()
Insert cell
sortedNames = names_seats.sort((a, b) => d3.ascending(a.name, b.name))
Insert cell
seatsAndNames = names_seats
.flatMap((d) => ({
name: d.name,
seats: d.id.slice(-2, -1)
}))
.filter((d) => d.name === `${selectConstituency.name}`)
Insert cell
constituencyNames = Array.from(new Set(constituenciesFromAPI.features.map(d => (d.properties.ENG_NAME_VALUE))))
Insert cell
//viewof selectConstituency = Inputs.select(Array.from(new Set(constituenciesFromAPI.features.map(d => (d.properties.ENG_NAME_VALUE)))))
Insert cell
constituencyNamesAndSeats = Array.from(new Set(constituenciesFromAPI.features.map(d => (d.properties.ENG_NAME_VALUE).slice(0,-4))))
Insert cell
constituenciesFromAPI = FileAttachment("resized.geojson").json()
Insert cell
import { data as TDs } from "e6d4a1e76a251e8e"
Insert cell
TDs
Insert cell
tds = TDs.filter((d) => d.Constituency === `${selectConstituency.name}`).map(
(d) => ({
name: d.Deputy,
party: d.Party,
page: "https://www.oireachtas.ie/en/members/member/" + d.Code.slice(51),
URI: d.Code.slice(51)
})
)
Insert cell
generateTDsSentence = (tds) => {
const selectedTDs = tds.slice(0, Math.max(3, tds.length));
return `The TDs are ${selectedTDs
.map((td) => `<a href="${td.page}" target="_blank">${td.name}</a>`)
.join(", ")}.`;
}
Insert cell
Insert cell

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.
Learn more