muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed arrows

Browse source
This commit is contained in:
Fedor Katurov 2020-01-16 16:59:09 +07:00
parent bdcd7fd814
commit 973f934614
2 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/styles/map.less
View file

@ -14,12 +14,16 @@
}
.leaflet-touch .leaflet-bar a {
border-radius: @panel_radius !important;
border-radius: @panel_radius !important;
}
@keyframes vertex_spin {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.leaflet-vertex-drag-helper {
@ -43,16 +47,16 @@
.vertex-icon-mixin(@left, @right) {
&::after {
content: ' ';
position:absolute;
top:4px;
position: absolute;
top: 4px;
left: @left;
right: @right;
width:8px;
height:8px;
width: 8px;
height: 8px;
background: white;
border-radius: 8px;
transform:scale(1);
transition:transform 150ms;
transform: scale(1);
transition: transform 150ms;
}
}
@ -63,8 +67,8 @@
border: none;
width: 16px !important;
height: 16px !important;
margin-left:-8px !important;
margin-top:-8px !important;
margin-left: -8px !important;
margin-top: -8px !important;
background: transparent;
position: absolute;
cursor: grab;
@ -110,7 +114,8 @@
pointer-events: none !important;
}
.leaflet-km-marker, .leaflet-km-marker-2 {
.leaflet-km-marker,
.leaflet-km-marker-2 {
position: absolute;
z-index: 0 !important;
@ -137,6 +142,12 @@
left: 50%;
transform: translate(-50%, 0);
}
&.reverse {
svg {
transform: translate(-50%, 0) rotate(180deg);
}
}
}
}
@ -191,7 +202,7 @@
}
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
display: none;
}
.leaflet-bar {

10
src/utils/marks.ts
View file

@ -87,12 +87,12 @@ class KmMarksLayer extends LayerGroup {
interactive: false,
icon: divIcon({
html: `
<div class="leaflet-km-dist" style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg(
angle
)}deg);">
<div
class="leaflet-km-dist ${allwaysPositiveAngleDeg(angle) !== angle ? 'reverse' : ''}"
style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg(angle)}deg);"
>
${distance}
<svg width="48" height="48" preserveAspectRatio="xMidYMid">
<svg width="48" height="48" preserveAspectRatio="xMidYMid" transform="rotate(0deg)">
<image xlink:href="${arrow_image}" x="0" y="0" width="48" height="48"/>
</svg>
</div>