Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: when clicking on the map, all (way) features within 20px are inspected and the closest one is inspected. Fixes #2261

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-11-18 21:38:30 +01:00
parent c34300fae1
commit 8680fce4e7
5 changed files with 76 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/Models/ThemeViewState.ts
View file

@ -178,7 +178,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.map = new UIEventSource<MlMap>(undefined)
const geolocationState = new GeoLocationState()
const initial = new InitialMapPositioning(layout, geolocationState)
this.mapProperties = new MapLibreAdaptor(this.map, initial)
this.mapProperties = new MapLibreAdaptor(this.map, initial, {correctClick: 20})
this.featureSwitchIsTesting = this.featureSwitches.featureSwitchIsTesting
this.featureSwitchUserbadge = this.featureSwitches.featureSwitchEnableLogin
@ -554,6 +554,16 @@ export default class ThemeViewState implements SpecialVisualizationState {
})
}
private setSelectedElement(feature: Feature){
const current = this.selectedElement.data
if(current?.properties?.id !== undefined && current.properties.id === feature.properties.id ){
console.log("Not setting selected, same id", current, feature)
return // already set
}
// this.selectedElement.setData(undefined)
this.selectedElement.setData(feature)
}
/**
* Selects the feature that is 'i' closest to the map center
*/
@ -570,13 +580,11 @@ export default class ThemeViewState implements SpecialVisualizationState {
if (!toSelect) {
return
}
this.selectedElement.setData(undefined)
this.selectedElement.setData(toSelect)
this.setSelectedElement(toSelect)
})
return
}
this.selectedElement.setData(undefined)
this.selectedElement.setData(toSelect)
this.setSelectedElement(toSelect)
}
private initHotkeys() {
@ -992,6 +1000,15 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.userRelatedState.recentlyVisitedSearch.add(r)
})
this.mapProperties.lastClickLocation.addCallbackD(lastClick => {
if(lastClick.mode !== "left" || !lastClick.nearestFeature){
return
}
const f = lastClick.nearestFeature
this.setSelectedElement(f)
})
this.userRelatedState.showScale.addCallbackAndRun((showScale) => {
this.mapProperties.showScale.set(showScale)
})