From 315e2f7fd1f91ba7520e001b8e8daf70297469a2 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 14 Jul 2021 00:17:15 +0200 Subject: [PATCH] Add precise input method, enabled for public bookcases --- Customizations/JSON/LayerConfig.ts | 16 ++- Customizations/JSON/LayerConfigJson.ts | 10 ++ Logic/Actors/AvailableBaseLayers.ts | 21 ++-- Models/BaseLayer.ts | 2 + Svg.ts | 7 +- UI/BigComponents/SimpleAddUI.ts | 95 +++++++++------ UI/Input/LocationInput.ts | 112 ++++++++++++++++++ .../public_bookcase/public_bookcase.json | 5 +- assets/svg/crosshair-empty.svg | 83 +++++++++++++ test.ts | 31 +++-- 10 files changed, 318 insertions(+), 64 deletions(-) create mode 100644 UI/Input/LocationInput.ts create mode 100644 assets/svg/crosshair-empty.svg diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 0acf8198f..48e96f4a2 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -54,6 +54,7 @@ export default class LayerConfig { title: Translation, tags: Tag[], description?: Translation, + preciseInput?: {preferredBackground?: string} }[]; tagRenderings: TagRenderingConfig []; @@ -130,12 +131,19 @@ export default class LayerConfig { this.minzoom = json.minzoom ?? 0; this.maxzoom = json.maxzoom ?? 1000; this.wayHandling = json.wayHandling ?? 0; - this.presets = (json.presets ?? []).map((pr, i) => - ({ + this.presets = (json.presets ?? []).map((pr, i) => { + if(pr.preciseInput === true){ + pr.preciseInput = { + preferredBackground: undefined + } + } + return ({ title: Translations.T(pr.title, `${context}.presets[${i}].title`), tags: pr.tags.map(t => FromJSON.SimpleTag(t)), - description: Translations.T(pr.description, `${context}.presets[${i}].description`) - })) + description: Translations.T(pr.description, `${context}.presets[${i}].description`), + preciseInput: pr.preciseInput + }); + }) /** Given a key, gets the corresponding property from the json (or the default if not found diff --git a/Customizations/JSON/LayerConfigJson.ts b/Customizations/JSON/LayerConfigJson.ts index d81307fd9..6739e33fd 100644 --- a/Customizations/JSON/LayerConfigJson.ts +++ b/Customizations/JSON/LayerConfigJson.ts @@ -217,6 +217,16 @@ export interface LayerConfigJson { * (The first sentence is until the first '.'-character in the description) */ description?: string | any, + + /** + * If set, the user will prompted to confirm the location before actually adding the data. + * THis will be with a 'drag crosshair'-method. + * + * If 'preferredBackgroundCategory' is set, the element will attempt to pick a background layer of that category. + */ + preciseInput?: true | { + preferredBackground: "osmbasedmap" | "photo" | "historicphoto" | "map" + } }[], /** diff --git a/Logic/Actors/AvailableBaseLayers.ts b/Logic/Actors/AvailableBaseLayers.ts index 2fd679571..52b1c12de 100644 --- a/Logic/Actors/AvailableBaseLayers.ts +++ b/Logic/Actors/AvailableBaseLayers.ts @@ -1,11 +1,13 @@ import * as editorlayerindex from "../../assets/editor-layer-index.json" import BaseLayer from "../../Models/BaseLayer"; import * as L from "leaflet"; +import {TileLayer} from "leaflet"; import * as X from "leaflet-providers"; import {UIEventSource} from "../UIEventSource"; import {GeoOperations} from "../GeoOperations"; -import {TileLayer} from "leaflet"; import {Utils} from "../../Utils"; +import Loc from "../../Models/Loc"; +import {isBoolean} from "util"; /** * Calculates which layers are available at the current location @@ -24,14 +26,16 @@ export default class AvailableBaseLayers { false, false), feature: null, max_zoom: 19, - min_zoom: 0 + min_zoom: 0, + isBest: false, // This is a lie! Of course OSM is the best map! (But not in this context) + category: "osmbasedmap" } public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex()); public availableEditorLayers: UIEventSource; - constructor(location: UIEventSource<{ lat: number, lon: number, zoom: number }>) { + constructor(location: UIEventSource) { const self = this; this.availableEditorLayers = location.map( @@ -140,7 +144,9 @@ export default class AvailableBaseLayers { min_zoom: props.min_zoom ?? 1, name: props.name, layer: leafletLayer, - feature: layer + feature: layer, + isBest: props.best ?? false, + category: props.category }); } return layers; @@ -152,15 +158,16 @@ export default class AvailableBaseLayers { function l(id: string, name: string): BaseLayer { try { const layer: any = () => L.tileLayer.provider(id, undefined); - const baseLayer: BaseLayer = { + return { feature: null, id: id, name: name, layer: layer, min_zoom: layer.minzoom, - max_zoom: layer.maxzoom + max_zoom: layer.maxzoom, + category: "osmbasedmap", + isBest: false } - return baseLayer } catch (e) { console.error("Could not find provided layer", name, e); return null; diff --git a/Models/BaseLayer.ts b/Models/BaseLayer.ts index 01eb8e9d7..84556fc69 100644 --- a/Models/BaseLayer.ts +++ b/Models/BaseLayer.ts @@ -7,4 +7,6 @@ export default interface BaseLayer { max_zoom: number, min_zoom: number; feature: any, + isBest?: boolean, + category?: "map" | "osmbasedmap" | "photo" | "historicphoto" | string } \ No newline at end of file diff --git a/Svg.ts b/Svg.ts index 9a5c94b8f..89baa7bec 100644 --- a/Svg.ts +++ b/Svg.ts @@ -89,6 +89,11 @@ export default class Svg { public static crosshair_blue_svg() { return new Img(Svg.crosshair_blue, true);} public static crosshair_blue_ui() { return new FixedUiElement(Svg.crosshair_blue_img);} + public static crosshair_empty = " image/svg+xml " + public static crosshair_empty_img = Img.AsImageElement(Svg.crosshair_empty) + public static crosshair_empty_svg() { return new Img(Svg.crosshair_empty, true);} + public static crosshair_empty_ui() { return new FixedUiElement(Svg.crosshair_empty_img);} + public static crosshair = " image/svg+xml " public static crosshair_img = Img.AsImageElement(Svg.crosshair) public static crosshair_svg() { return new Img(Svg.crosshair, true);} @@ -334,4 +339,4 @@ export default class Svg { public static wikipedia_svg() { return new Img(Svg.wikipedia, true);} public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);} -public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} +public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair-empty.svg": Svg.crosshair_empty,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 75dd3e403..05fb52c64 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -16,6 +16,9 @@ import {VariableUiElement} from "../Base/VariableUIElement"; import Toggle from "../Input/Toggle"; import UserDetails from "../../Logic/Osm/OsmConnection"; import {Translation} from "../i18n/Translation"; +import LocationInput from "../Input/LocationInput"; +import {InputElement} from "../Input/InputElement"; +import Loc from "../../Models/Loc"; /* * The SimpleAddUI is a single panel, which can have multiple states: @@ -25,14 +28,18 @@ import {Translation} from "../i18n/Translation"; * - A 'read your unread messages before adding a point' */ +/*private*/ interface PresetInfo { description: string | Translation, name: string | BaseUIElement, - icon: BaseUIElement, + icon: () => BaseUIElement, tags: Tag[], layerToAddTo: { layerDef: LayerConfig, isDisplayed: UIEventSource + }, + preciseInput?: { + preferredBackground?: string } } @@ -48,18 +55,16 @@ export default class SimpleAddUI extends Toggle { new SubtleButton(Svg.envelope_ui(), Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false}) ]); - - - + + const selectedPreset = new UIEventSource(undefined); isShown.addCallback(_ => selectedPreset.setData(undefined)) // Clear preset selection when the UI is closed/opened - - function createNewPoint(tags: any[]){ - const loc = State.state.LastClickLocation.data; - let feature = State.state.changes.createElement(tags, loc.lat, loc.lon); + + function createNewPoint(tags: any[], location: { lat: number, lon: number }) { + let feature = State.state.changes.createElement(tags, location.lat, location.lon); State.state.selectedElement.setData(feature); } - + const presetsOverview = SimpleAddUI.CreateAllPresetsPanel(selectedPreset) const addUi = new VariableUiElement( @@ -68,8 +73,8 @@ export default class SimpleAddUI extends Toggle { return presetsOverview } return SimpleAddUI.CreateConfirmButton(preset, - tags => { - createNewPoint(tags) + (tags, location) => { + createNewPoint(tags, location) selectedPreset.setData(undefined) }, () => { selectedPreset.setData(undefined) @@ -86,7 +91,7 @@ export default class SimpleAddUI extends Toggle { addUi, State.state.layerUpdater.runningQuery ), - Translations.t.general.add.zoomInFurther.Clone().SetClass("alert") , + Translations.t.general.add.zoomInFurther.Clone().SetClass("alert"), State.state.locationControl.map(loc => loc.zoom >= Constants.userJourney.minZoomLevelToAddNewPoints) ), readYourMessages, @@ -103,22 +108,41 @@ export default class SimpleAddUI extends Toggle { } - private static CreateConfirmButton(preset: PresetInfo, - confirm: (tags: any[]) => void, + confirm: (tags: any[], location: { lat: number, lon: number }) => void, cancel: () => void): BaseUIElement { + let location = State.state.LastClickLocation; + let preciseInput: InputElement = undefined + if (preset.preciseInput !== undefined) { + preciseInput = new LocationInput({ + preferCategory: preset.preciseInput.preferredBackground ?? State.state.backgroundLayer, + centerLocation: + new UIEventSource({ + lat: location.data.lat, + lon: location.data.lon, + zoom: 19 + }) + }) + preciseInput.SetClass("h-32 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;") + } - const confirmButton = new SubtleButton(preset.icon, + + let confirmButton: BaseUIElement = new SubtleButton(preset.icon(), new Combine([ Translations.t.general.add.addNew.Subs({category: preset.name}), Translations.t.general.add.warnVisibleForEveryone.Clone().SetClass("alert") ]).SetClass("flex flex-col") ).SetClass("font-bold break-words") - .onClick(() => confirm(preset.tags)); + .onClick(() => { + confirm(preset.tags, (preciseInput?.GetValue() ?? location).data); + }); + + if (preciseInput !== undefined) { + confirmButton = new Combine([preciseInput, confirmButton]) + } - - const openLayerControl = + const openLayerControl = new SubtleButton( Svg.layers_ui(), new Combine([ @@ -128,9 +152,9 @@ export default class SimpleAddUI extends Toggle { Translations.t.general.add.openLayerControl ]) ) - - .onClick(() => State.state.layerControlIsOpened.setData(true)) - + + .onClick(() => State.state.layerControlIsOpened.setData(true)) + const openLayerOrConfirm = new Toggle( confirmButton, openLayerControl, @@ -140,12 +164,12 @@ export default class SimpleAddUI extends Toggle { const cancelButton = new SubtleButton(Svg.close_ui(), Translations.t.general.cancel - ).onClick(cancel ) + ).onClick(cancel) return new Combine([ Translations.t.general.add.confirmIntro.Subs({title: preset.name}), - State.state.osmConnection.userDetails.data.dryRun ? - Translations.t.general.testing.Clone().SetClass("alert") : undefined , + State.state.osmConnection.userDetails.data.dryRun ? + Translations.t.general.testing.Clone().SetClass("alert") : undefined, openLayerOrConfirm, cancelButton, preset.description, @@ -180,11 +204,11 @@ export default class SimpleAddUI extends Toggle { } - private static CreatePresetSelectButton(preset: PresetInfo){ + private static CreatePresetSelectButton(preset: PresetInfo) { - const tagInfo =SimpleAddUI.CreateTagInfoFor(preset, false); + const tagInfo = SimpleAddUI.CreateTagInfoFor(preset, false); return new SubtleButton( - preset.icon, + preset.icon(), new Combine([ Translations.t.general.add.addNew.Subs({ category: preset.name @@ -194,29 +218,30 @@ export default class SimpleAddUI extends Toggle { ]).SetClass("flex flex-col") ) } - -/* -* Generates the list with all the buttons.*/ + + /* + * Generates the list with all the buttons.*/ private static CreatePresetButtons(selectedPreset: UIEventSource): BaseUIElement { const allButtons = []; for (const layer of State.state.filteredLayers.data) { - - if(layer.isDisplayed.data === false && State.state.featureSwitchLayers){ + + if (layer.isDisplayed.data === false && State.state.featureSwitchLayers) { continue; } - + const presets = layer.layerDef.presets; for (const preset of presets) { const tags = TagUtils.KVtoProperties(preset.tags ?? []); - let icon: BaseUIElement = layer.layerDef.GenerateLeafletStyle(new UIEventSource(tags), false).icon.html + let icon:() => BaseUIElement = () => layer.layerDef.GenerateLeafletStyle(new UIEventSource(tags), false).icon.html .SetClass("w-12 h-12 block relative"); const presetInfo: PresetInfo = { tags: preset.tags, layerToAddTo: layer, name: preset.title, description: preset.description, - icon: icon + icon: icon, + preciseInput: preset.preciseInput } const button = SimpleAddUI.CreatePresetSelectButton(presetInfo); diff --git a/UI/Input/LocationInput.ts b/UI/Input/LocationInput.ts new file mode 100644 index 000000000..cee2f5cbf --- /dev/null +++ b/UI/Input/LocationInput.ts @@ -0,0 +1,112 @@ +import {InputElement} from "./InputElement"; +import Loc from "../../Models/Loc"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import Minimap from "../Base/Minimap"; +import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"; +import BaseLayer from "../../Models/BaseLayer"; +import Combine from "../Base/Combine"; +import Svg from "../../Svg"; + +export default class LocationInput extends InputElement { + + IsSelected: UIEventSource = new UIEventSource(false); + private _centerLocation: UIEventSource; + private readonly preferCategory; + + constructor(options?: { + centerLocation?: UIEventSource, + preferCategory?: string | UIEventSource, + }) { + super(); + options = options ?? {} + options.centerLocation = options.centerLocation ?? new UIEventSource({lat: 0, lon: 0, zoom: 1}) + this._centerLocation = options.centerLocation; + + if(typeof options.preferCategory === "string"){ + options.preferCategory = new UIEventSource(options.preferCategory); + } + this.preferCategory = options.preferCategory ?? new UIEventSource(undefined) + this.SetClass("block h-full") + } + + GetValue(): UIEventSource { + return this._centerLocation; + } + + IsValid(t: Loc): boolean { + return t !== undefined; + } + + protected InnerConstructElement(): HTMLElement { + const layer: UIEventSource = new AvailableBaseLayers(this._centerLocation).availableEditorLayers.map(allLayers => { + // First float all 'best layers' to the top + allLayers.sort((a, b) => { + if (a.isBest && b.isBest) { + return 0; + } + if (!a.isBest) { + return 1 + } + + return -1; + } + ) + if (this.preferCategory) { + const self = this; + //Then sort all 'photo'-layers to the top. Stability of the sorting will force a 'best' photo layer on top + allLayers.sort((a, b) => { + const preferred = self.preferCategory.data + if (a.category === preferred && b.category === preferred) { + return 0; + } + if (a.category !== preferred) { + return 1 + } + + return -1; + } + ) + } + return allLayers[0] + }, [this.preferCategory] + ) + layer.addCallbackAndRunD(layer => console.log(layer)) + const map = new Minimap( + { + location: this._centerLocation, + background: layer + } + ) + map.leafletMap.addCallbackAndRunD(leaflet => { + console.log(leaflet.getBounds(), leaflet.getBounds().pad(0.15)) + leaflet.setMaxBounds( + leaflet.getBounds().pad(0.15) + ) + }) + + layer.map(layer => { + + const leaflet = map.leafletMap.data + if (leaflet === undefined || layer === undefined) { + return; + } + + leaflet.setMaxZoom(layer.max_zoom) + leaflet.setMinZoom(layer.max_zoom - 3) + leaflet.setZoom(layer.max_zoom - 1) + + }, [map.leafletMap]) + return new Combine([ + new Combine([ + Svg.crosshair_empty_ui() + .SetClass("block relative") + .SetStyle("left: -1.25rem; top: -1.25rem; width: 2.5rem; height: 2.5rem") + ]).SetClass("block w-0 h-0 z-10 relative") + .SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"), + map + .SetClass("z-0 relative block w-full h-full bg-gray-100") + + ]).ConstructElement(); + } + +} \ No newline at end of file diff --git a/assets/layers/public_bookcase/public_bookcase.json b/assets/layers/public_bookcase/public_bookcase.json index fdb223d06..1efe04b3a 100644 --- a/assets/layers/public_bookcase/public_bookcase.json +++ b/assets/layers/public_bookcase/public_bookcase.json @@ -73,7 +73,10 @@ }, "tags": [ "amenity=public_bookcase" - ] + ], + "preciseInput": { + "preferredBackground": "photo" + } } ], "tagRenderings": [ diff --git a/assets/svg/crosshair-empty.svg b/assets/svg/crosshair-empty.svg new file mode 100644 index 000000000..36a6e18f8 --- /dev/null +++ b/assets/svg/crosshair-empty.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/test.ts b/test.ts index eb29b9921..5d077d354 100644 --- a/test.ts +++ b/test.ts @@ -7,6 +7,9 @@ import {UIEventSource} from "./Logic/UIEventSource"; import {Tag} from "./Logic/Tags/Tag"; import {QueryParameters} from "./Logic/Web/QueryParameters"; import {Translation} from "./UI/i18n/Translation"; +import LocationInput from "./UI/Input/LocationInput"; +import Loc from "./Models/Loc"; +import {VariableUiElement} from "./UI/Base/VariableUIElement"; /*import ValidatedTextField from "./UI/Input/ValidatedTextField"; import Combine from "./UI/Base/Combine"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; @@ -148,19 +151,15 @@ function TestMiniMap() { featureSource.ping() } //*/ -QueryParameters.GetQueryParameter("test", "true").setData("true") -State.state= new State(undefined) -const id = "node/5414688303" -State.state.allElements.addElementById(id, new UIEventSource({id: id})) -new Combine([ - new DeleteWizard(id, { - noDeleteOptions: [ - { - if:[ new Tag("access","private")], - then: new Translation({ - en: "Very private! Delete now or me send lawfull lawyer" - }) - } - ] - }), -]).AttachTo("maindiv") + +const li = new LocationInput({ + preferCategory:"photo", + centerLocation: + new UIEventSource({ + lat: 51.21576, lon: 3.22001, zoom: 19 + }) +}) + li.SetStyle("height: 20rem") + .AttachTo("maindiv") + +new VariableUiElement(li.GetValue().map(v => JSON.stringify(v, null, " "))).AttachTo("extradiv") \ No newline at end of file