2025-01-20 21:27:06 +02:00
|
|
|
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>
|
2025-01-20 20:36:58 +02:00
|
|
|
</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 {
|
|
|
|
|
2025-01-20 21:27:06 +02:00
|
|
|
map?: Map;
|
2025-01-21 13:46:18 +02:00
|
|
|
$container!: JQuery<HTMLElement>;
|
2025-01-20 23:27:32 +02:00
|
|
|
private initCallback?: InitCallback;
|
2025-01-20 21:27:06 +02:00
|
|
|
|
2025-01-20 23:27:32 +02:00
|
|
|
constructor(widgetMode: "type", initCallback?: InitCallback) {
|
2025-01-20 18:45:56 +02:00
|
|
|
super();
|
2025-01-20 21:27:06 +02:00
|
|
|
this.initCallback = initCallback;
|
2025-01-20 18:45:56 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
doRender() {
|
2025-01-20 19:18:29 +02:00
|
|
|
this.$widget = $(TPL);
|
|
|
|
|
2025-01-21 13:46:18 +02:00
|
|
|
this.$container = this.$widget.find(".geo-map-container");
|
2025-01-20 19:18:29 +02:00
|
|
|
|
|
|
|
library_loader.requireLibrary(library_loader.LEAFLET)
|
2025-01-20 20:36:58 +02:00
|
|
|
.then(async () => {
|
|
|
|
const L = (await import("leaflet")).default;
|
|
|
|
|
2025-01-21 13:46:18 +02:00
|
|
|
const map = L.map(this.$container[0], {
|
2025-01-28 17:13:15 +02:00
|
|
|
worldCopyJump: true
|
2025-01-20 19:18:29 +02:00
|
|
|
});
|
2025-01-20 19:20:59 +02:00
|
|
|
|
2025-01-20 21:27:06 +02:00
|
|
|
this.map = map;
|
|
|
|
if (this.initCallback) {
|
2025-01-20 23:27:32 +02:00
|
|
|
this.initCallback(L);
|
2025-01-20 21:27:06 +02:00
|
|
|
}
|
2025-01-20 19:20:59 +02:00
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
attribution: '© <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
|
|
|
}
|
|
|
|
|
|
|
|
}
|