From 49e0cbe24e56f72c0edad6fbee06e6b56f53d895 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Thu, 28 Aug 2025 19:12:34 +0200 Subject: [PATCH 1/2] Add map page --- frontend/package-lock.json | 7 +++ frontend/package.json | 1 + frontend/src/pages/map/Thumbnail.jsx | 38 ++++++++++++++ frontend/src/pages/map/index.jsx | 65 ++++++++++++++++++++++++ frontend/src/pages/map/styles.module.css | 9 ++++ lib/ecotaxa.js | 6 +++ 6 files changed, 126 insertions(+) create mode 100644 frontend/src/pages/map/Thumbnail.jsx create mode 100644 frontend/src/pages/map/index.jsx create mode 100644 frontend/src/pages/map/styles.module.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 383b31462..24e03c9c9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@solidjs/router": "^0.15.1", "array-shuffle": "^3.0.0", "autoprefixer": "^10.4.20", + "leaflet": "^2.0.0-alpha.1", "medium-zoom": "^1.1.0", "mqtt": "^5.14.0", "postcss": "^8.5.6", @@ -2877,6 +2878,12 @@ "dev": true, "license": "MIT" }, + "node_modules/leaflet": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-2.0.0-alpha.1.tgz", + "integrity": "sha512-2EJU27z/wljOgQCyybRkfrm5Xc3uy6huKehh0UAPsrAdwnSMxaplsqCl9cXPAuDm6D7uL6PCznYMDVIsaAdSdA==", + "license": "BSD-2-Clause" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index de022adb3..85a04498e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "@solidjs/router": "^0.15.1", "array-shuffle": "^3.0.0", "autoprefixer": "^10.4.20", + "leaflet": "^2.0.0-alpha.1", "medium-zoom": "^1.1.0", "mqtt": "^5.14.0", "postcss": "^8.5.6", diff --git a/frontend/src/pages/map/Thumbnail.jsx b/frontend/src/pages/map/Thumbnail.jsx new file mode 100644 index 000000000..dd2da7e5c --- /dev/null +++ b/frontend/src/pages/map/Thumbnail.jsx @@ -0,0 +1,38 @@ +import { onCleanup, onMount } from "solid-js" +import styles from "./styles.module.css" + +export default function Thumbnail(props) { + const img = ( + {props.object.label} + ) + + onMount(() => { + props.zoom.attach(img) + }) + + onCleanup(() => { + props.zoom.detach(img) + }) + + return ( + { + evt.preventDefault() + }} + > + {img} + + ) +} diff --git a/frontend/src/pages/map/index.jsx b/frontend/src/pages/map/index.jsx new file mode 100644 index 000000000..c3b50360e --- /dev/null +++ b/frontend/src/pages/map/index.jsx @@ -0,0 +1,65 @@ +import styles from "./styles.module.css" + +import { For, createSignal, Show, onMount, createResource } from "solid-js" +import L, { Map, TileLayer, Marker, Circle, Polygon, Popup } from "leaflet" + +import "leaflet/dist/leaflet.css" +import { getObjects } from "../../../../lib/ecotaxa" + +// https://github.com/ecotaxa/ecotaxa_back/issues/64 +const api_url = new URL("http://example.com/ecotaxa/api/") +api_url.hostname = document.location.hostname + +// No need for CORS for +const vault_url = "https://ecotaxa.obs-vlfr.fr/vault/" + +export default function MapPage() { + let div_map + + onMount(() => { + const map = new Map(div_map) + // map.setZoom(2) + .setView([48.587410962886686, -3.8383494867168175], 2) + + const tile_layer = new TileLayer( + "https://tile.openstreetmap.org/{z}/{x}/{y}.png", + { + maxZoom: 19, + attribution: + '© OpenStreetMap', + }, + ) + tile_layer.addTo(map) + + getObjects({ + api_url, + vault_url, + project_id: 15730, + window_start: 0, + window_size: 5000, + }).then((result) => { + console.log(result) + result.objects.forEach((object) => { + if (object.latitude && object.longitude) { + const market = new Marker([object.latitude, object.longitude]) + market.addTo(map) + } + }) + }) + + // const marker = new Marker([48.587410962886686, -3.8383494867168175]) + // marker.addTo(map) + }) + + return ( + <> +
+

Map

+
+ +
+
+
+ + ) +} diff --git a/frontend/src/pages/map/styles.module.css b/frontend/src/pages/map/styles.module.css new file mode 100644 index 000000000..30b52cfb7 --- /dev/null +++ b/frontend/src/pages/map/styles.module.css @@ -0,0 +1,9 @@ +/*:global(html) { + background-color: #f3f3f3; +}*/ + +.map { + /*height: 180px;*/ + /*width: 100%;*/ + height: 1024px; +} diff --git a/lib/ecotaxa.js b/lib/ecotaxa.js index f064fbf8f..5dfe4571c 100644 --- a/lib/ecotaxa.js +++ b/lib/ecotaxa.js @@ -31,6 +31,8 @@ export async function getObjects({ "img.thumb_width", "img.thumb_height", "txo.display_name", + "obj.latitude", + "obj.longitude", ] url.search = new URLSearchParams({ @@ -61,12 +63,16 @@ export async function getObjects({ const thumb_width = details[idx][4] const thumb_height = details[idx][5] const label = details[idx][6] + const latitude = details[idx][7] + const longitude = details[idx][8] const url = new URL(file_name, vault_url) const thumb_url = new URL(thumb_file_name || file_name, vault_url) return { label, + latitude, + longitude, file: { url: url, width, From 904d53adab23430c479273394bcdfc817df4a36e Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Thu, 28 Aug 2025 19:13:08 +0200 Subject: [PATCH 2/2] f --- frontend/src/pages/map/Thumbnail.jsx | 38 ---------------------------- 1 file changed, 38 deletions(-) delete mode 100644 frontend/src/pages/map/Thumbnail.jsx diff --git a/frontend/src/pages/map/Thumbnail.jsx b/frontend/src/pages/map/Thumbnail.jsx deleted file mode 100644 index dd2da7e5c..000000000 --- a/frontend/src/pages/map/Thumbnail.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import { onCleanup, onMount } from "solid-js" -import styles from "./styles.module.css" - -export default function Thumbnail(props) { - const img = ( - {props.object.label} - ) - - onMount(() => { - props.zoom.attach(img) - }) - - onCleanup(() => { - props.zoom.detach(img) - }) - - return ( - { - evt.preventDefault() - }} - > - {img} - - ) -}