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 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( const angle = angleBetweenPoints(
MainMap.latLngToContainerPoint(coordinates[coordinates.length - 2]), MainMap.latLngToContainerPoint(waypoints[waypoints.length - 1].latLng),
MainMap.latLngToContainerPoint(coordinates[coordinates.length - 3]) MainMap.latLngToContainerPoint(coordinates[coordinates.length - 1]),
); );
console.log(angle);
setDist(totalDistance); setDist(totalDistance);
setEnd(latlng); setEnd(latlng);
setDirection(angle > -90 && angle < 90); setDirection(angle > -90 && angle < 90);
@ -74,8 +76,10 @@ const RouterUnconnected: FC<Props> = memo(
); );
useEffect(() => { useEffect(() => {
OsrmRouter.on('waypointschanged', updateWaypoints) OsrmRouter
.on('waypointschanged', updateWaypoints)
.on('routesfound', updateDistance) .on('routesfound', updateDistance)
.on('routesfound', console.log)
.addTo(MainMap); .addTo(MainMap);
return () => { return () => {

28
src/styles/map.less
View file

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