From 8268c0d05400afaa276b55bfd060dc1abdd313fc Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 22 Jul 2020 01:07:32 +0200 Subject: [PATCH] Add feature to the featureInfoBox so that geometry is available there as well --- Customizations/LayerDefinition.ts | 9 +++++---- Customizations/Layers/NatureReserves.ts | 7 +++++++ Logic/FilteredLayer.ts | 13 +++++++------ Logic/StrayClickHandler.ts | 2 +- UI/FeatureInfoBox.ts | 10 +++++++++- UI/SimpleAddUI.ts | 6 +++--- index.ts | 10 +++++++--- 7 files changed, 39 insertions(+), 18 deletions(-) diff --git a/Customizations/LayerDefinition.ts b/Customizations/LayerDefinition.ts index 43e6169..20cec0a 100644 --- a/Customizations/LayerDefinition.ts +++ b/Customizations/LayerDefinition.ts @@ -90,7 +90,7 @@ export class LayerDefinition { title?: TagRenderingOptions, elementsToShow?: TagDependantUIElementConstructor[], maxAllowedOverlapPercentage?: number, - waysToCenterPoints?: boolean, + wayHandling?: number, style?: (tags: any) => { color: string, icon: any @@ -108,11 +108,12 @@ export class LayerDefinition { this.title = options.title; this.elementsToShow = options.elementsToShow; this.style = options.style; - this.wayHandling = options.waysToCenterPoints ?? LayerDefinition.WAYHANDLING_DEFAULT; + this.wayHandling = options.wayHandling ?? LayerDefinition.WAYHANDLING_DEFAULT; } - asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource, selectedElement: UIEventSource, - showOnPopup: (tags: UIEventSource<(any)>) => UIElement): + asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource, + selectedElement: UIEventSource<{feature: any}>, + showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement): FilteredLayer { return new FilteredLayer( this.name, diff --git a/Customizations/Layers/NatureReserves.ts b/Customizations/Layers/NatureReserves.ts index 6adde31..a0a1d94 100644 --- a/Customizations/Layers/NatureReserves.ts +++ b/Customizations/Layers/NatureReserves.ts @@ -25,6 +25,13 @@ export class NatureReserves extends LayerDefinition { this.style = this.generateStyleFunction(); this.elementsToShow = [ new ImageCarouselWithUploadConstructor(), + new TagRenderingOptions({ + freeform: { + key: "_surface", + renderTemplate: "{_surface}m²", + template: "$$$" + } + }), new NameQuestion(), new AccessTag(), new OperatorTag(), diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index fcb60c3..f1b530c 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -41,8 +41,8 @@ export class FilteredLayer { * The leaflet layer object which should be removed on rerendering */ private _geolayer; - private _selectedElement: UIEventSource; - private _showOnPopup: (tags: UIEventSource) => UIElement; + private _selectedElement: UIEventSource<{feature: any}>; + private _showOnPopup: (tags: UIEventSource, feature: any) => UIElement; constructor( name: string | UIElement, @@ -52,8 +52,8 @@ export class FilteredLayer { maxAllowedOverlap: number, wayHandling: number, style: ((properties) => any), - selectedElement: UIEventSource, - showOnPopup: ((tags: UIEventSource) => UIElement) + selectedElement: UIEventSource<{feature: any}>, + showOnPopup: ((tags: UIEventSource, feature: any) => UIElement) ) { this._wayHandling = wayHandling; this._selectedElement = selectedElement; @@ -95,6 +95,7 @@ export class FilteredLayer { // feature.properties contains all the properties var tags = TagUtils.proprtiesToKV(feature.properties); if (this.filters.matches(tags)) { + feature.properties["_surface"] = GeoOperations.surfaceAreaInSqMeters(feature); if(feature.geometry.type !== "Point"){ if(this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_AND_WAY){ selfFeatures.push(GeoOperations.centerpoint(feature)); @@ -213,8 +214,8 @@ export class FilteredLayer { layer.on("click", function (e) { console.log("Selected ", feature) - self._selectedElement.setData(feature.properties); - const uiElement = self._showOnPopup(eventSource); + self._selectedElement.setData({feature: feature}); + const uiElement = self._showOnPopup(eventSource, feature); const popup = L.popup() .setContent(uiElement.Render()) .setLatLng(e.latlng) diff --git a/Logic/StrayClickHandler.ts b/Logic/StrayClickHandler.ts index 8509fd4..59c50de 100644 --- a/Logic/StrayClickHandler.ts +++ b/Logic/StrayClickHandler.ts @@ -15,7 +15,7 @@ export class StrayClickHandler { constructor( basemap: Basemap, - selectElement: UIEventSource, + selectElement: UIEventSource<{ feature: any }>, fullScreenMessage: UIEventSource, uiToShow: (() => UIElement)) { this._basemap = basemap; diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index 7763410..c9477ef 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -15,6 +15,13 @@ import Translations from "./i18n/Translations"; export class FeatureInfoBox extends UIElement { + /** + * The actual GEOJSON-object, with geometry and stuff + */ + private _feature: any; + /** + * The tags, wrapped in a global event source + */ private _tagsES: UIEventSource; private _changes: Changes; private _userDetails: UIEventSource; @@ -31,8 +38,8 @@ export class FeatureInfoBox extends UIElement { private _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone(); private _someSkipped = Translations.t.general.skippedQuestions.Clone(); - constructor( + feature: any, tagsES: UIEventSource, title: TagRenderingOptions | UIElement, elementsToShow: TagDependantUIElementConstructor[], @@ -40,6 +47,7 @@ export class FeatureInfoBox extends UIElement { userDetails: UIEventSource ) { super(tagsES); + this._feature = feature; this._tagsES = tagsES; this._changes = changes; this._userDetails = userDetails; diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index 80f7743..5d0bc6e 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -15,14 +15,14 @@ export class SimpleAddUI extends UIElement { private _addButtons: UIElement[]; private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>; private _changes: Changes; - private _selectedElement: UIEventSource; + private _selectedElement: UIEventSource<{feature: any}>; private _dataIsLoading: UIEventSource; private _userDetails: UIEventSource; constructor(zoomlevel: UIEventSource<{ zoom: number }>, lastClickLocation: UIEventSource<{ lat: number, lon: number }>, changes: Changes, - selectedElement: UIEventSource, + selectedElement: UIEventSource<{feature: any}>, dataIsLoading: UIEventSource, userDetails: UIEventSource, addButtons: { name: UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[], @@ -55,7 +55,7 @@ export class SimpleAddUI extends UIElement { const loc = self._lastClickLocation.data; let feature = self._changes.createElement(option.tags, loc.lat, loc.lon); option.layerToAddTo.AddNewElement(feature); - self._selectedElement.setData(feature.properties); + self._selectedElement.setData({feature: feature}); } } diff --git a/index.ts b/index.ts index d3ce97c..afaaf4e 100644 --- a/index.ts +++ b/index.ts @@ -118,7 +118,8 @@ const secondsTillChangesAreSaved = new UIEventSource(0); // This message is shown full screen on mobile devices const fullScreenMessage = new UIEventSource(undefined); -const selectedElement = new UIEventSource(undefined); +// The latest element that was selected - used to generate the right UI at the right place +const selectedElement = new UIEventSource<{feature: any}>(undefined); const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({ @@ -179,9 +180,10 @@ let minZoom = 0; for (const layer of layoutToUse.layers) { - const generateInfo = (tagsES) => { + const generateInfo = (tagsES, feature) => { return new FeatureInfoBox( + feature, tagsES, layer.title, layer.elementsToShow, @@ -229,7 +231,8 @@ new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => { /** * Show the questions and information for the selected element on the fullScreen */ -selectedElement.addCallback((data) => { +selectedElement.addCallback((feature) => { + const data = feature.feature.properties; // Which is the applicable set? for (const layer of layoutToUse.layers) { @@ -238,6 +241,7 @@ selectedElement.addCallback((data) => { // This layer is the layer that gives the questions const featureBox = new FeatureInfoBox( + feature.feature, allElements.getElement(data.id), layer.title, layer.elementsToShow,