From 5bec256a62bc419415b105a66cae2e6d964446b5 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 30 Jan 2023 13:24:46 -0600
Subject: [PATCH] wip map

---
 assets/css/app.css                            |  4 +
 assets/js/app.js                              | 77 ++++++++++++++++---
 lib/aprs_web/controllers/page_controller.ex   |  4 +
 .../controllers/page_html/map.html.heex       | 15 ++++
 lib/aprs_web/router.ex                        |  1 +
 5 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100644 lib/aprs_web/controllers/page_html/map.html.heex

diff --git a/assets/css/app.css b/assets/css/app.css
index 378c8f9..be6d80e 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,3 +3,7 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+
+#map {
+  height: 500px;
+}
diff --git a/assets/js/app.js b/assets/js/app.js
index 44a8122..bed25d0 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -16,26 +16,81 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
-import topbar from "../vendor/topbar"
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
+import topbar from "../vendor/topbar";
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+});
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", info => topbar.delayedShow(200))
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
+window.addEventListener("phx:page-loading-start", (info) =>
+  topbar.delayedShow(200)
+);
+window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
 
+window.addEventListener("phx:page-loading-stop", (_info) => {
+  let data = {
+    markersByCallsign: {},
+    polylinesByCallsign: {},
+    recentCallsigns: [],
+    mapZoom: 10,
+  };
+
+  window.data = data;
+
+  // map stuff here
+  const MAX_ZOOM = 20;
+
+  // let map = L.map("map", {
+  //   minZoom: 1,
+  //   maxZoom: MAX_ZOOM,
+  //   worldCopyJump: true,
+  //   keyboard: true,
+  // }).setView([mapLatitude, mapLongitude], 12);
+
+  var map = L.map("map").setView([51.505, -0.09], 13);
+
+  let resizeMap = () => {
+    const height = $(window).height();
+    const width = $(window).width();
+
+    document.querySelector("#map").height(height).width(width);
+    map.invalidateSize();
+  };
+
+  // $(window)
+  //   .on("resize", () => {
+  //     resizeMap();
+  //   })
+  //   .trigger("resize");
+
+  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map);
+
+  // let markerGroup = L.markerClusterGroup({
+  //   removeOutsideVisibleBounds: true,
+  //   disableClusteringAtZoom: 8,
+  // });
+
+  // map.addLayer(markerGroup);
+});
diff --git a/lib/aprs_web/controllers/page_controller.ex b/lib/aprs_web/controllers/page_controller.ex
index cdc5ab4..0879314 100644
--- a/lib/aprs_web/controllers/page_controller.ex
+++ b/lib/aprs_web/controllers/page_controller.ex
@@ -6,4 +6,8 @@ defmodule AprsWeb.PageController do
     # so skip the default app layout.
     render(conn, :home, layout: false)
   end
+
+  def map(conn, _params) do
+    render(conn, :map, layout: false)
+  end
 end
diff --git a/lib/aprs_web/controllers/page_html/map.html.heex b/lib/aprs_web/controllers/page_html/map.html.heex
new file mode 100644
index 0000000..79b973b
--- /dev/null
+++ b/lib/aprs_web/controllers/page_html/map.html.heex
@@ -0,0 +1,15 @@
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+  crossorigin=""
+/>
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script
+  src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+  crossorigin=""
+>
+</script>
+
+<div id="map"></div>
diff --git a/lib/aprs_web/router.ex b/lib/aprs_web/router.ex
index 4d1b952..e769dcc 100644
--- a/lib/aprs_web/router.ex
+++ b/lib/aprs_web/router.ex
@@ -21,6 +21,7 @@ defmodule AprsWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :home
+    get "/map", PageController, :map
   end
 
   # Other scopes may use custom stacks.