Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

OsmObjects can now be used as featureSource, load selected object immediately, zoom to selected object on open; fix #191

Browse source
This commit is contained in:
pietervdvn 2021-05-06 01:33:09 +02:00
parent 5ce4140510
commit a0c1bc2137
13 changed files with 205 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
InitUiElements.ts
View file

@ -185,6 +185,9 @@ export class InitUiElements {
// Reset the loading message once things are loaded
new CenterMessageBox().AttachTo("centermessage");
// At last, zoom to the needed location if the focus is on an element
}
static LoadLayoutFromHash(userLayoutParam: UIEventSource<string>) {
@ -391,12 +394,18 @@ export class InitUiElements {
const updater = new LoadFromOverpass(state.locationControl, state.layoutToUse, state.leafletMap);
State.state.layerUpdater = updater;
const source = new FeaturePipeline(state.filteredLayers, updater, state.layoutToUse, state.changes, state.locationControl);
const source = new FeaturePipeline(state.filteredLayers,
updater,
state.osmApiFeatureSource,
state.layoutToUse,
state.changes,
state.locationControl,
state.selectedElement);
new ShowDataLayer(source.features, State.state.leafletMap, State.state.layoutToUse);
new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source);
const selectedFeatureHandler = new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source, State.state.osmApiFeatureSource);
selectedFeatureHandler.zoomToSelectedFeature(State.state.locationControl);
}

39
Logic/Actors/SelectedFeatureHandler.ts
View file

