forked from MapComplete/MapComplete
Lot's of small improvements
This commit is contained in:
parent
9bd37d9cde
commit
8bca006787
29 changed files with 375 additions and 173 deletions
|
@ -1,5 +1,6 @@
|
|||
import L from "leaflet"
|
||||
import {UIEventSource} from "../UI/UIEventSource";
|
||||
import {UIElement} from "../UI/UIElement";
|
||||
|
||||
// Contains all setup and baselayers for Leaflet stuff
|
||||
export class Basemap {
|
||||
|
@ -8,6 +9,7 @@ export class Basemap {
|
|||
public map: Map;
|
||||
|
||||
public Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
|
||||
public LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{lat: number, lon: number}>(undefined)
|
||||
|
||||
private aivLucht2013Layer = L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
|
||||
{
|
||||
|
@ -19,7 +21,7 @@ export class Basemap {
|
|||
"LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
|
||||
{
|
||||
// omwrgbmrvl
|
||||
attribution: 'Map Data <a href="osm.org">OpenStreetMap</a> | Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
||||
attribution: 'Map Data <a href="https://osm.org">OpenStreetMap</a> | Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
||||
maxZoom: 20,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
|
@ -28,20 +30,20 @@ export class Basemap {
|
|||
|
||||
private osmLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{
|
||||
attribution: 'Map Data and background © <a href="osm.org">OpenStreetMap</a>',
|
||||
attribution: 'Map Data and background © <a href="https://osm.org">OpenStreetMap</a>',
|
||||
maxZoom: 19,
|
||||
minZoom: 1
|
||||
});
|
||||
private osmBeLayer = L.tileLayer("https://tile.osm.be/osmbe/{z}/{x}/{y}.png",
|
||||
{
|
||||
attribution: 'Map Data and background © <a href="osm.org">OpenStreetMap</a> | <a href="https://geo6.be/">Tiles courtesy of Geo6</a>',
|
||||
attribution: 'Map Data and background © <a href="https://osm.org">OpenStreetMap</a> | <a href="https://geo6.be/">Tiles courtesy of Geo6</a>',
|
||||
maxZoom: 18,
|
||||
minZoom: 1
|
||||
});
|
||||
|
||||
private grbLayer = L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
|
||||
{
|
||||
attribution: 'Map Data <a href="osm.org">OpenStreetMap</a> | Background <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
|
||||
attribution: 'Map Data <a href="https://osm.org">OpenStreetMap</a> | Background <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
|
||||
maxZoom: 20,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
|
@ -56,25 +58,24 @@ export class Basemap {
|
|||
"GRB Vlaanderen": this.grbLayer
|
||||
};
|
||||
|
||||
|
||||
constructor(leafletElementId: string, location: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
|
||||
constructor(leafletElementId: string,
|
||||
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
|
||||
extraAttribution: UIElement) {
|
||||
this.map = L.map(leafletElementId, {
|
||||
center: [location.data.lat, location.data.lon],
|
||||
zoom: location.data.zoom,
|
||||
layers: [this.osmLayer],
|
||||
});
|
||||
|
||||
|
||||
this.map.attributionControl.setPrefix(extraAttribution.Render());
|
||||
this.Location = location;
|
||||
|
||||
const layerControl = L.control.layers(this.baseLayers, null,
|
||||
{
|
||||
position: 'bottomright',
|
||||
hideSingleBase: true
|
||||
})
|
||||
layerControl.addTo(this.map);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.map.zoomControl.setPosition("bottomright");
|
||||
const self = this;
|
||||
|
@ -82,11 +83,13 @@ export class Basemap {
|
|||
this.map.on("moveend", function () {
|
||||
location.data.zoom = self.map.getZoom();
|
||||
location.data.lat = self.map.getCenter().lat;
|
||||
location.data.lon = self.map.getCenter().lon;
|
||||
location.data.lon = self.map.getCenter().lng;
|
||||
location.ping();
|
||||
});
|
||||
|
||||
|
||||
this.map.on("click", function (e) {
|
||||
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -183,9 +183,10 @@ export class FilteredLayer {
|
|||
eventSource.addCallback(function () {
|
||||
self.updateStyle();
|
||||
});
|
||||
layer.on("click", function(){
|
||||
layer.on("click", function(e){
|
||||
console.log("Selected ",feature)
|
||||
self._selectedElement.setData(feature.properties);
|
||||
L.DomEvent.stop(e); // Marks the event as consumed
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@ import {UIEventSource} from "../UI/UIEventSource";
|
|||
import {UIElement} from "../UI/UIElement";
|
||||
import L from "leaflet";
|
||||
import {Helpers} from "../Helpers";
|
||||
import {UserDetails} from "./OsmConnection";
|
||||
|
||||
export class GeoLocationHandler extends UIElement {
|
||||
|
||||
|
@ -78,7 +79,6 @@ export class GeoLocationHandler extends UIElement {
|
|||
});
|
||||
|
||||
this.HideOnEmpty(true);
|
||||
|
||||
}
|
||||
|
||||
protected InnerRender(): string {
|
||||
|
|
|
@ -51,7 +51,6 @@ export class GeoOperations {
|
|||
}
|
||||
const intersectionSize = turf.area(intersection);
|
||||
const ratio = intersectionSize / featureSurface;
|
||||
console.log("Intersection ratio", ratio, "intersection:", intersectionSize, "featuresize:", featureSurface, "targetRatio", maxOverlapPercentage / 100);
|
||||
|
||||
if (ratio * 100 >= maxOverlapPercentage) {
|
||||
console.log("Refused", poly.id, " due to ", shouldNotContainElement.id, "intersection ratio is ", ratio, "which is bigger then the target ratio of ", (maxOverlapPercentage / 100))
|
||||
|
|
|
@ -10,8 +10,9 @@ export class UserDetails {
|
|||
public img: string;
|
||||
public unreadMessages = 0;
|
||||
public totalMessages = 0;
|
||||
public osmConnection : OsmConnection;
|
||||
public dryRun : boolean;
|
||||
public osmConnection: OsmConnection;
|
||||
public dryRun: boolean;
|
||||
home: { lon: number; lat: number };
|
||||
|
||||
}
|
||||
|
||||
|
@ -66,6 +67,8 @@ export class OsmConnection {
|
|||
if (details == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.UpdatePreferences();
|
||||
// details is an XML DOM of user details
|
||||
let userInfo = details.getElementsByTagName("user")[0];
|
||||
|
||||
|
@ -84,6 +87,13 @@ export class OsmConnection {
|
|||
}
|
||||
data.img = data.img ?? "./assets/osm-logo.svg";
|
||||
|
||||
const homeEl = userInfo.getElementsByTagName("home");
|
||||
if (homeEl !== undefined && homeEl[0] !== undefined) {
|
||||
const lat = parseFloat(homeEl[0].getAttribute("lat"));
|
||||
const lon = parseFloat(homeEl[0].getAttribute("lon"));
|
||||
data.home = {lat: lat, lon: lon};
|
||||
}
|
||||
|
||||
const messages = userInfo.getElementsByTagName("messages")[0].getElementsByTagName("received")[0];
|
||||
data.unreadMessages = parseInt(messages.getAttribute("unread"));
|
||||
data.totalMessages = parseInt(messages.getAttribute("count"));
|
||||
|
@ -108,6 +118,47 @@ export class OsmConnection {
|
|||
}
|
||||
}
|
||||
|
||||
public preferences = new UIEventSource<any>({});
|
||||
private UpdatePreferences() {
|
||||
const self = this;
|
||||
this.auth.xhr({
|
||||
method: 'GET',
|
||||
path: '/api/0.6/user/preferences'
|
||||
}, function (error, value: XMLDocument) {
|
||||
if(error){
|
||||
console.log("Could not load preferences", error);
|
||||
return;
|
||||
}
|
||||
const prefs = value.getElementsByTagName("preference");
|
||||
for (let i = 0; i < prefs.length; i++) {
|
||||
const pref = prefs[i];
|
||||
const k = pref.getAttribute("k");
|
||||
const v = pref.getAttribute("v");
|
||||
self.preferences.data[k] = v;
|
||||
}
|
||||
self.preferences.ping();
|
||||
});
|
||||
}
|
||||
|
||||
public SetPreference(k:string, v:string){
|
||||
this.preferences.data[k] = v;
|
||||
this.preferences.ping();
|
||||
this.auth.xhr({
|
||||
method: 'PUT',
|
||||
path: '/api/0.6/user/preferences/'+k,
|
||||
options: { header: { 'Content-Type': 'text/plain' } },
|
||||
content: v
|
||||
},function(error, result) {
|
||||
if(error){
|
||||
console.log("Could not set preference", error);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Preference written!", result);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
private static parseUploadChangesetResponse(response: XMLDocument) {
|
||||
const nodes = response.getElementsByTagName("node");
|
||||
const mapping = {};
|
||||
|
|
49
Logic/StrayClickHandler.ts
Normal file
49
Logic/StrayClickHandler.ts
Normal file
|
@ -0,0 +1,49 @@
|
|||
import {Basemap} from "./Basemap";
|
||||
import L from "leaflet";
|
||||
import {UIEventSource} from "../UI/UIEventSource";
|
||||
import {UIElement} from "../UI/UIElement";
|
||||
|
||||
/**
|
||||
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
|
||||
* Shows the given uiToShow-element in the messagebox
|
||||
*/
|
||||
export class StrayClickHandler {
|
||||
private _basemap: Basemap;
|
||||
private _lastMarker;
|
||||
private _leftMessage: UIEventSource<() => UIElement>;
|
||||
private _uiToShow: (() => UIElement);
|
||||
|
||||
constructor(
|
||||
basemap: Basemap,
|
||||
selectElement: UIEventSource<any>,
|
||||
leftMessage: UIEventSource<() => UIElement>,
|
||||
uiToShow: (() => UIElement)) {
|
||||
this._basemap = basemap;
|
||||
this._leftMessage = leftMessage;
|
||||
this._uiToShow = uiToShow;
|
||||
const self = this;
|
||||
const map = basemap.map;
|
||||
basemap.LastClickLocation.addCallback(function (lastClick) {
|
||||
|
||||
if (self._lastMarker !== undefined) {
|
||||
map.removeLayer(self._lastMarker);
|
||||
}
|
||||
|
||||
self._lastMarker = L.marker([lastClick.lat, lastClick.lon]);
|
||||
self._lastMarker.addTo(map);
|
||||
|
||||
leftMessage.setData(self._uiToShow);
|
||||
|
||||
});
|
||||
|
||||
selectElement.addCallback(() => {
|
||||
if (self._lastMarker !== undefined) {
|
||||
map.removeLayer(self._lastMarker);
|
||||
this._lastMarker = undefined;
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue