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

Update of the 'addNewMarker': show icons, show plus button, show label

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-08-22 18:48:38 +02:00
parent a2955eaf91
commit 3c73dfd6b2
12 changed files with 416 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

86
test.ts
View file

@ -1,73 +1,29 @@
import {UIEventSource} from "./Logic/UIEventSource";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import State from "./State";
import LocationInput from "./UI/Input/LocationInput";
import Loc from "./Models/Loc";
import AllKnownLayers from "./Customizations/AllKnownLayers";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
import {TagUtils} from "./Logic/Tags/TagUtils";
import Combine from "./UI/Base/Combine";
import Svg from "./Svg";
import Translations from "./UI/i18n/Translations";
import LayerConfig from "./Models/ThemeConfig/LayerConfig";
import AddNewMarker from "./UI/BigComponents/AddNewMarker";
const layout = new UIEventSource<LayoutConfig>(AllKnownLayouts.allKnownLayouts.get("cycle_infra"))
State.state = new State(layout.data)
const features = new UIEventSource<{ feature: any }[]>([
function genMarker(filteredLayers: UIEventSource<{ appliedFilters: undefined; isDisplayed: UIEventSource<boolean>; layerDef: LayerConfig }[]>) {
return new AddNewMarker(filteredLayers)
}
let filteredLayers = new UIEventSource([
{
feature: {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
3.219616413116455,
51.215315026941276
],
[
3.221080899238586,
51.21564432998662
]
]
}
}
},
{
feature: {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
3.220340609550476,
51.21547967875836
],
[
3.2198095321655273,
51.216390293480515
]
]
}
}
layerDef: AllKnownLayers.sharedLayers.get("toilet"),
isDisplayed: new UIEventSource<boolean>(true),
appliedFilters: undefined
}
])
genMarker(filteredLayers).SetStyle("width: 50px; height: 70px")
.SetClass("block border-black border")
.AttachTo("maindiv")
features.data.map(f => State.state.allElements.addOrGetElement(f.feature))
const loc = new UIEventSource<Loc>({
zoom: 19,
lat: 51.21547967875836,
lon: 3.220340609550476
})
const li = new LocationInput(
{
mapBackground: AvailableBaseLayers.SelectBestLayerAccordingTo(loc, new UIEventSource<string | string[]>("map")),
snapTo: features,
snappedPointTags: {
"barrier": "cycle_barrier"
},
maxSnapDistance: 15,
requiresSnapping: false,
centerLocation: loc
}
)
li.SetStyle("height: 30rem").AttachTo("maindiv")
new VariableUiElement(li.GetValue().map(JSON.stringify)).AttachTo("extradiv")
new FixedUiElement("").AttachTo("extradiv")