try vector tiles

assets/js/types/leaflet-vectorgrid.d.ts

@@ -0,0 +1,37 @@
+// Type definitions for leaflet.vectorgrid
+import * as L from 'leaflet';
+
+declare module 'leaflet' {
+  namespace vectorGrid {
+    interface VectorGridOptions extends L.GridLayerOptions {
+      rendererFactory?: L.Renderer;
+      vectorTileLayerStyles?: any;
+      interactive?: boolean;
+      getFeatureId?: (feature: any) => string | number;
+    }
+
+    interface ProtobufOptions extends VectorGridOptions {
+      subdomains?: string | string[];
+      key?: string;
+      token?: string;
+      maxNativeZoom?: number;
+    }
+
+    class VectorGrid extends L.GridLayer {
+      constructor(options?: VectorGridOptions);
+      setFeatureStyle(id: string | number, style: L.PathOptions): void;
+      resetFeatureStyle(id: string | number): void;
+      clearHighlight(): void;
+    }
+
+    class Protobuf extends VectorGrid {
+      constructor(url: string, options?: ProtobufOptions);
+    }
+
+    function protobuf(url: string, options?: ProtobufOptions): Protobuf;
+  }
+
+  function vectorGrid(options?: any): any;
+}
+
+export {};

assets/js/vendor.js

@@ -1,28 +1,2 @@
-// Vendor bundle for all third-party dependencies
+// This file is now empty since all vendor libraries are loaded from CDN
-// This file bundles all npm packages to avoid resolution issues during Docker builds
+// See root.html.heex for CDN script tags
-
-// Import CSS files first
-import 'leaflet/dist/leaflet.css';
-import 'leaflet.markercluster/dist/MarkerCluster.css';
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-
-// Export Leaflet and plugins
-import * as L from 'leaflet';
-import 'leaflet.heat';
-import 'leaflet.markercluster';
-import 'overlapping-marker-spiderfier-leaflet';
-
-// Export Chart.js and adapter
-import Chart from 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-
-// Export topbar
-import topbar from 'topbar';
-
-// Make libraries available globally
-window.L = L;
-window.Chart = Chart;
-window.topbar = topbar;
-
-// Export for ES modules
-export { L, Chart, topbar };

assets/package.json

@@ -1,13 +1,5 @@
 {
-  "dependencies": {
+  "dependencies": {},
-    "chart.js": "^4.5.0",
-    "chartjs-adapter-date-fns": "^3.0.0",
-    "leaflet": "^1.9.4",
-    "leaflet.heat": "^0.2.0",
-    "leaflet.markercluster": "^1.5.3",
-    "overlapping-marker-spiderfier-leaflet": "^0.2.7",
-    "topbar": "^3.0.0"
-  },
   "name": "assets",
   "version": "1.0.0",
   "main": "index.js",

config/runtime.exs

@@ -109,7 +109,8 @@ if config_env() == :prod do
       "http://10.0.19.222:33897",
       "https://s.aprs.me",
       "https://js.sentry-cdn.com",
-      "https://*.sentry.io"
+      "https://*.sentry.io",
+      "https://*.openstreetmap.org"
     ]
 
   # Optional: Set the default "from" email address

lib/aprsme_web/components/layouts/root.html.heex

@@ -34,9 +34,29 @@
       {assigns[:page_title] || "Aprs"}
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
-    <link phx-track-static rel="stylesheet" href={~p"/assets/vendor.css"} />
+    
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/vendor.js"}>
+    <!-- Leaflet CSS -->
-    </script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
+    
+    <!-- Core libraries -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
+    <script src="https://unpkg.com/overlapping-marker-spiderfier-leaflet@0.2.7/oms.min.js"></script>
+    
+    <!-- Chart.js -->
+    <script src="https://unpkg.com/chart.js@4.5.0/dist/chart.umd.js"></script>
+    <script src="https://unpkg.com/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    
+    <!-- Topbar -->
+    <script src="https://unpkg.com/topbar@3.0.0/topbar.min.js"></script>
+    
+    <!-- Leaflet VectorGrid for vector tiles -->
+    <script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js"></script>
+    
+    <!-- App scripts -->
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
     <script>