let map = this;

if (!map) {

// let center = projection.invert([width / 2, height / 2]);

map = new mapboxgl.Map({

container,

style: r,

center: [-127, 51.8],

scrollZoom: false,

zoom: 5.3,

maxZoom: 12,

minZoom: 4

// maxBounds: bounds // Set the map's geographical boundaries.

});

}

// add navigation controls (zoom buttons, pitch & rotate)

const popup = new mapboxgl.Popup({

closeButton: false,

closeOnClick: false

});

map.on("load", function () {

map.addControl(new mapboxgl.NavigationControl());

// Keep track of which images we've already added

const addedImages = new Set();

// Handle missing images

map.on("styleimagemissing", function (e) {

console.log("Handling missing image:", e.id);

// You could load a placeholder image here if needed

});

// Process each image one at a time to avoid race conditions

const loadImages = async () => {

for (const item of groupsData) {

if (!item.file || item.group === undefined) continue;

// Convert group to string and check if we've already added it

const groupId = String(item.group);

if (addedImages.has(groupId)) {

console.log(`Image for group ${groupId} already added, skipping`);

continue;

}

try {

const iconImage = await item.file.image();

console.log(`Adding image for group: ${groupId}`);

map.addImage(groupId, iconImage);

addedImages.add(groupId);

} catch (error) {

console.error(`Error adding image for group ${groupId}:`, error);

}

}

console.log("All images processed");

// Now you can add your layers that use these images

// addLayers();

};

loadImages();

});

map.on("mouseenter", "hexbins", function (e) {

map.getCanvas().style.cursor = "default";

const coordinates = e.features[0].geometry.coordinates.slice();

const properties = e.features[0].properties;

// mutable debug = properties;

const catText =

properties.Location === undefined ? "none" : properties.Organization;

while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {

coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;

}

// make the date more readable

let firstCatch = new Date(properties.firstCatch).toLocaleString(undefined, {

timeZone: "utc",

year: "numeric",

month: "numeric",

day: "numeric"

});

const dataLine = dataSentinels

.filter((d) => d.Location === properties.Location)

.sort((a, b) => a.Date - b.Date);

// mutable debug = properties;

// if (d3.sum(dataLine, (d) => d.total) > 0) {

dataLine.map((d) => {

console.log(new Date(d.Date));

});

popup

.setLngLat(coordinates)

.setHTML(

`<div>${catText} <br> Location: ${properties.Location} <br> Date of first dungeness: ${firstCatch} <br> Total over last 3 days: ${properties.total} <br> Total dungeness caught to date: ${properties.totalTODate} </div><svg class="popup-d3-svg" style="margin: 0 auto; display: block;"></svg>`

)

.addTo(map);

const width1 = 125,

height1 = 25;

const svgElement = popup

.getElement()

.getElementsByClassName("popup-d3-svg")[0];

const svg = d3

.select(svgElement)

.attr("width", width1)

.attr("height", height1);

// .style("background-color", "black");

const margin = { top: 2, right: 3, bottom: 1, left: 4 };

const x1 = d3

.scaleTime()

.domain(d3.extent(dataLine, (d) => d.Date))

.range([margin.left, width1 - margin.right]);

const y1 = d3

.scaleLinear()

.domain(d3.extent(dataLine, (d) => d.total))

.nice()

.range([height1 - margin.bottom, margin.top]);

svg

.append("path")

.datum(dataLine)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr(

"d",

d3

.line()

.x((d) => x1(d.Date))

.y((d) => y1(d.total))

);

map.on("mouseleave", "hexbins", function () {

map.getCanvas().style.cursor = "";

popup.remove();

});

map.on("click", "hexbins", function (e) {

// console.log(e);

mutable siteClicked = e.features[0].properties.Location;

container.value.selected = {

lng: e.lngLat.lng,

lat: e.lngLat.lat,

data: e.features[0].properties

};

container.dispatchEvent(new CustomEvent("input", { bubbles: true }));

});

});

// invalidation.then(() => map.remove());

// Wait until the map loads, then yield the container again.

yield new Promise((resolve) => {

if (map.loaded()) resolve(map);

else map.on("load", () => resolve(map));

});

let fc = {

type: "FeatureCollection",

features: hexgeo

};

if (map._loaded) {

if (!map.getSource("hexbins")) {

map.addSource("hexbins", {

type: "geojson",

data: fc

});

} else {

map.getSource("hexbins").setData(fc);

}

if (map.getLayer(hexbinLayer.id)) {

map.removeLayer(hexbinLayer.id);

}

// console.log("adding layer")

map.addLayer(hexbinLayer);

// map.flyTo(projection.invert([100,1000]))

// console.log("flying")

// }

return true;

}

}

