feat(geomap): load leaflet

package-lock.json

@@ -16,6 +16,7 @@
         "@mermaid-js/layout-elk": "0.1.7",
         "@mind-elixir/node-menu": "1.0.3",
         "@triliumnext/express-partial-content": "1.0.1",
+        "@types/leaflet": "1.9.16",
         "@types/react-dom": "18.3.5",
         "archiver": "7.0.1",
         "async-mutex": "0.5.0",
@@ -67,6 +68,7 @@
         "jsplumb": "2.15.6",
         "katex": "0.16.21",
         "knockout": "3.5.1",
+        "leaflet": "1.9.4",
         "mark.js": "8.11.1",
         "marked": "15.0.6",
         "mermaid": "11.4.1",
@@ -3847,6 +3849,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
+      "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -11437,6 +11448,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/limiter": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",

package.json

@@ -61,6 +61,7 @@
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.3",
     "@triliumnext/express-partial-content": "1.0.1",
+    "@types/leaflet": "1.9.16",
     "@types/react-dom": "18.3.5",
     "archiver": "7.0.1",
     "async-mutex": "0.5.0",
@@ -112,6 +113,7 @@
     "jsplumb": "2.15.6",
     "katex": "0.16.21",
     "knockout": "3.5.1",
+    "leaflet": "1.9.4",
     "mark.js": "8.11.1",
     "marked": "15.0.6",
     "mermaid": "11.4.1",

src/public/app/services/library_loader.ts

@@ -106,6 +106,11 @@ const HIGHLIGHT_JS: Library = {
     }
 };
 
+const LEAFLET: Library = {
+    js: [ "node_modules/leaflet/dist/leaflet.js" ],
+    css: [ "node_modules/leaflet/dist/leaflet.css" ],
+}
+
 async function requireLibrary(library: Library) {
     if (library.css) {
         library.css.map((cssUrl) => requireCss(cssUrl));
@@ -196,5 +201,6 @@ export default {
     MERMAID,
     MARKJS,
     I18NEXT,
-    HIGHLIGHT_JS
+    HIGHLIGHT_JS,
+    LEAFLET
 };

src/public/app/widgets/geo_map.ts

@@ -1,9 +1,21 @@
+import library_loader from "../services/library_loader.js";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const TPL = `\
 <div class="geo-map-widget">
-    Map goes here.
-</div>`
+    <style>
+        .note-detail-geo-map,
+        .geo-map-widget,
+        .geo-map-container {
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+
+    <div class="geo-map-container"></div>
+</div>
+
+`
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
 
@@ -12,7 +24,17 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
     }
 
     doRender() {
-        this.$widget = $(TPL)
+        this.$widget = $(TPL);
+
+        const $container = this.$widget.find(".geo-map-container");
+
+        library_loader.requireLibrary(library_loader.LEAFLET)
+            .then(() => {
+                //@ts-ignore
+                L.map($container[0], {
+
+                });
+            });
     }
 
 }

src/routes/assets.ts

@@ -105,6 +105,8 @@ async function register(app: express.Application) {
     app.use(`/${assetPath}/node_modules/mind-elixir/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mind-elixir/dist/")));
     app.use(`/${assetPath}/node_modules/@mind-elixir/node-menu/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@mind-elixir/node-menu/dist/")));
     app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/")));
+
+    app.use(`/${assetPath}/node_modules/leaflet/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/leaflet/dist/")));
 }
 
 export default {