From 5ec03c38a107f34476adee3674cc22f081841560 Mon Sep 17 00:00:00 2001 From: steps39 Date: Thu, 8 Feb 2024 22:40:58 +0000 Subject: [PATCH] Issues with chart and map markers being out of sync sorted. Still issue with interference between zooming and selection on charts. --- SedimentDataExplorer.js | 4 +- markers/marker-icon-highlight.png | Bin 0 -> 1285 bytes sdeCharts.js | 237 ++++++++++++++++++------------ sdeMaps.js | 153 ++++++++++--------- sdeSelections.js | 5 +- 5 files changed, 233 insertions(+), 166 deletions(-) create mode 100644 markers/marker-icon-highlight.png diff --git a/SedimentDataExplorer.js b/SedimentDataExplorer.js index 8225926..16c3720 100644 --- a/SedimentDataExplorer.js +++ b/SedimentDataExplorer.js @@ -5,6 +5,7 @@ const annotationPlugin = window['chartjs-plugin-annotation']; Chart.register(annotationPlugin); + markerPath = 'markers/'; markerPngs = ['marker-icon-red.png', 'marker-icon-orange.png', 'marker-icon-yellow.png', 'marker-icon-green.png', 'marker-icon-blue.png', 'marker-icon-violet.png', 'marker-icon-grey.png', 'marker-icon-gold.png','marker-icon-black.png']; @@ -18,6 +19,7 @@ let instanceType = []; let instanceSheet = []; let highlighted = []; + let highlightMarkers = {}; for (i = 1; i < noInstances; i++) { chartInstance[i] = null; instanceType[i] = null; @@ -957,7 +959,7 @@ function filenameDisplay() { iconNo = 0; for (dateSampled in selectedSampleInfo) { - currentIcon = markerPngs[iconNo]; + currentIcon = markerPath + markerPngs[iconNo]; iconNo = (iconNo + 1) % 9; const fileURL = sampleInfo[dateSampled].fileURL; diff --git a/markers/marker-icon-highlight.png b/markers/marker-icon-highlight.png new file mode 100644 index 0000000000000000000000000000000000000000..e0ceba8f947aac1e4380c067587391b6f7161e03 GIT binary patch literal 1285 zcmV+g1^W7lP)93hir=4kQOA8{Y{AhqsN)%a$L6$Duxp7V65)~$iiq?nTP=lkw~gY zAr#bY~%uG8o@4e&V)plmuX?s>Tx#xcFx#ynmJ(nVaMiUVULjU12|Bpg2_d;G& zAz+82vk845Wk^{fq$ zNaz<va9^_R{evc*SZ77v5(Q6rb$-abpBCC{YgrEr-+m}*FFL=1@PGmWl01(VP4VP9_ z?M?x;0DwK2g;Co;*3F$9sLd`>)4n!DAp@yRFDl8Gql4(tE@HcAHo{U+eQ}a{q*Dk$ z!hBIlu?kQis?+1HH~?sdJ4HlyxIzIKmTC&-|D=TBZZV`uxFit@B?4>3v?lBMa0tgCa2mz?Hr|fW-2m}($6n2Y=4j|&+TLLM7-qWSjK!OQFh<|fIs=@AAQVaZF z^8nx}JKU+1W7L5ZKv`U={QOTOz1?uC*XJZ(1jLLb5i?2vXCfmIKq{B+`H!CO$Pp2L zp;Y;11|S6HNQQtSV8=6bH9!_?E1&=7KYFo!)@zT8rO$3)xk>=8GDk8X6-kw_=6DtW zNLefwKmMis?TlZngc8;hLlM7REnT`>`sj+}OKWL9oH5-V0TVgdsa);KzXSo&m)iID zYd`(15B1uyZk6;v1WT*_y`|vy1(bXOk*oz`r*csl8bk#)+Rgqr^5u;Kl>FdoKDe3( z8Xoof;%AR%Ur9ydHI-_sol}FG(~8E-H@z-)GDoW#KmeQ*IXJsg|Jo)7?x}%woo}qv zNmozw?H**t)2cVV-rnj%pgq0$bS=%kF;xFr)PV?hZ<539J0b`$m#_zV>JzByrb(@w zGs8QALcqR0sI9JV+s)av$NSOcY!6cH*4=c)%^>9%=ls|fwKuyo%XX|C{AAd#pmA_EZsX1vFabZ(jE9YB$}Z;wG!2 { - if (!(selected[ds][ct] == undefined || selected[ds][ct] == null)) { - for (const c in selected[ds][ct].chemicals) { + if (!(selectedSampleMeasurements[ds][ct] == undefined || selectedSampleMeasurements[ds][ct] == null)) { + for (const c in selectedSampleMeasurements[ds][ct].chemicals) { if (measChart[c] == undefined || measChart[c] == null) { measChart[c] = {}; } // for (const s in selected[ds][ct].chemicals[c].samples) { - for (const s in selectedSampleInfo[ds].position) { - if (selected[ds][ct].chemicals[c].samples[s] == undefined || selected[ds][ct].chemicals[c].samples[s] == null) { +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { + if (selectedSampleMeasurements[ds][ct].chemicals[c].samples[s] == undefined || selectedSampleMeasurements[ds][ct].chemicals[c].samples[s] == null) { measChart[c][ds + ': ' + s] = 0.0; } else { - measChart[c][ds + ': ' + s] = selected[ds][ct].chemicals[c].samples[s]; + measChart[c][ds + ': ' + s] = selectedSampleMeasurements[ds][ct].chemicals[c].samples[s]; } - } + }); } } else { // Have to deal with samples without measurements set everything to zero @@ -106,9 +108,12 @@ function dataForCharting(selected, sheetName) { if (measChart[c] == undefined || measChart[c] == null) { measChart[c] = {}; } - for (const s in selectedSampleInfo[ds].position) { - measChart[c][ds + ': ' + s] = 0.0; - } +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { + measChart[c][ds + ': ' + s] = 0.0; + }); } } }); @@ -116,74 +121,95 @@ function dataForCharting(selected, sheetName) { return {unitTitle, measChart} } -function sumsForCongenerCharting(selected) { - const datesSampled = Object.keys(selected); +function sumsForCongenerCharting() { + const datesSampled = Object.keys(selectedSampleMeasurements); measChart = {}; // for (const ds in selected) { datesSampled.sort(); datesSampled.forEach (ds => { - if (!(selected[ds]['PCB data'] == undefined || selected[ds]['PCB data'] == null)) { + if (!(selectedSampleMeasurements[ds]['PCB data'] == undefined || selectedSampleMeasurements[ds]['PCB data'] == null)) { // for (const s in selected[ds]['PCB data'].congenerTest) { - for (const s in selectedSampleInfo[ds].position) { -console.log(ds,s); - if (selected[ds]['PCB data'].congenerTest[s] == undefined || selected[ds]['PCB data'].congenerTest[s] == null) { +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { + console.log(ds,s); + if (selectedSampleMeasurements[ds]['PCB data'].congenerTest[s] == undefined || selectedSampleMeasurements[ds]['PCB data'].congenerTest[s] == null) { measChart[ds + ': ' + s] = { ICES7 : 0.0, All : 0.0 }; } else { - measChart[ds + ': ' + s] = selected[ds]['PCB data'].congenerTest[s]; + measChart[ds + ': ' + s] = selectedSampleMeasurements[ds]['PCB data'].congenerTest[s]; } - } + }); } else { - for (const s in selectedSampleInfo[ds].position) { +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { measChart[ds + ': ' + s] = { All : 0.0, ICES7 : 0.0}; - } + }); } }); return measChart } -function sumsForGorhamCharting(selected) { - const datesSampled = Object.keys(selected); +function sumsForGorhamCharting() { + const datesSampled = Object.keys(selectedSampleMeasurements); measChart = {}; -// for (const ds in selected) { datesSampled.sort(); datesSampled.forEach (ds => { - if (!(selected[ds][ct] == undefined || selected[ds][ct] == null)) { - for (const s in selected[ds]['PAH data'].gorhamTest) { - if (selected[ds]['PAH data'].gorhamTest[s] == undefined || selected[ds]['PAH data'].gorhamTest[s] == null) { + if (!(selectedSampleMeasurements[ds][ct] == undefined || selectedSampleMeasurements[ds][ct] == null)) { +// for (const s in selectedSampleMeasurements[ds]['PAH data'].gorhamTest) { + const allSamples = Object.keys(selectedSampleMeasurements[ds]['PAH data'].totalHC); + allSamples.sort(); + allSamples.forEach(s => { + if (selectedSampleMeasurements[ds]['PAH data'].gorhamTest[s] == undefined || selectedSampleMeasurements[ds]['PAH data'].gorhamTest[s] == null) { measChart[ds + ': ' + s] = { hmwSum : 0.0, lmwSum : 0.0}; } else { - measChart[ds + ': ' + s] = selected[ds]['PAH data'].gorhamTest[s]; + measChart[ds + ': ' + s] = selectedSampleMeasurements[ds]['PAH data'].gorhamTest[s]; } - } + }); } else { - for (const s in selectedSampleInfo[ds].position) { +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { measChart[ds + ': ' + s] = { hmwSum : 0.0, lmwSum : 0.0}; - } + }); } }); return measChart } -function sumsForTotalHCCharting(selected) { - const datesSampled = Object.keys(selected); +function sumsForTotalHCCharting() { + const datesSampled = Object.keys(selectedSampleMeasurements); unitTitle = blankSheets[ct]['totalHCUnit']; measChart = {}; -// for (const ds in selected) { +sampleNo = -1; datesSampled.sort(); datesSampled.forEach (ds => { - if (!(selected[ds][ct] == undefined || selected[ds][ct] == null)) { - for (const s in selected[ds]['PAH data'].totalHC) { - if (selected[ds]['PAH data'].total[s] == undefined || selected[ds]['PAH data'].totalHC[s] == null) { + if (!(selectedSampleMeasurements[ds][ct] == undefined || selectedSampleMeasurements[ds][ct] == null)) { +// for (const s in selectedSampleMeasurements[ds]['PAH data'].totalHC) { + const allSamples = Object.keys(selectedSampleMeasurements[ds]['PAH data'].totalHC); + allSamples.sort(); + allSamples.forEach(s => { + if (selectedSampleMeasurements[ds]['PAH data'].total[s] == undefined || selectedSampleMeasurements[ds]['PAH data'].totalHC[s] == null) { measChart[ds + ': ' + s] = { totalHC : 0.0, fractionPAH : 0.0}; } else { // measChart[ds + ': ' + s] = {totalHC : selected[ds]['PAH data'].totalHC[s], fractionPAH : (selected[ds]['PAH data'].total[s] / (1000 * selected[ds]['PAH data'].totalHC[s]))}; - measChart[ds + ': ' + s] = {totalHC : selected[ds]['PAH data'].totalHC[s], fractionPAH : selected[ds]['PAH data'].total[s] / 1000}; + measChart[ds + ': ' + s] = {totalHC : selectedSampleMeasurements[ds]['PAH data'].totalHC[s], fractionPAH : selectedSampleMeasurements[ds]['PAH data'].total[s] / 1000}; } - } +sampleNo += 1; +console.log(sampleNo,ds,s); + }); } else { - for (const s in selectedSampleInfo[ds].position) { +// for (const s in selectedSampleInfo[ds].position) { + const allSamples = Object.keys(selectedSampleInfo[ds].position); + allSamples.sort(); + allSamples.forEach(s => { measChart[ds + ': ' + s] = { totalHC : 0.0, fractionPAH : 0.0}; - } +sampleNo += 1; +console.log(sampleNo,ds,s); + }); } }); return {unitTitle, measChart} @@ -191,14 +217,14 @@ function sumsForTotalHCCharting(selected) { -function setBlanksForCharting(selected) { - const datesSampled = Object.keys(selected); +function setBlanksForCharting() { + const datesSampled = Object.keys(selectedSampleMeasurements); // Have to deal with samples without measurements set everything to zero - for (const ds in selected) { - for (const ct in selected[ds]) { + for (const ds in selectedSampleMeasurements) { + for (const ct in selectedSampleMeasurements[ds]) { if (blankSheets[ct] == null || blankSheets[ct] == undefined) { - if (!(selected[ds][ct] == undefined || selected[ds][ct] == null)) { - blankSheets[ct] = selected[ds][ct]; + if (!(selectedSampleMeasurements[ds][ct] == undefined || selectedSampleMeasurements[ds][ct] == null)) { + blankSheets[ct] = selectedSampleMeasurements[ds][ct]; } } } @@ -206,8 +232,8 @@ function setBlanksForCharting(selected) { return } -function dataForPSDCharting(selected, sheetName) { - const datesSampled = Object.keys(selected); +function dataForPSDCharting(sheetName) { + const datesSampled = Object.keys(selectedSampleMeasurements); ct = sheetName; // unitTitle = selected[datesSampled[0]][ct]['Unit of measurement']; unitTitle = blankSheets[ct]['Unit of measurement']; @@ -216,13 +242,13 @@ function dataForPSDCharting(selected, sheetName) { // for (const ds in selected) { datesSampled.sort(); datesSampled.forEach (ds => { - if (!(selected[ds][ct] == undefined || selected[ds][ct] == null)) { + if (!(selectedSampleMeasurements[ds][ct] == undefined || selectedSampleMeasurements[ds][ct] == null)) { if (!sizes) { - sizes = selected[ds][ct].sizes; + sizes = selectedSampleMeasurements[ds][ct].sizes; sizes = sizes.map(phiSize => Math.pow(2, -phiSize)); } - for (const s in selected[ds][ct].samples) { - measChart[ds + ': ' + s] = selected[ds][ct].samples[s].psd; + for (const s in selectedSampleMeasurements[ds][ct].samples) { + measChart[ds + ': ' + s] = selectedSampleMeasurements[ds][ct].samples[s].psd; } } else { for (const s in selectedSampleInfo[ds].position) { @@ -481,13 +507,14 @@ function displayAnyChart(meas, all, datasets, instanceNo, title, yTitle, yLogLin position: 'right', title: { display: true, - text: 'Total PAHs as Fraction of Total Hydrocarbons', + text: 'Total PAH content (mg/kg)', position: 'right', } }; console.log(stanGraph); }; chartInstance[instanceNo] = new Chart(ctx, stanGraph); + //clickableScales(chartInstance[instanceNo], 1); function clickableScales(chart, canvas, click) { //console.log(chart); @@ -517,14 +544,14 @@ function displayAnyChart(meas, all, datasets, instanceNo, title, yTitle, yLogLin // Output the results console.log("Date Sampled: ", dateSampled); console.log("Sample:", sample); - createHighlights(meas, yLogLin, dateSampled, sample, null); +// createHighlights(meas, yLogLin, dateSampled, sample, null); + createHighlights(meas, yLogLin, dateSampled, all[i], null); } else { console.log("String format doesn't match the expected pattern."); }; } } } - } ctx.addEventListener('click', (e) => { clickableScales(chartInstance[instanceNo], ctx, e); @@ -659,10 +686,10 @@ function chartLabel(instanceNo,xValue,yValue,borderColor,label) { function displayGorhamTest(sums, sheetName, instanceNo, yLogLin, unitTitle) { createCanvas(instanceNo); - const convas = document.getElementById("chart" + instanceNo); + const convas = document.getElementById("chart" + instanceNo); convas.style.display = "block"; - instanceType[instanceNo] = 'gorham'; -instanceSheet[instanceNo] = sheetName; + instanceType[instanceNo] = 'gorham'; + instanceSheet[instanceNo] = sheetName; const lmw = ['Acenaphthene', 'Acenaphthylene', 'Anthracene', 'Fluorene', 'C1-Naphthalenes', 'Naphthalene', 'Phenanthrene']; const hmw = ['Benz[a]anthracene', 'Benzo[a]pyrene', 'Chrysene', 'Dibenz[a,h]anthracene', 'Fluoranthene', 'Pyrene']; const LMW = { @@ -696,9 +723,9 @@ instanceSheet[instanceNo] = sheetName; }, ]; -displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Gorham Test Protocol',unitTitle,yLogLin); + displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Gorham Test Protocol',unitTitle,yLogLin); - chartInstance[instanceNo].options.plugins.annotation.annotations = {}; + chartInstance[instanceNo].options.plugins.annotation.annotations = {}; chartLine(instanceNo,'LMW.ERL',0,samples.length,LMW.ERL,LMW.ERL,'rgba(0, 0, 255, 0.5)',[3,3]); chartLine(instanceNo,'LMW.ERM',0,samples.length,LMW.ERM,LMW.ERM,'rgba(0, 0, 255, 0.5)',[5,5]); chartLine(instanceNo,'HMW.ERL',0,samples.length,HMW.ERL,HMW.ERL,'rgba(255, 0, 0, 0.5)',[3,3]); @@ -722,6 +749,7 @@ displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Gorham Test Pro chartLabel(instanceNo,gorX,0.95*gorMax,'rgba(255, 0, 0, 0.5)','HMW ERM '); chartLine(instanceNo,'Legend - HMW.ERM',gorX*1.2,gorX*2.2,0.95*gorMax,0.95*gorMax,'rgba(255, 0, 0, 0.5)',actionLevelDashes[1]); // Update the chart + chartInstance[instanceNo].options.plugins.legend.display = true; chartInstance[instanceNo].update(); } @@ -752,8 +780,8 @@ instanceSheet[instanceNo] = sheetName; yAxisID: 'y', }, ]; -displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Congener Sums',unitTitle,yLogLin); - chartInstance[instanceNo].options.plugins.annotation.annotations = {}; + displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Congener Sums',unitTitle,yLogLin); + chartInstance[instanceNo].options.plugins.annotation.annotations = {}; chartLine(instanceNo,'ICES7 Action Level 1',0,samples.length,0.01,0.01,'rgba(0, 0, 255, 0.5)',[3,3]); chartLine(instanceNo,'All Action Level 1',0,samples.length,0.02,0.02,'rgba(255, 0, 0, 0.5)',[3,3]); chartLine(instanceNo,'All Action Level 2',0,samples.length,0.2,0.2,'rgba(255, 0, 0, 0.5)',[5,5]); @@ -781,14 +809,14 @@ function displayTotalHC(sums, sheetName, instanceNo, yLogLin, unitTitle) { createCanvas(instanceNo); const convas = document.getElementById("chart" + instanceNo); convas.style.display = "block"; - instanceType[instanceNo] = 'totalHC'; -instanceSheet[instanceNo] = sheetName; + instanceType[instanceNo] = 'totalHC'; + instanceSheet[instanceNo] = sheetName; const samples = Object.keys(sums); const totalHC = samples.map(sample => sums[sample].totalHC); const fractionPAH = samples.map(sample => sums[sample].fractionPAH); const datasets = [ { - label: 'totalHC', + label: 'Total Hydrocarbon', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1, @@ -796,7 +824,7 @@ instanceSheet[instanceNo] = sheetName; yAxisID: 'y', }, { - label: 'fractionPAH', + label: 'Total PAH', backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, @@ -804,8 +832,8 @@ instanceSheet[instanceNo] = sheetName; yAxisID: 'y1', }, ]; -displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Total hydrocarbon & Total PAH/THC',unitTitle,yLogLin); -y1Title = 'Fraction PAH of THC'; +displayAnyChart(sums, samples,datasets,instanceNo,sheetName + ': Total hydrocarbon & Total PAH',unitTitle,yLogLin); +y1Title = 'Total PAH'; /* chartInstance[instanceNo].options.scales.push({ y1: { beginAtZero: true, type: yLogLin, @@ -876,57 +904,63 @@ function findSamplesInSameLocation(clickedMapSample) { return clickedMapSamples } -function createHighlights(meas, linLog, dateSampled, hoveredSample, isMarked) { +function createHighlights(meas, linLog, dateSampled, hoveredSample) { + noSamples = 0; + samples = []; const datesSampled = Object.keys(selectedSampleInfo); datesSampled.sort(); - samples = []; datesSampled.forEach(dateSampled => { // for (const dateSampled in selectedSampleInfo) { const ok = Object.keys(selectedSampleInfo[dateSampled].position); // noSamples += Object.keys(selectedSampleInfo[dateSampled].position).length; noSamples += ok.length; - for (const sample in selectedSampleInfo[dateSampled].position) { - samples.push(dateSampled + ': ' + sample); - } +// for (const sample in selectedSampleInfo[dateSampled].position) { + const allSamples = Object.keys(selectedSampleInfo[dateSampled].position); + allSamples.sort(); + allSamples.forEach(sample => { + samples.push(dateSampled + ': ' + sample); + }); // } }); - console.log(hoveredSample); +console.log(hoveredSample); if (!dateSampled) { clickedSamples = findSamplesInSameLocation(hoveredSample); - console.log('Not dateSampled'); + console.log('Not dateSampled',hoveredSample); } else { clickedSamples = []; clickedSamples[0] = dateSampled + ': ' + hoveredSample; - console.log('dateSampled'); +// clickedSamples[0] = hoveredSample; +console.log('dateSampled',dateSampled,hoveredSample); } - console.log(clickedSamples); +console.log('clickedSamples',clickedSamples); const allChemicals = Object.keys(meas); let clickedIndexes = []; - console.log('samples', samples); - console.log('meas[allChemicals[0]]', Object.keys(meas[allChemicals[0]])); +// console.log('samples', samples); +// console.log('meas[allChemicals[0]]', Object.keys(meas[allChemicals[0]])); clickedSamples.forEach(clickedSample => { index = -1; samples.forEach(sample => { index += 1; - if (sample === clickedSample) { + if ((dateSampled + ': ' + sample) === clickedSample) { clickedIndexes.push(index); } }); }); - console.log(clickedIndexes); +console.log('clickedIndexes',clickedIndexes); clickedIndexes.forEach(item => { - if (isMarked === null) { +// if (isMarked === null) { console.log('doing the null bit'); if (highlighted[item]) { highlighted[item] = false; } else { highlighted[item] = true; } - } else { +/* } else { +console.log('doing the other bit'); highlighted[item] = !isMarked; - } + }*/ }); - console.log(highlighted); +console.log(highlighted); clickedIndexes.forEach(item => { console.log(item); for (let i = 1; i < lastInstanceNo + 1; i++) { @@ -938,6 +972,23 @@ function createHighlights(meas, linLog, dateSampled, hoveredSample, isMarked) { } } } + if (highlighted[item]) { + // highlightMarkers set to null if no position coordinates were available + console.log('addcharhigh', item, (!highlightMarkers[item] === null)); + if (!(highlightMarkers[item] === null)) { + // Highlight marker on map + map.addLayer(highlightMarkers[item]); + } + } else { + // highlightMarkers set to null if no position coordinates were available + console.log('remcharhigh', item, (!highlightMarkers[item] === null)); + if (!(highlightMarkers[item] === null)) { + // Remove highlight of marker on map + if (map.hasLayer(highlightMarkers[item])) { + map.removeLayer(highlightMarkers[item]); + } + } + } }); } diff --git a/sdeMaps.js b/sdeMaps.js index 840652a..f96df55 100644 --- a/sdeMaps.js +++ b/sdeMaps.js @@ -22,8 +22,8 @@ function sampleMap(meas, linLog) { let hoveredSample = null; var greenIcon = L.icon({ - iconUrl: 'blue-marker-icon.png', // Replace with the path to your marker icon - shadowUrl: 'marker-shadow.png', + iconUrl: markerPath + 'blue-marker-icon.png', // Replace with the path to your marker icon + shadowUrl: markerPath + 'marker-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64], // size of the shadow @@ -35,7 +35,7 @@ function sampleMap(meas, linLog) { // Define a custom marker icon with a specific color var CustomIcon = L.Icon.extend({ options: { - shadowUrl: 'marker-shadow.png', + shadowUrl: markerPath + 'marker-shadow.png', iconSize: [25, 41], // Replace with the size of your marker icon iconAnchor: [12, 41], // Replace with the anchor point of your marker icon popupAnchor: [1, -34], // Replace with the popup anchor point of your marker icon @@ -43,11 +43,12 @@ function sampleMap(meas, linLog) { }); // Add markers for each sample iconNo = 0; - + sampleNo = -1; + const highlightIcon = new CustomIcon({ iconUrl: markerPath + 'marker-icon-highlight.png' }); const datesSampled = Object.keys(selectedSampleInfo); datesSampled.sort(); datesSampled.forEach(dateSampled => { - currentIcon = new CustomIcon({ iconUrl: markerPngs[iconNo] }); + currentIcon = new CustomIcon({ iconUrl: markerPath + markerPngs[iconNo] }); iconNo = (iconNo + 1) % 9; noSamples = 0; for (const dateSampled in selectedSampleInfo) { @@ -55,7 +56,10 @@ function sampleMap(meas, linLog) { } console.log('noSamples', noSamples); highlighted = Array(noSamples).fill(false); - for (const sample in selectedSampleInfo[dateSampled].position) { + // for (const sample in selectedSampleInfo[dateSampled].position) { + const allSamples = Object.keys(selectedSampleInfo[dateSampled].position); + allSamples.sort(); + allSamples.forEach(sample => { if (selectedSampleInfo[dateSampled].position[sample]['Position latitude']) { lat = selectedSampleInfo[dateSampled].position[sample]['Position latitude']; lon = selectedSampleInfo[dateSampled].position[sample]['Position longitude']; @@ -80,24 +84,34 @@ function sampleMap(meas, linLog) { minLon = lon; } } + sampleNo += 1; // Create a marker for each sample // const marker = L.marker([lat, lon]).addTo(map).bindPopup(`${sample}
Latitude: ${lat}
Longitude: ${lon}`); - const marker = L.marker([lat, lon], { icon: currentIcon }).addTo(map).bindPopup(`${sample}
Latitude: ${lat}
Longitude: ${lon}`); + const marker = L.marker([lat, lon], { icon: currentIcon }).addTo(map).bindPopup(`${dateSampled}: ${sample}
Latitude: ${lat}
Longitude: ${lon}`); /* const marker = L.circleMarker([lat, lon], {radius: 4, color: 'white', fillColor: 'red', fillOpacity: 1} ).addTo(map).bindPopup(`${sample}
Latitude: ${lat}
Longitude: ${lon}`); marker.bindTooltip(sample, { permanent: false, direction: 'top' });*/ marker.isMarked = false; + console.log(sampleNo, dateSampled, sample); - // Add a click event listener to the marker + // Add a click event listener to the static marker marker.on('click', function () { - hoveredSample = sample; - createHighlights(meas, linLog, null, hoveredSample, marker.isMarked); - if (!marker.isMarked) { - marker.isMarked = true; - } else { - marker.isMarked = false; - } +// hoveredSample = sample; + hoveredSample = dateSampled + ': ' + sample; + createHighlights(meas, linLog, dateSampled, hoveredSample); + // Update the chart - in routintes + //console.log('update ',sample,i); + // chartInstance[i].update(); + }); + + // Create a highlight for each sample + //console.log(sampleNo,lat,lon); + highlightMarkers[sampleNo] = new L.marker(new L.LatLng(lat, lon), { icon: highlightIcon }); + // Add a click event listener to the highlight marker + highlightMarkers[sampleNo].on('click', function () { + hoveredSample = dateSampled + ': ' + sample; + createHighlights(meas, linLog, dateSampled, hoveredSample); // Update the chart - in routintes //console.log('update ',sample,i); // chartInstance[i].update(); @@ -107,13 +121,12 @@ function sampleMap(meas, linLog) { latSum += parseFloat(lat); lonSum += parseFloat(lon); }; + } else { + // Missing lat and lon so don't create a marker but do update the sampleNo so that it still aligns with chart samples + sampleNo += 1; + highlightMarkers[sampleNo] = null; } - - } - /* iconNo += 1; - if (iconNo > 8) { - iconNo = 0; - }*/ + }); console.log(iconNo, dateSampled); }); @@ -160,67 +173,67 @@ document.body.appendChild(img); } function parseCoordinate(input) { -// Check if the input is undefined or null -if (input == undefined || input == null) { -return null; -} + // Check if the input is undefined or null + if (input == undefined || input == null) { + return null; + } -// Check if the input is already in digital format (e.g., 54.1 or -1.7) -const digitalFormatRegex = /^[-+]?\d+(\.\d+)?$/; -if (digitalFormatRegex.test(input)) { -return parseFloat(input); -} + // Check if the input is already in digital format (e.g., 54.1 or -1.7) + const digitalFormatRegex = /^[-+]?\d+(\.\d+)?$/; + if (digitalFormatRegex.test(input)) { + return parseFloat(input); + } -// Check if the input is in degrees minutes digital seconds format (e.g., 54 10 9.6 N) -const dmsRegex = /^(\d+)\s+(\d+)\s+([\d.]+)\s*([NSEW])$/i; -const dmsMatch = input.match(dmsRegex); -if (dmsMatch) { -const degrees = parseFloat(dmsMatch[1]); -const minutes = parseFloat(dmsMatch[2]); -const seconds = parseFloat(dmsMatch[3]); -const direction = dmsMatch[4].toUpperCase(); + // Check if the input is in degrees minutes digital seconds format (e.g., 54 10 9.6 N) + const dmsRegex = /^(\d+)\s+(\d+)\s+([\d.]+)\s*([NSEW])$/i; + const dmsMatch = input.match(dmsRegex); + if (dmsMatch) { + const degrees = parseFloat(dmsMatch[1]); + const minutes = parseFloat(dmsMatch[2]); + const seconds = parseFloat(dmsMatch[3]); + const direction = dmsMatch[4].toUpperCase(); -let result = degrees + minutes / 60 + seconds / 3600; + let result = degrees + minutes / 60 + seconds / 3600; -// Ensure negative for S or W directions -if (direction === 'S' || direction === 'W') { - result = -result; -} + // Ensure negative for S or W directions + if (direction === 'S' || direction === 'W') { + result = -result; + } -return result; -} + return result; + } -// If the input doesn't match any recognized format, return null or handle accordingly -return null; + // If the input doesn't match any recognized format, return null or handle accordingly + return null; } function parseCoordinates(latitude, longitude) { -// Check if the input is undefined or null -if (latitude == undefined || latitude == null || longitude == undefined || longitude == null) { -return null; -} + // Check if the input is undefined or null + if (latitude == undefined || latitude == null || longitude == undefined || longitude == null) { + return null; + } -// Handle coordinates in digital degrees with N/S and E/W -const digitalDegreesRegex = /^([-+]?\d+(\.\d+)?)\s*([NSEW])\s*([-+]?\d+(\.\d+)?)\s*([NSEW])$/i; -const digitalDegreesMatch = `${latitude} ${longitude}`.match(digitalDegreesRegex); -if (digitalDegreesMatch) { -const latValue = parseFloat(digitalDegreesMatch[1]) * (digitalDegreesMatch[3].toUpperCase() === 'S' ? -1 : 1); -const lonValue = parseFloat(digitalDegreesMatch[4]) * (digitalDegreesMatch[6].toUpperCase() === 'W' ? -1 : 1); -return { latitude: latValue, longitude: lonValue }; -} + // Handle coordinates in digital degrees with N/S and E/W + const digitalDegreesRegex = /^([-+]?\d+(\.\d+)?)\s*([NSEW])\s*([-+]?\d+(\.\d+)?)\s*([NSEW])$/i; + const digitalDegreesMatch = `${latitude} ${longitude}`.match(digitalDegreesRegex); + if (digitalDegreesMatch) { + const latValue = parseFloat(digitalDegreesMatch[1]) * (digitalDegreesMatch[3].toUpperCase() === 'S' ? -1 : 1); + const lonValue = parseFloat(digitalDegreesMatch[4]) * (digitalDegreesMatch[6].toUpperCase() === 'W' ? -1 : 1); + return { latitude: latValue, longitude: lonValue }; + } -// Crude check of whether easting and northing -if (latitude > 360) { -// Use proj4js library to convert British National Grid to latitude and longitude -proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +units=m +no_defs"); -const point = proj4("EPSG:27700", "EPSG:4326", [parseInt(latitude, 10), parseInt(longitude, 10)]); + // Crude check of whether easting and northing + if (latitude > 360) { + // Use proj4js library to convert British National Grid to latitude and longitude + proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +units=m +no_defs"); + const point = proj4("EPSG:27700", "EPSG:4326", [parseInt(latitude, 10), parseInt(longitude, 10)]); -return { latitude: point[1], longitude: point[0] }; -} else { -return { latitude: parseCoordinate(latitude), longitude: parseCoordinate(longitude) }; -} + return { latitude: point[1], longitude: point[0] }; + } else { + return { latitude: parseCoordinate(latitude), longitude: parseCoordinate(longitude) }; + } -// If the input doesn't match any recognized format, return null or handle accordingly -return null; + // If the input doesn't match any recognized format, return null or handle accordingly + return null; } diff --git a/sdeSelections.js b/sdeSelections.js index 642f1cd..666fb47 100644 --- a/sdeSelections.js +++ b/sdeSelections.js @@ -134,14 +134,15 @@ function openChemicalSelection(sampleMeasurements) { const sampleCheckboxes = document.getElementById('sampleCheckboxes'); sampleCheckboxes.innerHTML = ''; - const datesSampled = Object.keys(sampleInfo); +// const datesSampled = Object.keys(sampleInfo); + const datesSampled = Object.keys(selectedSampleInfo); datesSampled.sort(); datesSampled.forEach (dateSampled => { // for (dateSampled in sampleInfo) { - const samples = Object.keys(sampleInfo[dateSampled].position); + const samples = Object.keys(selectedSampleInfo[dateSampled].position); const checkboxContainer = document.createElement('div'); checkboxContainer.className = 'checkbox-container';