diff --git a/package-lock.json b/package-lock.json index 428c93da9..fa54b38b2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a492db6fb..0f27b3582 100644 --- a/package.json +++ b/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", diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index 912cb652b..c31b1b14b 100644 --- a/src/public/app/services/library_loader.ts +++ b/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 }; diff --git a/src/public/app/widgets/geo_map.ts b/src/public/app/widgets/geo_map.ts index 32b6db6b1..b53e4ded9 100644 --- a/src/public/app/widgets/geo_map.ts +++ b/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 = `\
- Map goes here. -
` + + +
+ + +` 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], { + + }); + }); } } diff --git a/src/routes/assets.ts b/src/routes/assets.ts index d70bbade5..a46801559 100644 --- a/src/routes/assets.ts +++ b/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 {