plotDeckMap = ({ data, getArrowLength, showNegativeSwings, scaleBooth }) => {
data = showNegativeSwings ? data : data.filter((d) => d.Swing > 0);
const iconLayer = new deck.IconLayer({
id: `icon-layer-${Date.now()}`,
data: data.objects(),
pickable: true,
iconAtlas: FileAttachment("arrow@1.png").url(),
iconMapping: {
arrow: { x: 0, y: 0, width: 128, height: 128, mask: true }
},
getIcon: (d) => "arrow",
sizeScale: 2,
getPosition: (d) => [d.Longitude, d.Latitude],
getAngle: (d) => (d.Swing / 100) * -90,
getSize: (d) =>
getArrowLength(
scaleBooth ? Math.abs(d.Swing) * d.OrdinaryVotes : Math.abs(d.Swing)
),
getColor: getPartyColor
});
const geojsonLayer = new deck.GeoJsonLayer({
id: "geojson-layer",
data: selectedElection.divisionGeojson,
opacity: 1,
filled: false,
stroked: true,
wireframe: true,
lineWidthMinPixels: 2
});
const layers = [iconLayer, geojsonLayer];
const container = html`<div style="height:700px"></div>`;
const deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: "",
mapboxApiAccessToken:
"pk.eyJ1IjoibWF4Ym8iLCJhIjoiY2lsd2JnZDRyMDFxNHZna3MwZDZmN2R0ZCJ9.32XWATCazaiDzdW6bXvBxw",
mapStyle: "mapbox://styles/mapbox/light-v10",
layers,
initialViewState: {
longitude: 135,
latitude: -26,
zoom: 3
},
controller: true,
getTooltip: ({ object }) => object && getTooltip(object)
});
deckgl.setProps({
layers
});
return container;
}