Notes/src/public/app/widgets/geo_map.ts

58 lines
1.6 KiB
TypeScript
Raw Normal View History

import type { Map } from "leaflet";
2025-01-20 19:18:29 +02:00
import library_loader from "../services/library_loader.js";
2025-01-20 18:45:56 +02:00
import NoteContextAwareWidget from "./note_context_aware_widget.js";
const TPL = `\
<div class="geo-map-widget">
2025-01-20 19:18:29 +02:00
<style>
.note-detail-geo-map,
.geo-map-widget,
.geo-map-container {
height: 100%;
overflow: hidden;
}
</style>
<div class="geo-map-container"></div>
</div>`
2025-01-20 19:18:29 +02:00
2025-01-20 23:27:32 +02:00
export type Leaflet = typeof import("leaflet");
export type InitCallback = ((L: Leaflet) => void);
2025-01-20 18:45:56 +02:00
export default class GeoMapWidget extends NoteContextAwareWidget {
map?: Map;
$container!: JQuery<HTMLElement>;
2025-01-20 23:27:32 +02:00
private initCallback?: InitCallback;
2025-01-20 23:27:32 +02:00
constructor(widgetMode: "type", initCallback?: InitCallback) {
2025-01-20 18:45:56 +02:00
super();
this.initCallback = initCallback;
2025-01-20 18:45:56 +02:00
}
doRender() {
2025-01-20 19:18:29 +02:00
this.$widget = $(TPL);
this.$container = this.$widget.find(".geo-map-container");
2025-01-20 19:18:29 +02:00
library_loader.requireLibrary(library_loader.LEAFLET)
.then(async () => {
const L = (await import("leaflet")).default;
const map = L.map(this.$container[0], {
worldCopyJump: true
2025-01-20 19:18:29 +02:00
});
2025-01-20 19:20:59 +02:00
this.map = map;
if (this.initCallback) {
2025-01-20 23:27:32 +02:00
this.initCallback(L);
}
2025-01-20 19:20:59 +02:00
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
2025-01-20 19:18:29 +02:00
});
2025-01-20 18:45:56 +02:00
}
}