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

good markers for router

Browse source
This commit is contained in:
Fedor Katurov 2020-01-17 17:55:36 +07:00
parent 50c2ac70e3
commit d4307ae336
2 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,13 +59,15 @@ const RouterUnconnected: FC<Props> = memo(
}
const totalDistance = parseFloat((summary.totalDistance / 1000).toFixed(1)) || 0;
const latlng = (coordinates.length && coordinates[coordinates.length - 1]) || null;
const latlng = waypoints[waypoints.length - 1] && (waypoints[waypoints.length - 1].latLng) || null;
const angle = angleBetweenPoints(
MainMap.latLngToContainerPoint(coordinates[coordinates.length - 2]),
MainMap.latLngToContainerPoint(coordinates[coordinates.length - 3])
MainMap.latLngToContainerPoint(waypoints[waypoints.length - 1].latLng),
MainMap.latLngToContainerPoint(coordinates[coordinates.length - 1]),
);
console.log(angle);
setDist(totalDistance);
setEnd(latlng);
setDirection(angle > -90 && angle < 90);
@ -74,8 +76,10 @@ const RouterUnconnected: FC<Props> = memo(
);
useEffect(() => {
OsrmRouter.on('waypointschanged', updateWaypoints)
OsrmRouter
.on('waypointschanged', updateWaypoints)
.on('routesfound', updateDistance)
.on('routesfound', console.log)
.addTo(MainMap);
return () => {

28
src/styles/map.less
View file

@ -189,28 +189,30 @@
.router-marker {
div {
color: @router_line;
background: @router_line;
color: white;
left: auto;
right: 50%;
transform: translate(50%, 0);
top: -20px;
right: 15px;
// transform: translate(50%, 0);
top: -5px;
position: absolute;
z-index: -10;
padding: 2px 2px 2px 4px;
border-radius: 100%;
padding: 2px 8px 2px 8px;
border-radius: 4px;
font-weight: bold;
}
&.right {
div {
padding: 2px 4px 2px 16px;
left: -3px;
right: auto;
// padding: 2px 4px 2px 16px;
// left: -3px;
right: auto;
left: 15px;
&::after {
left: 5px;
right: auto;
}
// &::after {
// left: 5px;
// right: auto;
// }
}
}
}