Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 00:35:50 +01:00
Code Issues Packages Projects Releases Activity

chore(react/collections): start porting geomap

Browse Source
This commit is contained in:
Elian Doran
2025-09-03 23:17:35 +03:00
parent 5ea15cc7eb
commit 1969ce562a
27 changed files with 165 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/client/src/widgets/view_widgets/geo_view/index.ts
View File

@@ -1,7 +1,6 @@
import ViewMode, { ViewModeArgs } from "../view_mode.js";
import L from "leaflet";
import type { GPX, LatLng, Layer, LeafletMouseEvent, Map, Marker } from "leaflet";
import "leaflet/dist/leaflet.css";
import SpacedUpdate from "../../../services/spaced_update.js";
import { t } from "../../../services/i18n.js";
import processNoteWithMarker, { processNoteWithGpxTrack } from "./markers.js";
@@ -13,88 +12,6 @@ import { openMapContextMenu } from "./context_menu.js";
import attributes from "../../../services/attributes.js";
import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer.js";
const TPL = /*html*/`
<div class="geo-view">
<style>
.geo-view {
overflow: hidden;
position: relative;
height: 100%;
}
.geo-map-container {
height: 100%;
overflow: hidden;
}
.leaflet-pane {
z-index: 1;
}
.leaflet-top,
.leaflet-bottom {
z-index: 997;
}
.geo-map-container.placing-note {
cursor: crosshair;
}
.geo-map-container .marker-pin {
position: relative;
}
.geo-map-container .leaflet-div-icon {
position: relative;
background: transparent;
border: 0;
overflow: visible;
}
.geo-map-container .leaflet-div-icon .icon-shadow {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.geo-map-container .leaflet-div-icon .bx {
position: absolute;
top: 3px;
left: 2px;
background-color: white;
color: black;
padding: 2px;
border-radius: 50%;
font-size: 17px;
}
.geo-map-container .leaflet-div-icon .title-label {
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
height: 1rem;
color: black;
width: 100px;
text-align: center;
text-overflow: ellipsis;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
white-space: no-wrap;
overflow: hidden;
}
.geo-map-container.dark .leaflet-div-icon .title-label {
color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
</style>
<div class="geo-map-container"></div>
</div>`;
interface MapData {
view?: {
center?: LatLng | [number, number];
@@ -102,8 +19,6 @@ interface MapData {
};
}
const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
const DEFAULT_ZOOM = 2;
export const LOCATION_ATTRIBUTE = "geolocation";
enum State {
@@ -142,27 +57,8 @@ export default class GeoView extends ViewMode<MapData> {
}
async renderMap() {
const map = L.map(this.$container[0], {
worldCopyJump: true
});
const layerName = this.parentNote.getLabelValue("map:style") ?? ;
const layerName = this.parentNote.getLabelValue("map:style") ?? DEFAULT_MAP_LAYER_NAME;
let layer: Layer;
const layerData = MAP_LAYERS[layerName];
if (layerData.type === "vector") {
const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
await import("@maplibre/maplibre-gl-leaflet");
layer = L.maplibreGL({
style: style as any
});
} else {
layer = L.tileLayer(layerData.url, {
attribution: layerData.attribution,
detectRetina: true
});
}
if (this.parentNote.hasLabel("map:scale")) {
L.control.scale().addTo(map);
@@ -220,7 +116,6 @@ export default class GeoView extends ViewMode<MapData> {
// Restore viewport position & zoom
const center = parsedContent?.view?.center ?? DEFAULT_COORDINATES;
const zoom = parsedContent?.view?.zoom ?? DEFAULT_ZOOM;
map.setView(center, zoom);
}
private onSave() {