diff --git a/src/components/map/CurrentLocation.tsx b/src/components/map/CurrentLocation.tsx index 5a1ac3c..5961d25 100644 --- a/src/components/map/CurrentLocation.tsx +++ b/src/components/map/CurrentLocation.tsx @@ -28,11 +28,11 @@ export const CurrentLocation: react.FC = ( } diff --git a/src/components/map/Marker.tsx b/src/components/map/Marker.tsx index 59d1785..0fad209 100644 --- a/src/components/map/Marker.tsx +++ b/src/components/map/Marker.tsx @@ -8,6 +8,7 @@ export interface MarkerProperties { keyObject?: TileKeyObject; zoom?: number; viewPort?: Rectangle; + className?: string; } export const Marker: react.FC = (props: MarkerProperties) => { @@ -39,7 +40,8 @@ export const Marker: react.FC = (props: MarkerProperties) => { {props.icon} diff --git a/src/components/map/Trkseg.module.css b/src/components/map/Trkseg.module.css index e115e70..7f003f6 100644 --- a/src/components/map/Trkseg.module.css +++ b/src/components/map/Trkseg.module.css @@ -6,3 +6,10 @@ stroke: rgba(10, 1, 51, 0.8); vector-effect: non-scaling-stroke; } + +.start { + color: green; +} +.finish { + color: red; +} diff --git a/src/components/map/Trkseg.tsx b/src/components/map/Trkseg.tsx index e442020..9b4e3f2 100644 --- a/src/components/map/Trkseg.tsx +++ b/src/components/map/Trkseg.tsx @@ -1,9 +1,12 @@ import react, { useEffect, useState } from 'react'; import { lon2tile, lat2tile } from '../../lib/geo'; import dispatch from '../../workers/dispatcher-main'; -import { TileKeyObject, Rectangle, Point } from './types'; +import { TileKeyObject, Rectangle, Point, geoPoint } from './types'; import css from './Trkseg.module.css'; +import { ReactComponent as Start } from '../../icons/flag-start-b-svgrepo-com.svg'; +import { ReactComponent as Finish } from '../../icons/flag-finish-b-o-svgrepo-com.svg'; +import Marker from './Marker'; export interface TrksegProperties { id: string; @@ -42,30 +45,45 @@ export const Trkseg: react.FC = (props: TrksegProperties) => { }`; }, ''); - const widthFactor = () => { - return 2; - if (props.keyObject.zoomLevel <= 12) { - return 2; - } - if (props.keyObject.zoomLevel <= 17) { - return 4; - } - - if (props.keyObject.zoomLevel <= 18) { - return 8; - } - if (props.keyObject.zoomLevel <= 19) { - return 16; - } - - return 64; - }; - - // style={{ strokeWidth: widthFactor() / 256 / props.zoom }} return ( - - - + <> + {trkseg[1] !== undefined ? ( + <> + + + + } + viewPort={props.viewPort} + zoom={props.zoom} + /> + + + + + + } + viewPort={props.viewPort} + zoom={props.zoom} + /> + + ) : null} + ); }; diff --git a/src/icons/flag-finish-b-o-svgrepo-com.svg b/src/icons/flag-finish-b-o-svgrepo-com.svg new file mode 100644 index 0000000..13b4208 --- /dev/null +++ b/src/icons/flag-finish-b-o-svgrepo-com.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/flag-start-b-svgrepo-com.svg b/src/icons/flag-start-b-svgrepo-com.svg new file mode 100644 index 0000000..f082b9f --- /dev/null +++ b/src/icons/flag-start-b-svgrepo-com.svg @@ -0,0 +1 @@ + \ No newline at end of file