From 7fb977f562ac92cb1546c4fd9520b367b32cdf94 Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Mon, 6 Jan 2025 15:35:06 -0800
Subject: [PATCH 1/6] Closes #2010, Adds simple popup to assist with color
recognition
# Issue #2010
# Summary
Hooks into the macrostrat api to pull lat long input when the macrostrat
layer is clicked.
---
js/symb/leafletMap.js | 77 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 77 insertions(+)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index d2da017d93..3c82617d7a 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -26,6 +26,21 @@ function getObservationSvg(opts = {color: "#7A8BE7", size: 24, className:""}) {
});
}
+async function getMacroStratData(lat, lng, zoom) {
+ return fetch(`https://macrostrat.org/api/v2/mobile/map_query_v2?lng=${lng}&lat=${lat}&z=${zoom}`)
+ .then(async response => {
+ if(!response.ok) {
+ return {};
+ }
+ const json_data = await response.json()
+
+ if(!json_data.success) {
+ return {};
+ }
+ return json_data.success.data;
+ })
+}
+
function getSpecimenSvg(opts = {color: "#7A8BE7", size: 24, className:""}) {
const default_ops = {color: "#7A8BE7", size: 24};
opts = {...default_ops, ...opts};
@@ -142,6 +157,68 @@ class LeafletMap {
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
+ const macro_strat_info = async e => {
+ const zoom = e.target._zoom;
+ const lat = e.latlng.lat;
+ const lon = e.latlng.lng;
+ const macro_strat_data = await getMacroStratData(lat, lon, zoom);
+
+ if(macro_strat_data.mapData && macro_strat_data.mapData.length) {
+ var popup = L.popup()
+ .setLatLng([lat, lon])
+ .setContent(`
+ <div>
+ <div>
+ <span>Age:</span>
+ <span>${macro_strat_data.mapData[0].age}</span>
+ </div>
+ </div>`)
+ .openOn(this.mapLayer);
+ }
+ }
+
+
+ /* Alternative to using the api. Uses color inference. Back if we don't want to use macrostrat api*/
+ const macro_strat_color = (e) => {
+ const zoom = e.target._zoom;
+
+ let coords = this.mapLayer.project(e.latlng, zoom).floor();
+
+ let pX = coords.x / 256;
+ let pY = coords.y / 256;
+
+ coords.x = Math.floor(pX);
+ coords.y = Math.floor(pY);
+ coords.z = zoom
+
+ const tile = new Image();
+ tile.crossOrigin = "anonymous";
+ tile.src = `https://macrostrat.org/api/v2/maps/burwell/emphasized/${coords.z}/${coords.x}/${coords.y}/tile.png`;
+
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+
+ tile.addEventListener('load', function() {
+ ctx.drawImage(tile, 0, 0);
+ const dX = Math.floor((pX - coords.x) * 512);
+ const dY = Math.floor((pY - coords.y) * 512);
+ const pixel = ctx.getImageData(dX, dY, 1, 1);
+
+ ctx.fillRect(dX, dY, 10, 10);
+
+ const data = pixel.data;
+ console.log(`rgb(${data[0]} ${data[1]} ${data[2]} / ${data[3] / 255})`);
+ });
+ }
+
+ macro_strat.on('add', (e) => {
+ this.mapLayer.on('click', macro_strat_info)
+ })
+
+ macro_strat.on('remove', (e) => {
+ this.mapLayer.off('click', macro_strat_info)
+ })
+
if(map_options.layer_control !== false) {
const layers = {
"Terrain": terrainLayer,
From fd08b9ef450c2078ef4ab715052234b1b9bae1be Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Tue, 7 Jan 2025 12:23:55 -0800
Subject: [PATCH 2/6] Filling about the popup with desired info
---
js/symb/leafletMap.js | 25 +++++++++++++++++++++++--
1 file changed, 23 insertions(+), 2 deletions(-)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index 3c82617d7a..6814808e7f 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -163,15 +163,36 @@ class LeafletMap {
const lon = e.latlng.lng;
const macro_strat_data = await getMacroStratData(lat, lon, zoom);
+ const loop_strat_names = (data) => {
+ let html_str = "";
+ for(let strat_name of data.macrostrat.strat_names) {
+ html_str += `<a href="https://macrostrat.org/sift/#/strat_name/${strat_name.strat_name_id}">${strat_name.rank_name}</a> `
+ }
+
+ return html_str;
+ }
+
if(macro_strat_data.mapData && macro_strat_data.mapData.length) {
- var popup = L.popup()
+ L.popup()
.setLatLng([lat, lon])
.setContent(`
<div>
<div>
- <span>Age:</span>
+ <span><b>Unit: </b></span>
+ <span>${macro_strat_data.mapData[0].name}</span>
+ </div>
+ <div>
+ <span><b>Age: </b></span>
<span>${macro_strat_data.mapData[0].age}</span>
</div>
+ <div>
+ <span><b>Source:</b></span>
+ ${macro_strat_data.mapData[0].ref.authors}, ${macro_strat_data.mapData[0].ref.ref_title}: ${macro_strat_data.mapData[0].ref.ref_source}, ${macro_strat_data.mapData[0].ref.isbn_doi} ${macro_strat_data.mapData[0].ref.source_id} / ${macro_strat_data.mapData[0].map_id}
+ </div>
+ <div>
+ <span><b>Macrostrat ID: </b></span>
+ ${loop_strat_names(macro_strat_data.mapData[0])}
+ </div>
</div>`)
.openOn(this.mapLayer);
}
From 5cbce0910b093e536d8116d5950df228dc491492 Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Tue, 7 Jan 2025 12:28:39 -0800
Subject: [PATCH 3/6] External linking on strat_names
---
js/symb/leafletMap.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index 6814808e7f..85476ce5a8 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -166,7 +166,7 @@ class LeafletMap {
const loop_strat_names = (data) => {
let html_str = "";
for(let strat_name of data.macrostrat.strat_names) {
- html_str += `<a href="https://macrostrat.org/sift/#/strat_name/${strat_name.strat_name_id}">${strat_name.rank_name}</a> `
+ html_str += `<a target="_blank" href="https://macrostrat.org/sift/#/strat_name/${strat_name.strat_name_id}">${strat_name.rank_name}</a> `
}
return html_str;
From 7dcfb833ee53c2cf0b8716697a19591e52c89a2f Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Fri, 10 Jan 2025 14:48:55 -0800
Subject: [PATCH 4/6] style adjustments
---
js/symb/leafletMap.js | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index 85476ce5a8..7721c0e7da 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -176,21 +176,21 @@ class LeafletMap {
L.popup()
.setLatLng([lat, lon])
.setContent(`
- <div>
+ <div style="font-size:1rem">
<div>
- <span><b>Unit: </b></span>
+ <span style="font-weight:bold">Unit: </span>
<span>${macro_strat_data.mapData[0].name}</span>
</div>
<div>
- <span><b>Age: </b></span>
+ <span style="font-weight:bold">Age: </span>
<span>${macro_strat_data.mapData[0].age}</span>
</div>
- <div>
- <span><b>Source:</b></span>
+ <div style="font-size:0.8rem">
+ <span style="font-weight:bold">Source:</span>
${macro_strat_data.mapData[0].ref.authors}, ${macro_strat_data.mapData[0].ref.ref_title}: ${macro_strat_data.mapData[0].ref.ref_source}, ${macro_strat_data.mapData[0].ref.isbn_doi} ${macro_strat_data.mapData[0].ref.source_id} / ${macro_strat_data.mapData[0].map_id}
</div>
- <div>
- <span><b>Macrostrat ID: </b></span>
+ <div style="margin-top:1rem">
+ <span style="font-weight:bold">Macrostrat matched names: </span>
${loop_strat_names(macro_strat_data.mapData[0])}
</div>
</div>`)
@@ -248,7 +248,7 @@ class LeafletMap {
"Satellite": Esri_WorldImagery,
};
const overlays = {
- "Macro Strat": L.layerGroup([macro_strat])
+ "Macrostrat": L.layerGroup([macro_strat])
}
L.control.layers(layers, overlays).addTo(this.mapLayer);
}
From 2fbf226dc2071f83163cb6f2dea3a40b12ae0e35 Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Fri, 10 Jan 2025 15:08:12 -0800
Subject: [PATCH 5/6] better error handling on popup construction
---
js/symb/leafletMap.js | 48 ++++++++++++++++++++++++++++---------------
1 file changed, 32 insertions(+), 16 deletions(-)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index 7721c0e7da..3cd4f583cf 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -173,26 +173,42 @@ class LeafletMap {
}
if(macro_strat_data.mapData && macro_strat_data.mapData.length) {
+ let content = ""
+
+ if(macro_strat_data.mapData[0].name) {
+ content += `<div>
+ <span style="font-weight:bold">Unit: </span>
+ <span>${macro_strat_data.mapData[0].name}</span>
+ </div>`;
+ }
+
+ if(macro_strat_data.mapData[0].age) {
+ content+= `<div>
+ <span style="font-weight:bold">Age: </span>
+ <span>${macro_strat_data.mapData[0].age}</span>
+ </div>`;
+
+ }
+
+ if(macro_strat_data.mapData[0].ref) {
+ content += `<div style="font-size:0.8rem">
+ <span style="font-weight:bold">Source:</span>
+ ${macro_strat_data.mapData[0].ref.authors}, ${macro_strat_data.mapData[0].ref.ref_title}: ${macro_strat_data.mapData[0].ref.ref_source}, ${macro_strat_data.mapData[0].ref.isbn_doi} ${macro_strat_data.mapData[0].ref.source_id} / ${macro_strat_data.mapData[0].map_id}
+ </div>`;
+ }
+
+ if(macro_strat_data.mapData[0].macrostrat && macro_strat_data.mapData[0].macrostrat.strat_names && macro_strat_data.mapData[0].macrostrat.strat_names.length) {
+ content += `<div style="margin-top:1rem">
+ <span style="font-weight:bold">Macrostrat matched names: </span>
+ ${loop_strat_names(macro_strat_data.mapData[0])}
+ </div>`;
+ }
+
L.popup()
.setLatLng([lat, lon])
.setContent(`
<div style="font-size:1rem">
- <div>
- <span style="font-weight:bold">Unit: </span>
- <span>${macro_strat_data.mapData[0].name}</span>
- </div>
- <div>
- <span style="font-weight:bold">Age: </span>
- <span>${macro_strat_data.mapData[0].age}</span>
- </div>
- <div style="font-size:0.8rem">
- <span style="font-weight:bold">Source:</span>
- ${macro_strat_data.mapData[0].ref.authors}, ${macro_strat_data.mapData[0].ref.ref_title}: ${macro_strat_data.mapData[0].ref.ref_source}, ${macro_strat_data.mapData[0].ref.isbn_doi} ${macro_strat_data.mapData[0].ref.source_id} / ${macro_strat_data.mapData[0].map_id}
- </div>
- <div style="margin-top:1rem">
- <span style="font-weight:bold">Macrostrat matched names: </span>
- ${loop_strat_names(macro_strat_data.mapData[0])}
- </div>
+ ${content}
</div>`)
.openOn(this.mapLayer);
}
From f69f861c5a86d348920bb2e01cc03e9cb3bdedab Mon Sep 17 00:00:00 2001
From: MuchQuak <loganpwilt@gmail.com>
Date: Fri, 10 Jan 2025 15:18:25 -0800
Subject: [PATCH 6/6] Word adjustment for strat_names label
---
js/symb/leafletMap.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
index 3cd4f583cf..47ea1d81e1 100644
--- a/js/symb/leafletMap.js
+++ b/js/symb/leafletMap.js
@@ -199,7 +199,7 @@ class LeafletMap {
if(macro_strat_data.mapData[0].macrostrat && macro_strat_data.mapData[0].macrostrat.strat_names && macro_strat_data.mapData[0].macrostrat.strat_names.length) {
content += `<div style="margin-top:1rem">
- <span style="font-weight:bold">Macrostrat matched names: </span>
+ <span style="font-weight:bold">Macrostrat matched units: </span>
${loop_strat_names(macro_strat_data.mapData[0])}
</div>`;
}