Lot's of small improvements

This commit is contained in:
Pieter Vander Vennet 2020-06-29 03:12:44 +02:00
parent 9bd37d9cde
commit 8bca006787
29 changed files with 375 additions and 173 deletions

View file

@ -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})
});
}

View file

@ -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
});
}
});

View file

@ -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 {

View file

@ -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))

View file

@ -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 = {};

View 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;
}
})
}
}