From c98891d4bd67556b2e327fe239d09f92d4dcc56a Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 15 Jan 2024 15:23:40 +0100
Subject: [PATCH] Server: add first docs and experiments

---
 Docs/SettingUpPSQL.md | 11 ++++++++++
 src/UI/Test.svelte    | 47 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 Docs/SettingUpPSQL.md

diff --git a/Docs/SettingUpPSQL.md b/Docs/SettingUpPSQL.md
new file mode 100644
index 0000000000..67c2ddeb2f
--- /dev/null
+++ b/Docs/SettingUpPSQL.md
@@ -0,0 +1,11 @@
+sudo docker run --name some-postgis -e POSTGRES_PASSWORD=none -e POSTGRES_USER=user -d -p 5444:5432 -v /home/pietervdvn/data/pgsql/:/var/lib/postgresql/data postgis/postgis
+
+-> Via PGAdmin een database maken en:
+1) Postgis activeren (rechtsklikken > Create > extension)
+2) HStore activeren
+
+Installeer osm2pgsql (hint: compile from source is painless)
+
+pg_tileserv kan hier gedownload worden: https://github.com/CrunchyData/pg_tileserv
+
+DATABASE_URL=postgresql://user:none@localhost:5444/osm-poi ./pg_tileserv 
diff --git a/src/UI/Test.svelte b/src/UI/Test.svelte
index c4d5d18230..91b4aa3068 100644
--- a/src/UI/Test.svelte
+++ b/src/UI/Test.svelte
@@ -1,7 +1,50 @@
 <script lang="ts">
   // Testing grounds
+  import { UIEventSource } from "../Logic/UIEventSource"
+  import MaplibreMap from "./Map/MaplibreMap.svelte"
+  import { Map as MlMap } from "maplibre-gl"
+  import { MapLibreAdaptor } from "./Map/MapLibreAdaptor"
 
-import Icon from "./Map/Icon.svelte"
+  let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
+  let adaptor = new MapLibreAdaptor(map)
+  adaptor.location.setData({
+    lat: 42.5404,
+    lon:1.4832
+    
+  })
+  adaptor.zoom.setData(10)
+  map.addCallbackAndRunD(map => {
+    map.on("load", () => {
+
+      map.addSource("drinking_water", {
+        "type": "vector",
+        "tiles": ["http://127.0.0.2:7800/public.drinking_water/{z}/{x}/{y}.pbf"] // http://127.0.0.2:7800/public.drinking_water.json",
+      })
+
+      map.addLayer(
+        {
+          "id": "drinking_water_layer",
+          "type": "circle",
+          "source": "drinking_water",
+          "source-layer": "public.drinking_water",
+          "paint": {
+            "circle-radius": 5,
+            "circle-color": "#ff00ff",
+            "circle-stroke-width": 2,
+            "circle-stroke-color": "#000000",
+          },
+        },
+      )
+
+      map.on('click', 'drinking_water_layer', (e) => {
+// Copy coordinates array.
+        console.log(e)
+console.warn(">>>", e.features[0])
+      })
+    })
+  })
 </script>
 
-<Icon clss="h-16 w-16" icon="heart" color="#ff0000"/>
+<div class="h-screen w-screen">
+<MaplibreMap {map} />
+</div>