Add ruler tool and fix types

This commit is contained in:
ThePetrovich 2025-07-01 21:09:15 +08:00
parent 329c1c2215
commit bb390d50dc
16 changed files with 582 additions and 158 deletions

View file

@ -92,6 +92,28 @@
border-radius: var(--bs-border-radius) !important;
}
.leaflet-tooltip-top::before {
border-top-color: var(--bs-border-color) !important;
}
.leaflet-tooltip-bottom::before {
border-bottom-color: var(--bs-border-color) !important;
}
.leaflet-tooltip-left::before {
border-left-color: var(--bs-border-color) !important;
}
.leaflet-tooltip-right::before {
border-right-color: var(--bs-border-color) !important;
}
.leaflet-tooltip {
background-color: var(--bs-body-bg) !important;
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
border-radius: var(--bs-border-radius) !important;
color: var(--bs-body-color);
box-shadow: none !important;
}
@media (max-width: 767.98px)
{
.coordinates-display {

Binary file not shown.

After

Width:  |  Height:  |  Size: 756 B

View file

@ -0,0 +1,41 @@
.leaflet-ruler{
height: 35px;
width: 35px;
background-image: url("./icon.png"); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
background-repeat: no-repeat;
background-position: center;
}
.leaflet-ruler:hover{
background-image: url("./icon.png"); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
}
.leaflet-ruler-clicked{
height: 35px;
width: 35px;
background-repeat: no-repeat;
background-position: center;
background-image: url("./icon.png");
border-color: chartreuse !important;
}
.leaflet-bar{
background-color: #ffffff;
}
.leaflet-control {
cursor: pointer;
}
.result-tooltip{
background-color: white;
border-width: medium;
border-color: #de0000;
font-size: smaller;
}
.moving-tooltip{
background-color: rgba(255, 255, 255, .7);
background-clip: padding-box;
opacity: 0.5;
border: dotted;
border-color: red;
font-size: smaller;
}
.plus-length{
padding-left: 45px;
}