return {

id: "hexbins",

type: "symbol",

source: "hexbins",

layout: {

"icon-allow-overlap": true,

"icon-image": ["get", "group"],

"icon-size": 0.2,

"icon-ignore-placement": true

},

paint: {

"icon-opacity": 0.82

}

// paint: {

// // keep the circles the same size

// // https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js

// "circle-radius": {

// stops: [

// [0, 0],

// [8.2, metersToPixelsAtMaxZoom(2, center[1])]

// ],

// base: 2

// },

// "circle-stroke-color": "blue",

// "circle-stroke-width": ["get", "stroke"],

// "circle-color": ["get", "mhwcolor"],

// "circle-opacity": ["get", "opacity"]

// }

};

let sel = {};

// if (selected && selected[0]) {

// sel = selected[0];

// }

return {

id: i,

properties: {

...d,

stroke: d.lat == sel.lat && d.lng == sel.lng ? 2 : 0,

mhwcolor:

d.collected === true ? (d.total > 0 ? "#5ec962" : "#fde725") : "grey",

opacity: 0.89

},

geometry: { type: "Point", coordinates: [d.lng, d.lat] },

type: "Feature"

};

meters / 0.075 / Math.cos((latitude * Math.PI) / 180)

const groupsVisible = groupsData.filter((item) => item.group !== 10);

const promises = groupsVisible.map(async (item) => ({

...item,

iconUrl: await item.file.url()

}));

const items = Promise.all(promises);

return items;

const data = await d3.csv(urlData, d3.autoType);

data.forEach(

(d) => {

let site = sites.find((s) => s.Location === d.Location);

if (site) {

(d.Lat = site.Latitude), (d.Long = site.Longitude);

}

d.total = d["Number of Megalopae"] + d["Number of Instars"];

d.count = d.total;

d.Date = new Date(d.Date);

}

// d.status =

);

return data.filter((d) => d["Submission ID"] > 0);

sites[4]["Date of first Dungeness megalopae/instars"]

).toLocaleString(undefined, {

timeZone: "utc",

year: "numeric",

month: "numeric",

day: "numeric"

(d) =>

// get three day old data. There can be multiple days for a site

new Date(d.Date).toISOString().substring(0, 10) <=

new Date(time1).toISOString().substring(0, 10) &&

new Date(d.Date).toISOString().substring(0, 10) >=

new Date(d3.timeDay.offset(new Date(time1), -3))

.toISOString()

.substring(0, 10)

const data = [];

for (let i = 0; i < sites.length; i++) {

data.push({

Location: sites[i].Location,

Organization: sites[i]["Partner Organizations"],

lat: sites[i].Latitude,

lng: sites[i].Longitude,

total: 0,

collected: false,

// group: 1,

// category: "none",

firstCatch: sites[i]["Date of first Dungeness megalopae/instars"],

totalTODate:

sites[i][

"Total number of Dungeness recorded to date (megalopae and instars)"

],

day: new Date(time1)

});

}

// replace categories with real value

if (CollectionsForLastThreeDays.length > 0) {

data.forEach((d) => {

let isData = CollectionsForLastThreeDays.filter(

(h) => h.Location === d.Location

);

// console.log(isData.length);

if (isData.length > 0) {

d.collected = true;

d.total = d3.sum(isData, (d) => d.total);

d.group = d.total > 0 ? 3 : 2;

}

});

}

return data;

.range(

d3.timeDay.offset(new Date(dateExtent[0]), -1),

d3.timeDay.offset(new Date(dateExtent[1]), 1)

)

.map((d) => +d)

.geoAlbers()

.rotate([126, 0])

.fitSize(

[width, height],

topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng)

)

.hexbin()

.extent([

[0, 0],

[width, height]

])

.radius(100)

const gl = await require("mapbox-gl");

if (!gl.accessToken) {

gl.accessToken =

"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY20wbXh4emprMDc3cjJrcTI5czI3cXRjbCJ9.XNfWqelIzmfMTVRJlc7nIg";

const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");

document.head.appendChild(html`<link href=${href} rel=stylesheet>`);

}

return gl;

.range(new Date(dateExtent[0]), new Date(dateExtent[1]))

.map((d) => d.toISOString().substring(0, 10))

{

title: "No recent data",

icon: "trap-not-checked",

group: 1,

file: FileAttachment("notchecked@1.png")

},

{

title: "Checked within past 3 days",

icon: "trap-checked",

group: 2,

file: FileAttachment("lighttrapchecked@1.png")

},

{

title: "Dungeness caught within past 3 days",

icon: "crabs-found",

group: 3,

file: FileAttachment("lightrapchecked_megalopa2 copy 2-1 (2).png")

}