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

I should have commited sooner...

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-17 02:22:48 +01:00
parent 2685b6e734
commit 16612b10ef
35 changed files with 570 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

86
Logic/FilteredLayer.ts
View file

@ -6,6 +6,7 @@ import {GeoOperations} from "./GeoOperations";
import {UIElement} from "../UI/UIElement";
import State from "../State";
import LayerConfig from "../Customizations/JSON/LayerConfig";
import Hash from "./Web/Hash";
/***
* A filtered layer is a layer which offers a 'set-data' function
@ -75,11 +76,13 @@ export class FilteredLayer {
const selfFeatures = [];
for (let feature of geojson.features) {
const tags = TagUtils.proprtiesToKV(feature.properties);
if (!this.filters.matches(tags)) {
leftoverFeatures.push(feature);
continue;
const matches = this.filters.matches(tags);
if (matches) {
selfFeatures.push(feature);
}
if (!matches || this.layerDef.passAllFeatures) {
leftoverFeatures.push(feature);
}
selfFeatures.push(feature);
}
this.RenderLayer(selfFeatures)
@ -117,7 +120,6 @@ export class FilteredLayer {
// We fetch all the data we have to show:
let fusedFeatures = this.ApplyWayHandling(this.FuseData(features));
console.log("Fused:",fusedFeatures)
// And we copy some features as points - if needed
const data = {
@ -126,7 +128,6 @@ export class FilteredLayer {
}
let self = this;
console.log(data);
this._geolayer = L.geoJSON(data, {
style: feature =>
self.layerDef.GenerateLeafletStyle(feature.properties),
@ -147,19 +148,21 @@ export class FilteredLayer {
color: style.color
});
} else {
if (style.icon.iconSize === undefined) {
style.icon.iconSize = [50, 50]
}
marker = L.marker(latLng, {
icon: L.icon(style.icon)
icon: L.divIcon(style.icon)
});
}
return marker;
},
onEachFeature: function (feature, layer: Layer) {
layer.on("click", (e) => {
if (self._showOnPopup === undefined) {
// No popup contents defined -> don't do anything
return;
}
function openPopup(latlng: any) {
if (layer.getPopup() === undefined
&& (window.screen.availHeight > 600 || window.screen.availWidth > 600) // We DON'T trigger this code on small screens! No need to create a popup
) {
@ -168,30 +171,47 @@ export class FilteredLayer {
closeOnEscapeKey: true,
}, layer);
// @ts-ignore
popup.setLatLng(e.latlng)
popup.setLatLng(latlng)
layer.bindPopup(popup);
const eventSource = State.state.allElements.addOrGetElement(feature);
const uiElement = self._showOnPopup(eventSource, feature);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
popup.setContent(uiElement.Render());
popup.openOn(State.state.bm.map);
// popup.openOn(State.state.bm.map);
// ANd we perform the pending update
uiElement.Update();
// @ts-ignore
popup.Update = () => {
uiElement.Update();
}
} else {
// @ts-ignore
layer.getPopup().Update();
}
// We set the element as selected...
State.state.selectedElement.setData(feature);
layer.bindPopup(popup);
const eventSource = State.state.allElements.addOrGetElement(feature);
const uiElement = self._showOnPopup(eventSource, feature);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
popup.setContent(uiElement.Render());
popup.openOn(State.state.bm.map);
// popup.openOn(State.state.bm.map);
// ANd we perform the pending update
uiElement.Update();
}
// We set the element as selected...
State.state.selectedElement.setData(feature);
// We mark the event as consumed
L.DomEvent.stop(e);
});
}
}
)
;
layer.on("click", (e) => {
// @ts-ignore
openPopup(e.latlng);
// We mark the event as consumed
L.DomEvent.stop(e);
});
if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) {
const center = GeoOperations.centerpoint(feature).geometry.coordinates;
openPopup({lat: center[1], lng: center[0]})
}
}
});
if (this.combinedIsDisplayed.data) {
this._geolayer.addTo(State.state.bm.map);

18
Logic/Leaflet/GeoLocationHandler.ts
View file

@ -4,7 +4,6 @@ import {UIElement} from "../../UI/UIElement";
import State from "../../State";
import {Utils} from "../../Utils";
import {Basemap} from "./Basemap";
import {FixedUiElement} from "../../UI/Base/FixedUiElement";
import Svg from "../../Svg";
import {Img} from "../../UI/Img";
@ -48,15 +47,18 @@ export class GeoLocationHandler extends UIElement {
map.on('accuratepositionfound', onAccuratePositionFound);
map.on('accuratepositionerror', onAccuratePositionError);
FixedUiElement
const icon = L.icon(
{
iconUrl: Img.AsData(Svg.crosshair_blue),
iconSize: [40, 40], // size of the icon
iconAnchor: [20, 20], // point of the icon which will correspond to marker's location
})
State.state.currentGPSLocation.addCallback((location) => {
const color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
const icon = L.icon(
{
iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)),
iconSize: [40, 40], // size of the icon
iconAnchor: [20, 20], // point of the icon which will correspond to marker's location
})
const newMarker = L.marker(location.latlng, {icon: icon});
newMarker.addTo(map);

5
Logic/UpdateFromOverpass.ts
View file

@ -62,6 +62,11 @@ export class UpdateFromOverpass {
if (state.locationControl.data.zoom < layer.minzoom) {
continue;
}
if(layer.doNotDownload){
continue;
}
// Check if data for this layer has already been loaded
let previouslyLoaded = false;
for (let z = layer.minzoom; z < 25 && !previouslyLoaded; z++) {

18
Logic/Web/Hash.ts Normal file
View file

@ -0,0 +1,18 @@
import {UIEventSource} from "../UIEventSource";
export default class Hash {
public static Get() : UIEventSource<string>{
const hash = new UIEventSource<string>(window.location.hash.substr(1));
hash.addCallback(h => {
h = h.replace(/\//g, "_");
return window.location.hash = "#" + h;
});
window.onhashchange = () => {
hash.setData(window.location.hash.substr(1))
}
return hash;
}
}

3
Logic/Web/QueryParameters.ts
View file

@ -2,6 +2,7 @@
* Wraps the query parameters into UIEventSources
*/
import {UIEventSource} from "../UIEventSource";
import Hash from "./Hash";
export class QueryParameters {
@ -57,7 +58,7 @@ export class QueryParameters {
parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(QueryParameters.knownSources[key].data))
}
history.replaceState(null, "", "?" + parts.join("&"));
history.replaceState(null, "", "?" + parts.join("&") + "#" + Hash.Get().data);
}