midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add feature to the featureInfoBox so that geometry is available there as well

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-22 01:07:32 +02:00
parent 1373bd106e
commit 8268c0d054
7 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Customizations/LayerDefinition.ts
View file

@ -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<UserDetails>, selectedElement: UIEventSource<any>,
showOnPopup: (tags: UIEventSource<(any)>) => UIElement):
asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
selectedElement: UIEventSource<{feature: any}>,
showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement):
FilteredLayer {
return new FilteredLayer(
this.name,

7
Customizations/Layers/NatureReserves.ts
View file

@ -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(),

13
Logic/FilteredLayer.ts
View file

@ -41,8 +41,8 @@ export class FilteredLayer {
* The leaflet layer object which should be removed on rerendering
*/
private _geolayer;
private _selectedElement: UIEventSource<any>;
private _showOnPopup: (tags: UIEventSource<any>) => UIElement;
private _selectedElement: UIEventSource<{feature: any}>;
private _showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement;
constructor(
name: string | UIElement,
@ -52,8 +52,8 @@ export class FilteredLayer {
maxAllowedOverlap: number,
wayHandling: number,
style: ((properties) => any),
selectedElement: UIEventSource<any>,
showOnPopup: ((tags: UIEventSource<any>) => UIElement)
selectedElement: UIEventSource<{feature: any}>,
showOnPopup: ((tags: UIEventSource<any>, 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)

2
Logic/StrayClickHandler.ts
View file

@ -15,7 +15,7 @@ export class StrayClickHandler {
constructor(
basemap: Basemap,
selectElement: UIEventSource<any>,
selectElement: UIEventSource<{ feature: any }>,
fullScreenMessage: UIEventSource<UIElement>,
uiToShow: (() => UIElement)) {
this._basemap = basemap;

10
UI/FeatureInfoBox.ts
View file

@ -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<any>;
private _changes: Changes;
private _userDetails: UIEventSource<UserDetails>;
@ -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<any>,
title: TagRenderingOptions | UIElement,
elementsToShow: TagDependantUIElementConstructor[],
@ -40,6 +47,7 @@ export class FeatureInfoBox extends UIElement {
userDetails: UIEventSource<UserDetails>
) {
super(tagsES);
this._feature = feature;
this._tagsES = tagsES;
this._changes = changes;
this._userDetails = userDetails;

6
UI/SimpleAddUI.ts
View file

@ -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<any>;
private _selectedElement: UIEventSource<{feature: any}>;
private _dataIsLoading: UIEventSource<boolean>;
private _userDetails: UIEventSource<UserDetails>;
constructor(zoomlevel: UIEventSource<{ zoom: number }>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
changes: Changes,
selectedElement: UIEventSource<any>,
selectedElement: UIEventSource<{feature: any}>,
dataIsLoading: UIEventSource<boolean>,
userDetails: UIEventSource<UserDetails>,
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});
}
}

10
index.ts
View file

@ -118,7 +118,8 @@ const secondsTillChangesAreSaved = new UIEventSource<number>(0);
// This message is shown full screen on mobile devices
const fullScreenMessage = new UIEventSource<UIElement>(undefined);
const selectedElement = new UIEventSource<any>(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,