({
@@ -126,11 +128,16 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
}
}, [defaultTo, points]);
- useGlobalMapClickOverride(points, setPoints);
+ useGlobalMapClickOverride(points, setPoints, inputs);
useReactToUrl(setMode, setPoints, setResult);
const onSubmitFactory = useGetOnSubmitFactory(setResult, setLoading);
+ const handleAddDestination = () => {
+ const newInputs = [...inputs, { ...defaultTo }];
+ setInputs(newInputs);
+ };
+
if (hideForm) {
return null;
}
@@ -190,6 +197,16 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
);
})}
+
+ }
+ onClick={handleAddDestination}
+ size="small"
+ >
+ {t('directions.add_destination')}
+
+
{
};
export const buildUrl = (mode: 'car' | 'bike' | 'walk', points: Option[]) => {
- const urlParts = points.map(getOptionToUrl);
- return encodeUrl`/directions/${mode}/${urlParts[0]}/${urlParts[1]}`;
+ const urlParts = points.map(getOptionToUrl).join('/');
+ return encodeUrl`/directions/${mode}/${urlParts}`;
};
const urlCoordsToLonLat = (coords: string): LonLat =>
diff --git a/src/components/Directions/routing/getGraphhopperResults.ts b/src/components/Directions/routing/getGraphhopperResults.ts
index 22e7b269..7e20a73d 100644
--- a/src/components/Directions/routing/getGraphhopperResults.ts
+++ b/src/components/Directions/routing/getGraphhopperResults.ts
@@ -16,9 +16,12 @@ export const getGraphhopperResults = async (
points: LonLat[],
): Promise => {
const profile = profiles[mode];
- const from = points[0].toReversed().join(','); // lon,lat!
- const to = points[1].toReversed().join(',');
- const url = `https://graphhopper.com/api/1/route?point=${from}&point=${to}&vehicle=${profile}&key=${API_KEY}&type=json&points_encoded=false&snap_prevention=ferry&locale=${intl.lang}`;
+ const graphhopperPoints = points.map((point) => point.toReversed().join(','));
+ const urlPoints = graphhopperPoints
+ .map((point) => `point=${point}&`)
+ .join('');
+
+ const url = `https://graphhopper.com/api/1/route?${urlPoints}vehicle=${profile}&key=${API_KEY}&type=json&points_encoded=false&snap_prevention=ferry`;
const data = await fetchJson(url);
diff --git a/src/components/Directions/useGetOnSubmit.tsx b/src/components/Directions/useGetOnSubmit.tsx
index 8bf4fd8d..db4f7302 100644
--- a/src/components/Directions/useGetOnSubmit.tsx
+++ b/src/components/Directions/useGetOnSubmit.tsx
@@ -45,9 +45,9 @@ export const useReactToUrl = (
useEffect(() => {
const [, mode, ...points] = urlParts as [string, Profile, ...string[]];
- const options = parseUrlParts(points);
+ const options = parseUrlParts(points.flatMap((str) => str.split('/')));
- if (mode && options.length === 2) {
+ if (mode && options.length >= 2) {
setMode(mode);
setPoints(options);
handleRouting(mode, options.map(getOptionToLonLat))
@@ -89,6 +89,7 @@ export const useGetOnSubmitFactory = (
return;
}
const url = buildUrl(mode, points);
+
if (url === Router.asPath) {
setLoading(true);
handleRouting(mode, points.map(getOptionToLonLat))
diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
index 9a952043..62036fbc 100644
--- a/src/locales/vocabulary.js
+++ b/src/locales/vocabulary.js
@@ -123,6 +123,7 @@ export default {
'searchbox.overpass_custom_query': 'custom query',
'directions.get_directions': 'Get Directions',
+ 'directions.add_destination': 'Add destination',
'directions.form.start_or_click': 'Choose start or click map',
'directions.form.destination': 'Destination',
'directions.edit_destinations': 'Edit destinations',