mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-09-02 21:42:15 +08:00
feat(geomap): add labels to markers
This commit is contained in:
parent
08722d5935
commit
6b906a91d7
@ -10,8 +10,6 @@ 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";
|
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">
|
||||||
<style>
|
<style>
|
||||||
@ -31,6 +29,7 @@ const TPL = `\
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.geo-map-container .leaflet-div-icon .icon-shadow {
|
.geo-map-container .leaflet-div-icon .icon-shadow {
|
||||||
@ -40,7 +39,7 @@ const TPL = `\
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.geo-map-container .leaflet-div-icon span {
|
.geo-map-container .leaflet-div-icon .bx {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
@ -50,6 +49,23 @@ const TPL = `\
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
font-size: 17px;
|
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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
@ -163,6 +179,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
|
|||||||
<img class="icon" src="${asset_path}/node_modules/leaflet/dist/images/marker-icon.png" />
|
<img class="icon" src="${asset_path}/node_modules/leaflet/dist/images/marker-icon.png" />
|
||||||
<img class="icon-shadow" src="${asset_path}/node_modules/leaflet/dist/images/marker-shadow.png" />
|
<img class="icon-shadow" src="${asset_path}/node_modules/leaflet/dist/images/marker-shadow.png" />
|
||||||
<span class="bx ${childNote.getIcon()}"></span>
|
<span class="bx ${childNote.getIcon()}"></span>
|
||||||
|
<span class="title-label">${childNote.title}</span>
|
||||||
`,
|
`,
|
||||||
iconSize: [ 25, 41 ],
|
iconSize: [ 25, 41 ],
|
||||||
iconAnchor: [ 12, 41 ]
|
iconAnchor: [ 12, 41 ]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user