Skip to content

Commit 2d8ffd2

Browse files
datKaMadatKaMa
committed
added click on map to select coordinates functionality
1 parent a9af8ac commit 2d8ffd2

File tree

6 files changed

+167
-53
lines changed

6 files changed

+167
-53
lines changed

‎packages/clients/snowbox/src/mapConfiguration.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,8 @@ export const mapConfiguration = {
263263
},
264264
},
265265
routing: {
266-
url: 'https://sg.geodatenzentrum.de/web_ors/v2/',
266+
serviceUrl: 'https://geodienste.hamburg.de/web_ors/v2/directions/',
267+
format: 'geojson',
267268
selectableTravelModes: ['walking', 'wheelchair'],
268269
selectablePreferences: ['recommended', 'fastest', 'shortest'],
269270
displayPreferences: true,

‎packages/plugins/Routing/src/components/Routing.vue‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
<v-scroll-x-reverse-transition>
33
<v-card class="polar-routing-menu">
44
<v-card-title>{{ $t('common:plugins.routing.title') }} </v-card-title>
5-
<v-text-field :label="$t('common:plugins.routing.startLabel')">
5+
<v-text-field
6+
v-model="startpointInput"
7+
:label="$t('common:plugins.routing.startLabel')"
8+
:hint="$t('common:plugins.routing.inputHint')"
9+
persistent-hint
10+
>
611
</v-text-field>
7-
<v-text-field :label="$t('common:plugins.routing.endLabel')">
12+
<v-text-field
13+
v-model="endpointInput"
14+
:label="$t('common:plugins.routing.endLabel')"
15+
>
816
</v-text-field>
917
<v-btn @click="resetCoordinates"
1018
>{{ $t('common:plugins.routing.resetButton') }}
@@ -30,16 +38,24 @@
3038
<v-layout row wrap>
3139
<v-flex>
3240
<v-checkbox
33-
v-for="routeType in selectableRouteTypesToAvoid"
34-
:key="routeType.key"
35-
v-model="selectedRouteTypesToAvoidItems"
41+
v-for="(routeType, i) in selectableRouteTypesToAvoid"
42+
:key="i"
43+
v-model="selectedRouteTypesToAvoidItem"
3644
:label="$t(translatedRouteTypeToAvoid(routeType.key))"
3745
:value="routeType.key"
3846
></v-checkbox>
3947
</v-flex>
4048
</v-layout>
4149
</div>
4250
<v-btn @click="sendRequest">Send Request</v-btn>
51+
<v-btn @click="showSteps = !showSteps">
52+
{{ $t('common:plugins.routing.routeDetails') }}
53+
</v-btn>
54+
<div v-if="showSteps">
55+
<v-list v-for="(step, i) in searchResponseSegments" :key="i">
56+
{{ step }}
57+
</v-list>
58+
</div>
4359
</v-card>
4460
</v-scroll-x-reverse-transition>
4561
</template>
@@ -54,6 +70,7 @@ export default Vue.extend({
5470
isOpen: false,
5571
// TODO: wieder rausnhemen, wenn es nicht funktioniert
5672
inline: null,
73+
showSteps: false,
5774
}),
5875
computed: {
5976
...mapGetters(['hasSmallDisplay']),
@@ -64,7 +81,27 @@ export default Vue.extend({
6481
'selectableTravelModes',
6582
'selectablePreferences',
6683
'selectableRouteTypesToAvoid',
84+
'selectedRouteTypesToAvoid',
85+
'searchResponseData',
86+
'start',
87+
'end',
6788
]),
89+
startpointInput: {
90+
get(): Coordinate {
91+
return this.start
92+
},
93+
set(value: Coordinate): void {
94+
this.start(value)
95+
},
96+
},
97+
endpointInput: {
98+
get(): Coordinate {
99+
return this.end
100+
},
101+
set(value: Coordinate): void {
102+
this.end(value)
103+
},
104+
},
68105
selectedTravelModeItem: {
69106
get(): string {
70107
return this.selectedTravelMode
@@ -93,21 +130,35 @@ export default Vue.extend({
93130
translatedKey: this.$t(item.localKey),
94131
}))
95132
},
96-
selectedRouteTypesToAvoidItems: {
133+
selectedRouteTypesToAvoidItem: {
97134
get(): string {
98135
return this.selectedRouteTypesToAvoid
99136
},
100137
set(value: string): void {
138+
console.error(this.selectedRouteTypesToAvoid)
101139
this.setSelectedRouteTypesToAvoid(value)
102140
},
103141
},
142+
searchResponseSegments: {
143+
get(): object {
144+
return this.searchResponseData?.features[0].properties.segments[0].steps
145+
},
146+
},
147+
},
148+
watch: {
149+
search: function () {
150+
// TODO: prüfen, ob die Koordinaten im richtigen Format sind
151+
// TODO: Koordinaten an den Routingdienst übermitteln mit sendRequest() - zu vermeidende Routentypen mitsenden
152+
this.sendRequest()
153+
},
104154
},
105155
mounted() {
106-
this.setupModule()
156+
this.initializeTool()
157+
console.error('jetzt bin ich gemounted')
107158
},
108159
methods: {
109160
...mapActions('plugin/routing', [
110-
'setupModule',
161+
'initializeTool',
111162
'resetCoordinates',
112163
'sendRequest',
113164
]),

‎packages/plugins/Routing/src/language.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ const language: LanguageOption[] = [
1313
},
1414
startLabel: 'Startadresse',
1515
endLabel: 'Zieladresse',
16+
inputHint:
17+
'Wählen Sie durch Klicken einen Punkt auf der Karte aus oder geben Sie eine Adresse ein.',
1618
resetButton: 'Zurücksetzen',
1719
modeLabel: 'Fortbewegungsmittel',
1820
travelMode: {
1921
car: 'Auto',
20-
hdv: 'LKW',
22+
hgv: 'LKW',
2123
bike: 'Fahrrad',
2224
walking: 'Zu Fuß',
2325
wheelchair: 'Rollstuhl',
@@ -34,6 +36,7 @@ const language: LanguageOption[] = [
3436
tollways: 'Mautstraßen',
3537
ferries: 'Fähren',
3638
},
39+
routeDetails: 'Details zur Route',
3740
},
3841
},
3942
},
@@ -50,11 +53,12 @@ const language: LanguageOption[] = [
5053
},
5154
startLabel: 'Start Address',
5255
endLabel: 'Destination Address',
56+
inputHint: 'Click the map to choose a point or enter an Ad',
5357
resetButton: 'Reset',
5458
modeLabel: 'Travel Mode',
5559
travelMode: {
5660
car: 'Car',
57-
hdv: 'Heavy Duty Vehicle',
61+
hgv: 'Heavy Goods Vehicle',
5862
bike: 'Bike',
5963
walking: 'Walking',
6064
wheelchair: 'Wheelchair',
@@ -71,6 +75,7 @@ const language: LanguageOption[] = [
7175
tollways: 'tollways',
7276
ferries: 'ferries',
7377
},
78+
routeDetails: 'Route Details',
7479
},
7580
},
7681
},

