wip map

assets/css/app.css

@@ -3,3 +3,7 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+
+#map {
+  height: 500px;
+}

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);
+});

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

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>

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.