Add map visualizer

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",

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 <img/>
+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:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      },
+    )
+    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 (
+    <>
+      <header>
+        <h1>Map</h1>
+      </header>
+
+      <main>
+        <div ref={div_map} class={styles.map}></div>
+      </main>
+    </>
+  )
+}

frontend/src/pages/map/styles.module.css

@@ -0,0 +1,9 @@
+/*:global(html) {
+  background-color: #f3f3f3;
+}*/
+
+.map {
+  /*height: 180px;*/
+  /*width: 100%;*/
+  height: 1024px;
+}

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,