Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-02 19:01:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(geomap): setup marker based on note icon

Browse Source
This commit is contained in:
Elian Doran 2025-01-21 18:53:36 +02:00
parent b2a5f06646
commit 087d4790f4
No known key found for this signature in database
1 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/public/app/widgets/type_widgets/geo_map.ts
View File

@ -8,6 +8,9 @@ import dialogService from "../../services/dialog.js";
import type { EventData } from "../../components/app_context.js"; import type { EventData } from "../../components/app_context.js";
import { t } from "../../services/i18n.js"; import { t } from "../../services/i18n.js";
import attributes from "../../services/attributes.js"; import attributes from "../../services/attributes.js";
import asset_path from "../../../../services/asset_path.js";
const ICON_WIDTH = 30;
const TPL = `\ const TPL = `\
<div class="note-detail-geo-map note-detail-printable"> <div class="note-detail-geo-map note-detail-printable">
@ -19,6 +22,27 @@ const TPL = `\
.geo-map-container.placing-note { .geo-map-container.placing-note {
cursor: crosshair; cursor: crosshair;
} }
.geo-map-container .marker-pin {
position: relative;
}
.geo-map-container .leaflet-div-icon {
position: relative;
background: transparent;
border: 0;
}
.geo-map-container .leaflet-div-icon span {
position: absolute;
top: 3px;
left: 3px;
background-color: white;
color: black;
padding: 2px;
border-radius: 50%;
font-size: 16px;
}
</style> </style>
</div>`; </div>`;
@ -127,7 +151,17 @@ export default class GeoMapTypeWidget extends TypeWidget {
} }
const [ lat, lng ] = latLng.split(",", 2).map((el) => parseFloat(el)); const [ lat, lng ] = latLng.split(",", 2).map((el) => parseFloat(el));
const icon = L.divIcon({
html: `\
<img src="${asset_path}/node_modules/leaflet/dist/images/marker-icon.png" />
<span class="bx ${childNote.getIcon()}"></span>
`,
iconSize: [ 25, 42 ],
iconAnchor: [ 7, 42 ]
})
const marker = L.marker(L.latLng(lat, lng), { const marker = L.marker(L.latLng(lat, lng), {
icon,
draggable: true, draggable: true,
autoPan: true, autoPan: true,
autoPanSpeed: 5 autoPanSpeed: 5