@ -1,8 +1,12 @@
import {UIEventSource} from "../UIEventSource";
import FeatureSource from "../FeatureSource/FeatureSource";
import {OsmObject, OsmObjectMeta} from "../Osm/OsmObject";
import Loc from "../../Models/Loc";
import FeaturePipeline from "../FeatureSource/FeaturePipeline";
import OsmApiFeatureSource from "../FeatureSource/OsmApiFeatureSource";
/**
* Makes sure the hash shows the selected element and vice-versa
* Makes sure the hash shows the selected element and vice-versa.
*/
export default class SelectedFeatureHandler {
private readonly _featureSource: FeatureSource;
@ -10,13 +14,16 @@ export default class SelectedFeatureHandler {
private readonly _selectedFeature: UIEventSource<any>;
private static readonly _no_trigger_on = ["welcome","copyright","layers"]
private readonly _osmApiSource: OsmApiFeatureSource;
constructor(hash: UIEventSource<string>,
selectedFeature: UIEventSource<any>,
featureSource: FeatureSource) {
featureSource: FeaturePipeline,
osmApiSource: OsmApiFeatureSource) {
this._hash = hash;
this._selectedFeature = selectedFeature;
this._featureSource = featureSource;
this._osmApiSource = osmApiSource;
const self = this;
hash.addCallback(h => {
if (h === undefined || h === "") {
@ -26,6 +33,8 @@ export default class SelectedFeatureHandler {
}
})
hash.addCallbackAndRun(h => self.downloadFeature(h))
featureSource.features.addCallback(_ => self.selectFeature());
selectedFeature.addCallback(feature => {
@ -45,6 +54,32 @@ export default class SelectedFeatureHandler {
}
// If a feature is selected via the hash, zoom there
public zoomToSelectedFeature(location: UIEventSource<Loc>){
const hash = this._hash.data;
if(hash === undefined || SelectedFeatureHandler._no_trigger_on.indexOf(hash) >= 0){
return; // No valid feature selected
}
// We should have a valid osm-ID and zoom to it
OsmObject.DownloadObject(hash, (element: OsmObject, meta: OsmObjectMeta) => {
const centerpoint = element.centerpoint();
console.log("Zooming to location for select point: ", centerpoint)
location.data.lat = centerpoint[0]
location.data.lon = centerpoint[1]
location.ping();
})
}
private downloadFeature(hash: string){
if(hash === undefined || hash === ""){
return;
}
if(SelectedFeatureHandler._no_trigger_on.indexOf(hash) >= 0){
return;
}
this._osmApiSource.load(hash)
}
private selectFeature(){
const features = this._featureSource?.features?.data;
if(features === undefined){

42
Logic/Actors/UpdateTagsFromOsmAPI.ts
View file

@ -1,42 +0,0 @@
import {UIEventSource} from "../UIEventSource";
import {ElementStorage} from "../ElementStorage";
import {OsmObject, OsmObjectMeta} from "../Osm/OsmObject";
export default class UpdateTagsFromOsmAPI {
/***
* This actor downloads the element from the OSM-API and updates the corresponding tags in the UI-updater.
*/
constructor(idToDownload: UIEventSource<string>, allElements: ElementStorage, callback? : (element: OsmObject) => void) {
idToDownload.addCallbackAndRun(id => {
if (id === undefined) {
return;
}
OsmObject.DownloadObject(id, (element: OsmObject, meta: OsmObjectMeta) => {
console.debug("Updating tags from the OSM-API: ", element)
const tags = element.tags;
tags["_last_edit:contributor"] = meta["_last_edit:contributor"]
tags["_last_edit:contributor:uid"] = meta["_last_edit:contributor:uid"]
tags["_last_edit:changeset"] = meta["_last_edit:changeset"]
tags["_last_edit:timestamp"] = meta["_last_edit:timestamp"].toLocaleString()
tags["_version_number"] = meta._version_number
if (!allElements.has(id)) {
console.warn("Adding element by id")
allElements.addElementById(id, new UIEventSource<any>(tags))
} else {
// We merge
console.warn("merging by OSM API UPDATE")
allElements.addOrGetById(id, tags)
}
})
})
}
}

1
Logic/ElementStorage.ts
View file

@ -48,6 +48,7 @@ export class ElementStorage {
const keptKeys = es.data;
// The element already exists
// We use the new feature to overwrite all the properties in the already existing eventsource
console.log("Merging multiple instances of ", elementId)
let somethingChanged = false;
for (const k in newProperties) {
const v = newProperties[k];

28
Logic/FeatureSource/FeaturePipeline.ts
View file

@ -18,27 +18,32 @@ export default class FeaturePipeline implements FeatureSource {
public features: UIEventSource<{ feature: any; freshness: Date }[]>;
public readonly name = "FeaturePipeline"
public readonly name = "FeaturePipeline"
constructor(flayers: UIEventSource<{ isDisplayed: UIEventSource<boolean>, layerDef: LayerConfig }[]>,
updater: FeatureSource,
fromOsmApi: FeatureSource,
layout: UIEventSource<LayoutConfig>,
newPoints: FeatureSource,
locationControl: UIEventSource<Loc>) {
locationControl: UIEventSource<Loc>,
selectedElement: UIEventSource<any>) {
// first we metatag, then we save to get the metatags into storage too
// Note that we need to register before we do metatagging (as it expects the event sources)
const amendedOverpassSource =
new RememberingSource(
new LocalStorageSaver(
new MetaTaggingFeatureSource( // first we metatag, then we save to get the metatags into storage too
new RegisteringFeatureSource(
new FeatureDuplicatorPerLayer(flayers,
new FeatureDuplicatorPerLayer(flayers,
new MetaTaggingFeatureSource(
new RegisteringFeatureSource(
updater)
)), layout));
const geojsonSources: FeatureSource [] = GeoJsonSource
.ConstructMultiSource(flayers.data, locationControl)
.map(geojsonSource => new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, geojsonSource)));
.map(geojsonSource => new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, geojsonSource)));
const amendedLocalStorageSource =
new RememberingSource(new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, new LocalStorageSource(layout))
));
@ -46,10 +51,16 @@ export default class FeaturePipeline implements FeatureSource {
newPoints = new MetaTaggingFeatureSource(new FeatureDuplicatorPerLayer(flayers,
new RegisteringFeatureSource(newPoints)));
const amendedOsmApiSource = new RememberingSource(
new FeatureDuplicatorPerLayer(flayers,
new MetaTaggingFeatureSource(
new RegisteringFeatureSource(fromOsmApi))));
const merged =
new FeatureSourceMerger([
amendedOverpassSource,
amendedOsmApiSource,
amendedLocalStorageSource,
newPoints,
...geojsonSources
@ -60,6 +71,7 @@ export default class FeaturePipeline implements FeatureSource {
new FilteringFeatureSource(
flayers,
locationControl,
selectedElement,
merged
));
this.features = source.features;

29
Logic/FeatureSource/FilteringFeatureSource.ts
View file

@ -5,12 +5,14 @@ import Loc from "../../Models/Loc";
export default class FilteringFeatureSource implements FeatureSource {
public features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]);
public readonly name = "FilteringFeatureSource"
public readonly name = "FilteringFeatureSource"
constructor(layers: UIEventSource<{
isDisplayed: UIEventSource<boolean>,
layerDef: LayerConfig
}[]>,
location: UIEventSource<Loc>,
selectedElement: UIEventSource<any>,
upstream: FeatureSource) {
const self = this;
@ -18,7 +20,7 @@ public readonly name = "FilteringFeatureSource"
function update() {
const layerDict = {};
if(layers.data.length == 0){
if (layers.data.length == 0) {
throw "No layers defined!"
}
for (const layer of layers.data) {
@ -32,6 +34,11 @@ public readonly name = "FilteringFeatureSource"
const newFeatures = features.filter(f => {
const layerId = f.feature._matching_layer_id;
if(selectedElement.data === f.feature){
// This is the selected object - it gets a free pass even if zoom is not sufficient
return true;
}
if (layerId !== undefined) {
const layer: {
isDisplayed: UIEventSource<boolean>,
@ -41,16 +48,16 @@ public readonly name = "FilteringFeatureSource"
missingLayers.add(layerId)
return true;
}
const isShown = layer.layerDef.isShown
const tags = f.feature.properties;
if(isShown.IsKnown(tags)){
if (isShown.IsKnown(tags)) {
const result = layer.layerDef.isShown.GetRenderValue(f.feature.properties).txt;
if(result !== "yes"){
if (result !== "yes") {
return false;
}
}
if (FilteringFeatureSource.showLayer(layer, location)) {
return true;
}
@ -69,7 +76,7 @@ public readonly name = "FilteringFeatureSource"
});
console.log("Filtering layer source: input: ", upstream.features.data?.length, "output:", newFeatures.length)
self.features.setData(newFeatures);
if(missingLayers.size > 0){
if (missingLayers.size > 0) {
console.error("Some layers were not found: ", Array.from(missingLayers))
}
}
@ -86,7 +93,7 @@ public readonly name = "FilteringFeatureSource"
if (l.zoom < layer.layerDef.minzoom) {
continue;
}
if(l.zoom > layer.layerDef.maxzoom){
if (l.zoom > layer.layerDef.maxzoom) {
continue;
}
if (!layer.isDisplayed.data) {
@ -98,13 +105,13 @@ public readonly name = "FilteringFeatureSource"
}).addCallback(() => {
update();
});
layers.addCallback(update);
const registered = new Set<UIEventSource<boolean>>();
layers.addCallbackAndRun(layers => {
for (const layer of layers) {
if(registered.has(layer.isDisplayed)){
if (registered.has(layer.isDisplayed)) {
continue;
}
registered.add(layer.isDisplayed);

21
Logic/FeatureSource/OsmApiFeatureSource.ts Normal file
View file

@ -0,0 +1,21 @@
import FeatureSource from "./FeatureSource";
import {UIEventSource} from "../UIEventSource";
import {OsmObject} from "../Osm/OsmObject";
export default class OsmApiFeatureSource implements FeatureSource {
public readonly features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]);
public readonly name: string = "OsmApiFeatureSource";
public load(id: string){
console.log("Updating from OSM API: ", id)
OsmObject.DownloadObject(id, (element, meta) => {
const geojson = element.asGeoJson();
console.warn(geojson)
geojson.id = geojson.properties.id;
this.features.setData([{feature:geojson, freshness: meta["_last_edit:timestamp"]}])
})
}
}

2
Logic/MetaTagging.ts
View file

@ -1,9 +1,7 @@
import LayerConfig from "../Customizations/JSON/LayerConfig";
import SimpleMetaTagger from "./SimpleMetaTagger";
import {ExtraFunction} from "./ExtraFunction";
import State from "../State";
import {Relation} from "./Osm/ExtractRelations";
import {meta} from "@turf/turf";
interface Params {

108
Logic/Osm/OsmObject.ts
View file

@ -13,6 +13,9 @@ export abstract class OsmObject {
protected constructor(type: string, id: number) {
this.id = id;
this.type = type;
this.tags = {
id: id
}
}
static DownloadObject(id, continuation: ((element: OsmObject, meta: OsmObjectMeta) => void)) {
@ -20,7 +23,7 @@ export abstract class OsmObject {
const type = splitted[0];
const idN = splitted[1];
const newContinuation = (element: OsmObject, meta :OsmObjectMeta) => {
const newContinuation = (element: OsmObject, meta: OsmObjectMeta) => {
console.log("Received: ", element, "with meta", meta);
continuation(element, meta);
}
@ -59,7 +62,12 @@ export abstract class OsmObject {
);
}
abstract SaveExtraData(element);
// The centerpoint of the feature, as [lat, lon]
public abstract centerpoint(): [number, number];
public abstract asGeoJson(): any;
abstract SaveExtraData(element: any, allElements: any[]);
/**
* Generates the changeset-XML for tags
@ -78,12 +86,21 @@ export abstract class OsmObject {
Download(continuation: ((element: OsmObject, meta: OsmObjectMeta) => void)) {
const self = this;
$.getJSON("https://www.openstreetmap.org/api/0.6/" + this.type + "/" + this.id,
function (data) {
const element = data.elements[0];
const full = this.type !== "way" ? "" : "/full";
const url = "https://www.openstreetmap.org/api/0.6/" + this.type + "/" + this.id + full;
$.getJSON(url, function (data) {
const element = data.elements[data.elements.length - 1];
self.tags = element.tags;
const tgs = self.tags;
tgs["_last_edit:contributor"] = element.user
tgs["_last_edit:contributor:uid"] = element.uid
tgs["_last_edit:changeset"] = element.changeset
tgs["_last_edit:timestamp"] = element.timestamp
tgs["_version_number"] = element.version
tgs["id"] = self.type+"/"+self.id;
self.version = element.version;
self.SaveExtraData(element);
self.SaveExtraData(element, data.elements);
continuation(self, {
"_last_edit:contributor": element.user,
"_last_edit:contributor:uid": element.uid,
@ -135,21 +152,36 @@ export class OsmNode extends OsmObject {
ChangesetXML(changesetId: string): string {
let tags = this.TagsXML();
let change =
' <node id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + ' lat="' + this.lat + '" lon="' + this.lon + '">\n' +
return ' <node id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + ' lat="' + this.lat + '" lon="' + this.lon + '">\n' +
tags +
' </node>\n';
return change;
}
SaveExtraData(element) {
this.lat = element.lat;
this.lon = element.lon;
}
centerpoint(): [number, number] {
return [this.lat, this.lon];
}
asGeoJson() {
return {
"type": "Feature",
"properties": this.tags,
"geometry": {
"type": "Point",
"coordinates": [
this.lon,
this.lat
]
}
}
}
}
export interface OsmObjectMeta{
export interface OsmObjectMeta {
"_last_edit:contributor": string,
"_last_edit:contributor:uid": number,
"_last_edit:changeset": number,
@ -161,12 +193,19 @@ export interface OsmObjectMeta{
export class OsmWay extends OsmObject {
nodes: number[];
coordinates: [number, number][] = []
lat: number;
lon: number;
constructor(id) {
super("way", id);
}
centerpoint(): [number, number] {
return [this.lat, this.lon];
}
ChangesetXML(changesetId: string): string {
let tags = this.TagsXML();
let nds = "";
@ -174,18 +213,40 @@ export class OsmWay extends OsmObject {
nds += ' <nd ref="' + this.nodes[node] + '"/>\n';
}
let change =
' <way id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + '>\n' +
return ' <way id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + '>\n' +
nds +
tags +
' </way>\n';
return change;
}
SaveExtraData(element) {
SaveExtraData(element, allNodes) {
console.log("Way-extras: ", allNodes)
for (const node of allNodes) {
if (node.type === "node") {
const n = new OsmNode(node.id);
n.SaveExtraData(node)
const cp = n.centerpoint();
this.coordinates.push(cp);
}
}
let count = this.coordinates.length;
this.lat = this.coordinates.map(c => c[0]).reduce((a, b) => a + b, 0) / count;
this.lon = this.coordinates.map(c => c[1]).reduce((a, b) => a + b, 0) / count;
this.nodes = element.nodes;
}
asGeoJson() {
return {
"type": "Feature",
"properties": this.tags,
"geometry": {
"type": "LineString",
"coordinates": this.coordinates.map(c => [c[1], c[0]])
}
}
}
}
export class OsmRelation extends OsmObject {
@ -197,24 +258,29 @@ export class OsmRelation extends OsmObject {
}
centerpoint(): [number, number] {
return [0, 0]; // TODO
}
ChangesetXML(changesetId: string): string {
let members = "";
for (const memberI in this.members) {
const member = this.members[memberI];
for (const member of this.members) {
members += ' <member type="' + member.type + '" ref="' + member.ref + '" role="' + member.role + '"/>\n';
}
let tags = this.TagsXML();
let change =
' <relation id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + '>\n' +
return ' <relation id="' + this.id + '" changeset="' + changesetId + '" ' + this.VersionXML() + '>\n' +
members +
tags +
' </relation>\n';
return change;
}
SaveExtraData(element) {
this.members = element.members;
}
asGeoJson() {
throw "Not Implemented"
}
}

1
Logic/SimpleMetaTagger.ts
View file

@ -7,7 +7,6 @@ import {Utils} from "../Utils";
import opening_hours from "opening_hours";
import {UIElement} from "../UI/UIElement";
import Combine from "../UI/Base/Combine";
import UpdateTagsFromOsmAPI from "./Actors/UpdateTagsFromOsmAPI";
const cardinalDirections = {

2
Models/Constants.ts
View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants {
public static vNumber = "0.7.0c";
public static vNumber = "0.7.1";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {

6
State.ts
View file

@ -18,7 +18,7 @@ import LayerConfig from "./Customizations/JSON/LayerConfig";
import TitleHandler from "./Logic/Actors/TitleHandler";
import PendingChangesUploader from "./Logic/Actors/PendingChangesUploader";
import {Relation} from "./Logic/Osm/ExtractRelations";
import UpdateTagsFromOsmAPI from "./Logic/Actors/UpdateTagsFromOsmAPI";
import OsmApiFeatureSource from "./Logic/FeatureSource/OsmApiFeatureSource";
/**
* Contains the global state: a bunch of UI-event sources
@ -58,6 +58,8 @@ export default class State {
public favouriteLayers: UIEventSource<string[]>;
public layerUpdater: UpdateFromOverpass;
public osmApiFeatureSource : OsmApiFeatureSource = new OsmApiFeatureSource();
public filteredLayers: UIEventSource<{
@ -253,8 +255,6 @@ export default class State {
new TitleHandler(this.layoutToUse, this.selectedElement, this.allElements);
new UpdateTagsFromOsmAPI(this.selectedElement.map(el => el?.properties?.id), this.allElements)
}
private static asFloat(source: UIEventSource<string>): UIEventSource<number> {

9
UI/BigComponents/MoreScreen.ts
View file

@ -1,4 +1,3 @@
import {VerticalCombine} from "../Base/VerticalCombine";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
@ -53,15 +52,17 @@ export default class MoreScreen extends UIElement {
if(path === ""){
path = "."
}
const params = `z=${currentLocation.zoom ?? 1}&lat=${currentLocation.lat ?? 0}&lon=${currentLocation.lon ?? 0}`
let linkText =
`${path}/${layout.id.toLowerCase()}?z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}`
`${path}/${layout.id.toLowerCase()}?${params}`
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
linkText = `${path}/index.html?layout=${layout.id}&z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}`
linkText = `${path}/index.html?layout=${layout.id}&${params}`
}
if (customThemeDefinition) {
linkText = `${path}/?userlayout=${layout.id}&z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}#${customThemeDefinition}`
linkText = `${path}/?userlayout=${layout.id}&${params}#${customThemeDefinition}`
}