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

Further refactoring

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-02 21:03:40 +01:00
parent e4a2fd1daf
commit 7a7b34b0fa
17 changed files with 350 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

78
UI/Basemap.ts Normal file
View file

@ -0,0 +1,78 @@
import * as L from "leaflet"
import {UIEventSource} from "../Logic/UIEventSource";
import Loc from "../Models/Loc";
import {UIElement} from "./UIElement";
import {BaseLayer} from "../Models/BaseLayer";
export class Basemap {
public readonly map: L.Map;
constructor(leafletElementId: string,
location: UIEventSource<Loc>,
currentLayer: UIEventSource<BaseLayer>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
extraAttribution: UIElement) {
this.map = L.map(leafletElementId, {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
layers: [currentLayer.data.layer],
});
L.control.scale(
{
position: 'topright',
}
).addTo(this.map)
// Users are not allowed to zoom to the 'copies' on the left and the right, stuff goes wrong then
// We give a bit of leeway for people on the edges
// Also see: https://www.reddit.com/r/openstreetmap/comments/ih4zzc/mapcomplete_a_new_easytouse_editor/g31ubyv/
this.map.setMaxBounds(
[[-100, -200], [100, 200]]
);
this.map.attributionControl.setPrefix(
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
this.map.zoomControl.setPosition("bottomright");
const self = this;
let previousLayer = currentLayer.data;
currentLayer.addCallbackAndRun(layer => {
if (layer === previousLayer) {
return;
}
if (previousLayer !== undefined) {
self.map.removeLayer(previousLayer.layer);
}
previousLayer = layer;
self.map.addLayer(layer.layer);
})
this.map.on("moveend", function () {
location.data.zoom = self.map.getZoom();
location.data.lat = self.map.getCenter().lat;
location.data.lon = self.map.getCenter().lng;
location.ping();
});
this.map.on("click", function (e) {
// @ts-ignore
lastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
});
this.map.on("contextmenu", function (e) {
// @ts-ignore
lastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
// @ts-ignore
e.preventDefault();
});
}
}

5
UI/Input/DirectionInput.ts
View file

@ -2,10 +2,7 @@ import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import * as L from "leaflet"
import * as X from "leaflet-providers"
import {Basemap} from "../../Logic/Leaflet/Basemap";
import State from "../../State";
/**
* Selects a direction in degrees

12
UI/Misc/Attribution.ts
View file

@ -1,30 +1,30 @@
import {UIElement} from "../UIElement";
import Link from "../Base/Link";
import Svg from "../../Svg";
import {Basemap} from "../../Logic/Leaflet/Basemap";
import Combine from "../Base/Combine";
import {UIEventSource} from "../../Logic/UIEventSource";
import {UserDetails} from "../../Logic/Osm/OsmConnection";
import Constants from "../../Models/Constants";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import Loc from "../../Models/Loc";
import * as L from "leaflet"
export default class Attribution extends UIElement {
private readonly _location: UIEventSource<Loc>;
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
private readonly _userDetails: UIEventSource<UserDetails>;
private readonly _basemap: Basemap;
private readonly _leafletMap: UIEventSource<L.Map>;
constructor(location: UIEventSource<Loc>,
userDetails: UIEventSource<UserDetails>,
layoutToUse: UIEventSource<LayoutConfig>,
basemap: Basemap) {
leafletMap: UIEventSource<L.Map>) {
super(location);
this._layoutToUse = layoutToUse;
this.ListenTo(layoutToUse);
this._userDetails = userDetails;
this._basemap = basemap;
this._leafletMap = leafletMap;
this.ListenTo(userDetails);
this._location = location;
this.SetClass("map-attribution");
@ -47,9 +47,9 @@ export default class Attribution extends UIElement {
}
let editWithJosm: (UIElement | string) = ""
if (location !== undefined &&
this._basemap !== undefined &&
this._leafletMap.data !== undefined &&
userDetails.csCount >= Constants.userJourney.tagsVisibleAndWikiLinked) {
const bounds = this._basemap.map.getBounds();
const bounds = this._leafletMap.data.getBounds();
const top = bounds.getNorth();
const bottom = bounds.getSouth();
const right = bounds.getEast();

2
UI/SearchAndGo.ts
View file

@ -61,7 +61,7 @@ export class SearchAndGo extends UIElement {
[bb[0], bb[2]],
[bb[1], bb[3]]
]
State.state.bm.map.fitBounds(bounds);
State.state.leafletMap.data.fitBounds(bounds);
self._placeholder.setData(Translations.t.general.search.search);
},
() => {

2
UI/SimpleAddUI.ts
View file

@ -115,7 +115,7 @@ export class SimpleAddUI extends UIElement {
private CreatePoint(tags: Tag[], layerToAddTo: FilteredLayer) {
return () => {
const loc = State.state.bm.LastClickLocation.data;
const loc = State.state.LastClickLocation.data;
let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
State.state.selectedElement.setData(feature);
layerToAddTo.AddNewElement(feature);

2
UI/UserBadge.ts
View file

@ -59,7 +59,7 @@ export class UserBadge extends UIElement {
if (home === undefined) {
return;
}
State.state.bm.map.setView([home.lat, home.lon], 16);
State.state.leafletMap.data.setView([home.lat, home.lon], 16);
});
}