‎packages/plugins/Routing/src/store/actions.ts‎

Lines changed: 84 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,111 @@ const drawSource = new VectorSource()
1212
let drawLayer
1313

1414
const actions: PolarActionTree<RoutingState, RoutingGetters> = {
15-
setupModule({ rootGetters: { configuration, map }, dispatch }) {
15+
initializeTool({
16+
rootGetters: { configuration, map },
17+
dispatch,
18+
commit,
19+
state,
20+
}) {
1621
console.error(configuration)
1722
dispatch('initializeConfigStyle')
1823
drawLayer = createDrawLayer(drawSource)
1924
map.addLayer(drawLayer)
2025
console.error(map.getLayers().getArray())
26+
map.on('click', function (event) {
27+
const formattedCoordinate = event.coordinate
28+
console.error('formatierte Koordinate: ' + formattedCoordinate)
29+
30+
// prüfen, ob im state schon startAddress vorhanden ist - falls ja, die neue Koordinate als endAddress speichern
31+
if (state.start.length === 0) {
32+
commit('setStart', formattedCoordinate)
33+
} else if (state.end.length === 0) {
34+
commit('setEnd', formattedCoordinate)
35+
}
36+
console.error(event)
37+
console.error('Start:' + state.start + 'Ende: ' + state.end)
38+
})
39+
},
40+
limitNumberWithinRange(value) {
41+
const MIN = 1
42+
const MAX = 20
43+
const parsed = parseInt(value)
44+
return Math.min(Math.max(parsed, MIN), MAX)
45+
},
46+
translateCoordinateToWGS84({ rootGetters: { configuration } }, Coordinate) {
47+
console.error('Translate Methode', configuration?.epsg, Coordinate)
48+
const wgs84Coordinate = transform(
49+
Coordinate,
50+
configuration?.epsg,
51+
'EPSG:4326'
52+
)
53+
console.error('Koordinate in WGS84: ', wgs84Coordinate)
54+
return wgs84Coordinate
2155
},
2256
resetCoordinates({ commit, state }) {
2357
// TODO: Fehler beheben: "unknown local mutation type: resetCoordinates"
24-
commit('setStart', [0.0, ''])
25-
commit('setEnd', [0.0, ''])
58+
commit('setStart', [])
59+
commit('setEnd', [])
2660
console.error(
2761
'Start- und Endpunkt im Store nach reset:',
2862
state.start,
2963
state.end
3064
)
3165
},
32-
sendRequest({ commit, dispatch }) {
33-
const searchCoordinates = [[10.011687335562508, 53.553460000125064], [10.00032456432135, 53.54922700402619]]
66+
createUrl({ rootGetters: { configuration }, state }) {
67+
// TODO: Travel-Modes mit Switch Case (?) in finale Form bringen o. bessere Lösung finden
68+
const url =
69+
configuration?.routing?.serviceUrl +
70+
state.selectedTravelMode +
71+
'/' +
72+
configuration?.routing?.format
73+
74+
console.error(url)
75+
return url
76+
},
77+
async sendRequest({ commit, dispatch, state }) {
78+
const searchCoordinates = [
79+
await dispatch('translateCoordinateToWGS84', state.start),
80+
await dispatch('translateCoordinateToWGS84', state.end),
81+
]
82+
console.error(searchCoordinates)
83+
const url = await dispatch('createUrl')
84+
console.error('Die übergebene URL: ', url)
3485
const fetchDirections = async () => {
3586
try {
36-
const response = await fetch(
37-
'https://geodienste.hamburg.de/web_ors/v2/directions/driving-car/geojson',
38-
{
39-
method: 'POST',
40-
headers: {
41-
'Content-Type': 'application/json',
42-
},
43-
body: JSON.stringify({
44-
coordinates: searchCoordinates,
45-
geometry: true,
46-
instructions: true,
47-
language: 'en',
48-
options: {
49-
avoid_polygons: {
50-
coordinates: [],
51-
type: 'MultiPolygon',
52-
},
87+
const response = await fetch( url, {
88+
method: 'POST',
89+
headers: {
90+
'Content-Type': 'application/json',
91+
},
92+
body: JSON.stringify({
93+
coordinates: searchCoordinates,
94+
geometry: true,
95+
instructions: true,
96+
language: 'en',
97+
options: {
98+
avoid_polygons: {
99+
coordinates: [],
100+
type: 'MultiPolygon',
53101
},
54-
preference: 'recommended',
55-
units: 'm',
56-
}),
57-
}
58-
)
102+
},
103+
preference: 'recommended',
104+
units: 'm',
105+
}),
106+
})
59107
if (!response.ok) {
60108
throw new Error(`HTTP error! Status: ${response.status}`)
61109
}
62110
const data = await response.json()
63111
console.error('Response:', data)
64112
commit('setSearchResponseData', data)
65113
dispatch('drawRoute')
114+
console.error(
115+
'Zu vermeidende Routen aus dem Store:',
116+
state.selectedRouteTypesToAvoid
117+
)
118+
console.error('Travel Mode aus dem Store:', state.selectedTravelMode)
119+
console.error('Preference aus dem Store:', state.selectedPreference)
66120
} catch (error) {
67121
console.error('Error:', error)
68122
}
@@ -72,9 +126,9 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
72126
drawRoute({ rootGetters: { configuration }, state }) {
73127
console.error(`stored response: `, state.searchResponseData)
74128
const transformedCoordinates =
75-
state.searchResponseData.features[0].geometry.coordinates.map((coordinate) =>
76-
transform(coordinate, 'EPSG:4326', 'EPSG:25832')
77-
)
129+
state.searchResponseData.features[0].geometry.coordinates.map(
130+
(coordinate) => transform(coordinate, 'EPSG:4326', 'EPSG:25832')
131+
)
78132
console.error(
79133
`coordinates transformed for drawing purpose: `,
80134
transformedCoordinates

‎packages/plugins/Routing/src/store/state.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { RoutingState } from '../types'
22

33
export const getInitialState = (): RoutingState => ({
4-
start: { coordinate: [0, 0], address: '' },
5-
end: { coordinate: [0, 0], address: '' },
4+
start: [],
5+
startAddress: '',
6+
end: [],
7+
endAddess: '',
68
selectedTravelMode: '',
79
selectableTravelModes: [
8-
{ key: 'Car', localKey: 'common:plugins.routing.travelMode.car' },
9-
{ key: 'hdv', localKey: 'common:plugins.routing.travelMode.hdv' },
10+
{ key: 'car', localKey: 'common:plugins.routing.travelMode.car' },
11+
{ key: 'hgv', localKey: 'common:plugins.routing.travelMode.hgv' },
1012
{ key: 'bike', localKey: 'common:plugins.routing.travelMode.bike' },
1113
{ key: 'walking', localKey: 'common:plugins.routing.travelMode.walking' },
12-
{
13-
key: 'wheelchair', localKey: 'common:plugins.routing.travelMode.wheelchair',
14-
},
14+
{key: 'wheelchair', localKey: 'common:plugins.routing.travelMode.wheelchair',},
1515
],
1616
displayPreferences: false,
1717
selectedPreference: '',
@@ -47,6 +47,6 @@ export const getInitialState = (): RoutingState => ({
4747
],
4848
serviceID: '',
4949
numberOfKeysToTriggerSearch: 3,
50-
searchResponseData: [],
51-
selectedFeature: 1,
50+
searchResponseData: {},
51+
mousePosition: [],
5252
})

0 commit comments

Comments
 (0)