diff --git a/src/map/Router/index.tsx b/src/map/Router/index.tsx index e139aa2..ba24df4 100644 --- a/src/map/Router/index.tsx +++ b/src/map/Router/index.tsx @@ -75,7 +75,6 @@ const RouterUnconnected: FC = memo( useEffect(() => { OsrmRouter.on('waypointschanged', updateWaypoints) - .on('waypointschanged', console.log) .on('routesfound', updateDistance) .addTo(MainMap); @@ -94,11 +93,11 @@ const RouterUnconnected: FC = memo( interactive: false, icon: divIcon({ html: ` -
+
${parseFloat((distance + dist).toFixed(1))}
`, - className: classNames('leaflet-km-marker router-end-marker', { right: !direction }), + className: classNames('router-marker', { right: !direction }), iconSize: [11, 11], iconAnchor: [6, 6], }), diff --git a/src/styles/map.less b/src/styles/map.less index 06bfaf1..264093e 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -187,30 +187,22 @@ } -.router-end-marker { - .leaflet-km-dist { +.router-marker { + div { background: @router_line; left: auto; - right: -3px; - top: -3px; + right: 50%; + transform: translate(50%, 0); + top: -20px; position: absolute; z-index: -10; - padding: 2px 16px 2px 4px; - - &::after { - content: ' '; - width: 8px; - height: 8px; - border-radius: 4px; - background: white; - position: absolute; - right: 5px; - top: 5px; - } + padding: 2px 2px 2px 4px; + color: white; + border-radius: 100%; } &.right { - .leaflet-km-dist { + div { padding: 2px 4px 2px 16px; left: -3px; right: auto;