forked from MapComplete/MapComplete
Refactoring: attempting to make State smaller
This commit is contained in:
parent
a6f56acad6
commit
849c61c8a1
28 changed files with 529 additions and 485 deletions
273
Logic/Actors/AvailableBaseLayers.ts
Normal file
273
Logic/Actors/AvailableBaseLayers.ts
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
import * as editorlayerindex from "../../assets/editor-layer-index.json"
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
import {GeoOperations} from "../GeoOperations";
|
||||
import {Basemap} from "../Leaflet/Basemap";
|
||||
import {BaseLayer} from "../../Models/BaseLayer";
|
||||
import * as X from "leaflet-providers";
|
||||
import * as L from "leaflet";
|
||||
import {TileLayer} from "leaflet";
|
||||
import {Utils} from "../../Utils";
|
||||
|
||||
/**
|
||||
* Calculates which layers are available at the current location
|
||||
* Changes the basemap
|
||||
*/
|
||||
export default class AvailableBaseLayers {
|
||||
|
||||
|
||||
public static osmCarto: BaseLayer =
|
||||
{
|
||||
id: "osm",
|
||||
name: "OpenStreetMap",
|
||||
layer: AvailableBaseLayers.CreateBackgroundLayer("osm", "OpenStreetMap",
|
||||
"https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", "https://openStreetMap.org/copyright",
|
||||
19,
|
||||
false, false),
|
||||
feature: null,
|
||||
max_zoom: 19,
|
||||
min_zoom: 0
|
||||
}
|
||||
|
||||
|
||||
public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex());
|
||||
public availableEditorLayers: UIEventSource<BaseLayer[]>;
|
||||
|
||||
constructor(location: UIEventSource<{ lat: number, lon: number, zoom: number }>,
|
||||
bm: Basemap) {
|
||||
const self = this;
|
||||
this.availableEditorLayers =
|
||||
location.map(
|
||||
(currentLocation) => {
|
||||
const currentLayers = self.availableEditorLayers?.data;
|
||||
const newLayers = AvailableBaseLayers.AvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
|
||||
|
||||
if (currentLayers === undefined) {
|
||||
return newLayers;
|
||||
}
|
||||
if (newLayers.length !== currentLayers.length) {
|
||||
return newLayers;
|
||||
}
|
||||
for (let i = 0; i < newLayers.length; i++) {
|
||||
if (newLayers[i].name !== currentLayers[i].name) {
|
||||
return newLayers;
|
||||
}
|
||||
}
|
||||
|
||||
return currentLayers;
|
||||
});
|
||||
|
||||
|
||||
// Change the baselayer back to OSM if we go out of the current range of the layer
|
||||
this.availableEditorLayers.addCallbackAndRun(availableLayers => {
|
||||
const layerControl = bm.CurrentLayer;
|
||||
const currentLayer = layerControl.data.id;
|
||||
for (const availableLayer of availableLayers) {
|
||||
if (availableLayer.id === currentLayer) {
|
||||
|
||||
if (availableLayer.max_zoom < location.data.zoom) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (availableLayer.min_zoom > location.data.zoom) {
|
||||
break;
|
||||
}
|
||||
return; // All good - the current layer still works!
|
||||
}
|
||||
}
|
||||
// Oops, we panned out of range for this layer!
|
||||
console.log("AvailableBaseLayers-actor: detected that the current bounds aren't sufficient anymore - reverting to OSM standard")
|
||||
layerControl.setData(AvailableBaseLayers.osmCarto);
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
private static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
|
||||
const availableLayers = [AvailableBaseLayers.osmCarto]
|
||||
const globalLayers = [];
|
||||
for (const i in AvailableBaseLayers.layerOverview) {
|
||||
const layer = AvailableBaseLayers.layerOverview[i];
|
||||
if (layer.feature?.geometry === undefined || layer.feature?.geometry === null) {
|
||||
globalLayers.push(layer);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (lon === undefined || lat === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (GeoOperations.inside([lon, lat], layer.feature)) {
|
||||
availableLayers.push(layer);
|
||||
}
|
||||
}
|
||||
|
||||
return availableLayers.concat(globalLayers);
|
||||
}
|
||||
|
||||
private static LoadRasterIndex(): BaseLayer[] {
|
||||
const layers: BaseLayer[] = []
|
||||
// @ts-ignore
|
||||
const features = editorlayerindex.features;
|
||||
for (const i in features) {
|
||||
const layer = features[i];
|
||||
const props = layer.properties;
|
||||
|
||||
if (props.id === "Bing") {
|
||||
// Doesnt work
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.id === "MAPNIK") {
|
||||
// Already added by default
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.overlay) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.url.toLowerCase().indexOf("apikey") > 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.max_zoom < 19) {
|
||||
// We want users to zoom to level 19 when adding a point
|
||||
// If they are on a layer which hasn't enough precision, they can not zoom far enough. This is confusing, so we don't use this layer
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.name === undefined) {
|
||||
console.warn("Editor layer index: name not defined on ", props)
|
||||
continue
|
||||
}
|
||||
|
||||
const leafletLayer = AvailableBaseLayers.CreateBackgroundLayer(
|
||||
props.id,
|
||||
props.name,
|
||||
props.url,
|
||||
props.name,
|
||||
props.license_url,
|
||||
props.max_zoom,
|
||||
props.type.toLowerCase() === "wms",
|
||||
props.type.toLowerCase() === "wmts"
|
||||
)
|
||||
|
||||
// Note: if layer.geometry is null, there is global coverage for this layer
|
||||
layers.push({
|
||||
id: props.id,
|
||||
max_zoom: props.max_zoom ?? 25,
|
||||
min_zoom: props.min_zoom ?? 1,
|
||||
name: props.name,
|
||||
layer: leafletLayer,
|
||||
feature: layer
|
||||
});
|
||||
}
|
||||
return layers;
|
||||
}
|
||||
|
||||
private static LoadProviderIndex(): BaseLayer[] {
|
||||
// @ts-ignore
|
||||
X; // Import X to make sure the namespace is not optimized away
|
||||
function l(id: string, name: string) {
|
||||
try {
|
||||
const layer: any = L.tileLayer.provider(id, undefined);
|
||||
return {
|
||||
feature: null,
|
||||
id: id,
|
||||
name: name,
|
||||
layer: layer,
|
||||
min_zoom: layer.minzoom,
|
||||
max_zoom: layer.maxzoom
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Could not find provided layer", name, e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const layers = [
|
||||
l("CyclOSM", "CyclOSM - A bicycle oriented map"),
|
||||
l("Stamen.TonerLite", "Toner Lite (by Stamen)"),
|
||||
l("Stamen.TonerBackground", "Toner Background - no labels (by Stamen)"),
|
||||
l("Stamen.Watercolor", "Watercolor (by Stamen)"),
|
||||
l("Stadia.AlidadeSmooth", "Alidade Smooth (by Stadia)"),
|
||||
l("Stadia.AlidadeSmoothDark", "Alidade Smooth Dark (by Stadia)"),
|
||||
l("Stadia.OSMBright", "Osm Bright (by Stadia)"),
|
||||
l("CartoDB.Positron", "Positron (by CartoDB)"),
|
||||
l("CartoDB.PositronNoLabels", "Positron - no labels (by CartoDB)"),
|
||||
l("CartoDB.Voyager", "Voyager (by CartoDB)"),
|
||||
l("CartoDB.VoyagerNoLabels", "Voyager - no labels (by CartoDB)"),
|
||||
];
|
||||
return Utils.NoNull(layers);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a layer from the editor-layer-index into a tilelayer usable by leaflet
|
||||
*/
|
||||
private static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
|
||||
maxZoom: number, isWms: boolean, isWMTS?: boolean): TileLayer {
|
||||
|
||||
url = url.replace("{zoom}", "{z}")
|
||||
.replace("&BBOX={bbox}", "")
|
||||
.replace("&bbox={bbox}", "");
|
||||
|
||||
const subdomainsMatch = url.match(/{switch:[^}]*}/)
|
||||
let domains: string[] = [];
|
||||
if (subdomainsMatch !== null) {
|
||||
let domainsStr = subdomainsMatch[0].substr("{switch:".length);
|
||||
domainsStr = domainsStr.substr(0, domainsStr.length - 1);
|
||||
domains = domainsStr.split(",");
|
||||
url = url.replace(/{switch:[^}]*}/, "{s}")
|
||||
}
|
||||
|
||||
|
||||
if (isWms) {
|
||||
url = url.replace("&SRS={proj}", "");
|
||||
url = url.replace("&srs={proj}", "");
|
||||
const paramaters = ["format", "layers", "version", "service", "request", "styles", "transparent", "version"];
|
||||
const urlObj = new URL(url);
|
||||
|
||||
const isUpper = urlObj.searchParams["LAYERS"] !== null;
|
||||
const options = {
|
||||
maxZoom: maxZoom ?? 19,
|
||||
attribution: attribution + " | ",
|
||||
subdomains: domains,
|
||||
uppercase: isUpper,
|
||||
transparent: false
|
||||
};
|
||||
|
||||
for (const paramater of paramaters) {
|
||||
let p = paramater;
|
||||
if (isUpper) {
|
||||
p = paramater.toUpperCase();
|
||||
}
|
||||
options[paramater] = urlObj.searchParams.get(p);
|
||||
}
|
||||
|
||||
if (options.transparent === null) {
|
||||
options.transparent = false;
|
||||
}
|
||||
|
||||
|
||||
return L.tileLayer.wms(urlObj.protocol + "//" + urlObj.host + urlObj.pathname, options);
|
||||
}
|
||||
|
||||
if (attributionUrl) {
|
||||
attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
|
||||
}
|
||||
|
||||
return L.tileLayer(url,
|
||||
{
|
||||
attribution: attribution,
|
||||
maxZoom: maxZoom,
|
||||
minZoom: 1,
|
||||
// @ts-ignore
|
||||
wmts: isWMTS ?? false,
|
||||
subdomains: domains
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
174
Logic/Actors/ImageSearcher.ts
Normal file
174
Logic/Actors/ImageSearcher.ts
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
import {ImagesInCategory, Wikidata, Wikimedia} from "../Web/Wikimedia";
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
|
||||
/**
|
||||
* There are multiple way to fetch images for an object
|
||||
* 1) There is an image tag
|
||||
* 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
|
||||
* 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
|
||||
* 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
|
||||
* 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
|
||||
* 6) There is a wikipedia article, from which we can deduct the wikidata item
|
||||
*
|
||||
* For some images, author and license should be shown
|
||||
*/
|
||||
/**
|
||||
* Class which search for all the possible locations for images and which builds a list of UI-elements for it.
|
||||
* Note that this list is embedded into an UIEVentSource, ready to put it into a carousel.
|
||||
*
|
||||
*/
|
||||
export class ImageSearcher {
|
||||
|
||||
public readonly images = new UIEventSource<{ key: string, url: string }[]>([]);
|
||||
private readonly _wdItem = new UIEventSource<string>("");
|
||||
private readonly _commons = new UIEventSource<string>("");
|
||||
|
||||
constructor(tags: UIEventSource<any>, imagePrefix = "image", loadSpecial = true) {
|
||||
const self = this;
|
||||
|
||||
function AddImages(images: { key: string, url: string }[]) {
|
||||
const oldUrls = self.images.data.map(kurl => kurl.url);
|
||||
let somethingChanged = false;
|
||||
for (const image of images) {
|
||||
const url = image.url;
|
||||
const key = image.key;
|
||||
|
||||
if (url === undefined || url === null || url === "") {
|
||||
continue;
|
||||
}
|
||||
if (oldUrls.indexOf(url) >= 0) {
|
||||
// Already exists
|
||||
continue;
|
||||
}
|
||||
|
||||
self.images.data.push(image);
|
||||
somethingChanged = true;
|
||||
}
|
||||
if (somethingChanged) {
|
||||
self.images.ping();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// By wrapping this in a UIEventSource, we prevent multiple queries of loadWikiData
|
||||
this._wdItem.addCallback(wdItemContents => {
|
||||
// TODO HANDLE IMAGES
|
||||
const images = ImageSearcher.loadWikidata(wdItemContents).map(url => {
|
||||
return {url: url, key: undefined}
|
||||
});
|
||||
AddImages(images);
|
||||
});
|
||||
this._commons.addCallback(commonsData => {
|
||||
// TODO Handle images
|
||||
const images = ImageSearcher.LoadCommons(commonsData).map(url => {
|
||||
return {url: url, key: undefined}
|
||||
});
|
||||
AddImages(images);
|
||||
});
|
||||
tags.addCallbackAndRun(tags => {
|
||||
const images = ImageSearcher.LoadImages(tags, imagePrefix, loadSpecial);
|
||||
AddImages(images);
|
||||
});
|
||||
|
||||
if (loadSpecial) {
|
||||
tags.addCallbackAndRun(tags => {
|
||||
|
||||
const wdItem = tags.wikidata;
|
||||
if (wdItem !== undefined) {
|
||||
self._wdItem.setData(wdItem);
|
||||
}
|
||||
const commons = tags.wikimedia_commons;
|
||||
if (commons !== undefined) {
|
||||
self._commons.setData(commons);
|
||||
}
|
||||
|
||||
if (tags.mapillary) {
|
||||
let mapillary = tags.mapillary;
|
||||
const prefix = "https://www.mapillary.com/map/im/";
|
||||
|
||||
let regex = /https?:\/\/www.mapillary.com\/app\/.*&pKey=([^&]*)/
|
||||
let match = mapillary.match(regex);
|
||||
if (match) {
|
||||
mapillary = match[1];
|
||||
}
|
||||
|
||||
if (mapillary.indexOf(prefix) < 0) {
|
||||
mapillary = prefix + mapillary;
|
||||
}
|
||||
|
||||
|
||||
AddImages([{url: mapillary, key: undefined}]);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private static loadWikidata(wikidataItem): string[] {
|
||||
// Load the wikidata item, then detect usage on 'commons'
|
||||
let allWikidataId = wikidataItem.split(";");
|
||||
const imageURLS: string[] = [];
|
||||
for (let wikidataId of allWikidataId) {
|
||||
// @ts-ignore
|
||||
if (wikidataId.startsWith("Q")) {
|
||||
wikidataId = wikidataId.substr(1);
|
||||
}
|
||||
Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
|
||||
imageURLS.push(wd.image);
|
||||
Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
|
||||
for (const image of images.images) {
|
||||
// @ts-ignore
|
||||
if (image.startsWith("File:")) {
|
||||
imageURLS.push(image);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
return imageURLS;
|
||||
}
|
||||
|
||||
private static LoadCommons(commonsData: string): string[] {
|
||||
const imageUrls = [];
|
||||
const allCommons: string[] = commonsData.split(";");
|
||||
for (const commons of allCommons) {
|
||||
// @ts-ignore
|
||||
if (commons.startsWith("Category:")) {
|
||||
Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
|
||||
for (const image of images.images) {
|
||||
// @ts-ignore
|
||||
if (image.startsWith("File:")) {
|
||||
imageUrls.push(image);
|
||||
}
|
||||
}
|
||||
})
|
||||
} else { // @ts-ignore
|
||||
if (commons.startsWith("File:")) {
|
||||
imageUrls.push(commons);
|
||||
}
|
||||
}
|
||||
}
|
||||
return imageUrls;
|
||||
}
|
||||
|
||||
private static LoadImages(tags: any, imagePrefix: string, loadAdditional: boolean): { key: string, url: string }[] {
|
||||
const imageTag = tags[imagePrefix];
|
||||
const images: { key: string, url: string }[] = [];
|
||||
if (imageTag !== undefined) {
|
||||
const bareImages = imageTag.split(";");
|
||||
for (const bareImage of bareImages) {
|
||||
images.push({key: imagePrefix, url: bareImage})
|
||||
}
|
||||
}
|
||||
|
||||
for (const key in tags) {
|
||||
if (key.startsWith(imagePrefix + ":")) {
|
||||
const url = tags[key]
|
||||
images.push({key: key, url: url})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return images;
|
||||
}
|
||||
|
||||
}
|
||||
8
Logic/Actors/Readme.md
Normal file
8
Logic/Actors/Readme.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
Actors
|
||||
======
|
||||
|
||||
An **actor** is a module which converts one UIEventSource into another while performing logic.
|
||||
|
||||
Typically, it will only expose the constructor taking some UIEventSources (and configuration) and a few fields which are UIEVentSources.
|
||||
|
||||
An actor should _never_ have a dependency on 'State' and should _never_ import it
|
||||
Loading…
Add table
Add a link
Reference in a new issue