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

Merge branch 'develop' into fix-answer-with-image-style-#491

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-01 00:31:39 +02:00 • committed by GitHub
commit ba2b4754a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
262 changed files with 27237 additions and 25052 deletions
Download patch file Download diff file Expand all files Collapse all files

50
UI/Input/LocationInput.ts
View file

@ -7,12 +7,13 @@ import Combine from "../Base/Combine";
import Svg from "../../Svg";
import State from "../../State";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import {BBox, GeoOperations} from "../../Logic/GeoOperations";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import * as L from "leaflet";
import {GeoOperations} from "../../Logic/GeoOperations";
import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {BBox} from "../../Logic/BBox";
import {FixedUiElement} from "../Base/FixedUiElement";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
export default class LocationInput extends InputElement<Loc> {
@ -39,7 +40,7 @@ export default class LocationInput extends InputElement<Loc> {
private readonly _maxSnapDistance: number
private readonly _snappedPointTags: any;
private readonly _bounds: UIEventSource<BBox>;
public readonly _matching_layer: UIEventSource<LayerConfig>;
public readonly _matching_layer: LayerConfig;
constructor(options: {
mapBackground?: UIEventSource<BaseLayer>,
@ -63,18 +64,17 @@ export default class LocationInput extends InputElement<Loc> {
if (self._snappedPointTags !== undefined) {
this._matching_layer = State.state.layoutToUse.map(layout => {
const layout = State.state.layoutToUse
for (const layer of layout.layers) {
if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
return layer
}
let matchingLayer = LocationInput.matchLayer
for (const layer of layout.layers) {
if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
matchingLayer = layer
}
console.error("No matching layer found for tags ", self._snappedPointTags)
return LocationInput.matchLayer
})
}
this._matching_layer = matchingLayer;
} else {
this._matching_layer = new UIEventSource<LayerConfig>(LocationInput.matchLayer)
this._matching_layer = LocationInput.matchLayer
}
this._snappedPoint = options.centerLocation.map(loc => {
@ -125,7 +125,7 @@ export default class LocationInput extends InputElement<Loc> {
})
}
this.mapBackground = options.mapBackground ?? State.state.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
this.SetClass("block h-full")
}
@ -144,7 +144,7 @@ export default class LocationInput extends InputElement<Loc> {
{
location: this._centerLocation,
background: this.mapBackground,
attribution: this.mapBackground !== State.state.backgroundLayer,
attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: clickLocation,
bounds: this._bounds
}
@ -176,11 +176,10 @@ export default class LocationInput extends InputElement<Loc> {
enablePopups: false,
zoomToFeatures: false,
leafletMap: map.leafletMap,
layerToShow: this._matching_layer.data
layerToShow: this._matching_layer
})
}
this.mapBackground.map(layer => {
const leaflet = map.leafletMap.data
if (leaflet === undefined || layer === undefined) {
@ -192,20 +191,31 @@ export default class LocationInput extends InputElement<Loc> {
leaflet.setZoom(layer.max_zoom - 1)
}, [map.leafletMap])
const animatedHand = Svg.hand_ui()
.SetStyle("width: 2rem; height: unset;")
.SetClass("hand-drag-animation block pointer-events-none")
return new Combine([
new Combine([
Svg.move_arrows_ui()
.SetClass("block relative pointer-events-none")
.SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem")
]).SetClass("block w-0 h-0 z-10 relative")
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"),
]).SetClass("block w-0 h-0 z-10 relative")
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"),
new Combine([
animatedHand])
.SetClass("block w-0 h-0 z-10 relative")
.SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"),
map
.SetClass("z-0 relative block w-full h-full bg-gray-100")
]).ConstructElement();
} catch (e) {
console.error("Could not generate LocationInputElement:", e)
return undefined;
return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement();
}
}