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

new marker for router

Browse source
This commit is contained in:
Fedor Katurov 2020-01-17 17:25:47 +07:00
parent 24641a33f7
commit d752039de9
2 changed files with 11 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/map/Router/index.tsx
View file

@ -75,7 +75,6 @@ const RouterUnconnected: FC<Props> = memo(
useEffect(() => { useEffect(() => {
OsrmRouter.on('waypointschanged', updateWaypoints) OsrmRouter.on('waypointschanged', updateWaypoints)
.on('waypointschanged', console.log)
.on('routesfound', updateDistance) .on('routesfound', updateDistance)
.addTo(MainMap); .addTo(MainMap);
@ -94,11 +93,11 @@ const RouterUnconnected: FC<Props> = memo(
interactive: false, interactive: false,
icon: divIcon({ icon: divIcon({
html: ` html: `
<div class="leaflet-km-dist"> <div>
${parseFloat((distance + dist).toFixed(1))} ${parseFloat((distance + dist).toFixed(1))}
</div> </div>
`, `,
className: classNames('leaflet-km-marker router-end-marker', { right: !direction }), className: classNames('router-marker', { right: !direction }),
iconSize: [11, 11], iconSize: [11, 11],
iconAnchor: [6, 6], iconAnchor: [6, 6],
}), }),

26
src/styles/map.less
View file

@ -187,30 +187,22 @@
} }
.router-end-marker { .router-marker {
.leaflet-km-dist { div {
background: @router_line; background: @router_line;
left: auto; left: auto;
right: -3px; right: 50%;
top: -3px; transform: translate(50%, 0);
top: -20px;
position: absolute; position: absolute;
z-index: -10; z-index: -10;
padding: 2px 16px 2px 4px; padding: 2px 2px 2px 4px;
color: white;
&::after { border-radius: 100%;
content: ' ';
width: 8px;
height: 8px;
border-radius: 4px;
background: white;
position: absolute;
right: 5px;
top: 5px;
}
} }
&.right { &.right {
.leaflet-km-dist { div {
padding: 2px 4px 2px 16px; padding: 2px 4px 2px 16px;
left: -3px; left: -3px;
right: auto; right: auto;