mapcomplete/Logic/Leaflet/Basemap.ts

154 lines
5.5 KiB
TypeScript
Raw Normal View History

2020-09-27 22:48:43 +02:00
import * as L from "leaflet"
import * as X from "leaflet-providers"
2020-09-27 22:48:43 +02:00
import {TileLayer} from "leaflet"
import {UIEventSource} from "../UIEventSource";
2020-07-30 00:59:08 +02:00
import {UIElement} from "../../UI/UIElement";
2020-09-27 22:48:43 +02:00
import {BaseLayer} from "../BaseLayer";
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
// Contains all setup and baselayers for Leaflet stuff
export class Basemap {
2020-06-24 00:35:19 +02:00
2020-09-27 22:48:43 +02:00
public static osmCarto: BaseLayer =
{
id: "osm",
//max_zoom: 19,
name: "OpenStreetMap",
layer: Basemap.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
}
2020-07-22 14:46:43 +02:00
// @ts-ignore
public readonly map: Map;
2020-06-24 00:35:19 +02:00
public readonly Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
public readonly LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
2020-09-27 22:48:43 +02:00
private _previousLayer: TileLayer = undefined;
public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(Basemap.osmCarto);
2020-06-24 00:35:19 +02:00
2020-06-29 03:12:44 +02:00
constructor(leafletElementId: string,
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
extraAttribution: UIElement) {
2020-09-27 22:48:43 +02:00
this._previousLayer = Basemap.osmCarto.layer;
this.map = L.map(leafletElementId, {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
layers: [this._previousLayer],
2020-06-24 00:35:19 +02:00
});
// 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]]
);
2020-06-29 03:40:19 +02:00
this.map.attributionControl.setPrefix(
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
2020-06-24 00:35:19 +02:00
this.Location = location;
2020-06-29 03:12:44 +02:00
this.map.zoomControl.setPosition("bottomright");
2020-06-24 00:35:19 +02:00
const self = this;
2020-06-24 00:35:19 +02:00
this.map.on("moveend", function () {
location.data.zoom = self.map.getZoom();
location.data.lat = self.map.getCenter().lat;
2020-06-29 03:12:44 +02:00
location.data.lon = self.map.getCenter().lng;
2020-06-24 00:35:19 +02:00
location.ping();
});
2020-09-27 22:48:43 +02:00
this.CurrentLayer.addCallback((layer: BaseLayer) => {
if (self._previousLayer !== undefined) {
self.map.removeLayer(self._previousLayer);
}
self._previousLayer = layer.layer;
self.map.addLayer(layer.layer);
});
2020-06-29 03:12:44 +02:00
this.map.on("click", function (e) {
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
});
this.map.on("contextmenu", function (e) {
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
e.preventDefault();
});
2020-06-24 00:35:19 +02:00
}
public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
2020-09-27 22:48:43 +02:00
maxZoom: number, isWms: boolean, isWMTS?: boolean): TileLayer {
url = url.replace("{zoom}", "{z}")
.replace("&BBOX={bbox}", "")
.replace("&bbox={bbox}", "");
2020-09-27 01:38:51 +02:00
const subdomainsMatch = url.match(/{switch:[^}]*}/)
let domains: string[] = [];
2020-09-27 01:38:51 +02:00
if (subdomainsMatch !== null) {
let domainsStr = subdomainsMatch[0].substr("{switch:".length);
domainsStr = domainsStr.substr(0, domainsStr.length - 1);
2020-09-27 01:38:51 +02:00
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;
}
2020-09-27 22:48:43 +02:00
return L.tileLayer.wms(urlObj.protocol + "//" + urlObj.host + urlObj.pathname, options);
}
if (attributionUrl) {
attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
}
2020-09-27 22:48:43 +02:00
return L.tileLayer(url,
{
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
// @ts-ignore
wmts: isWMTS ?? false,
subdomains: domains
});
}
2020-09-27 22:48:43 +02:00
public static ProvidedLayer(name: string, options?: any): any {
X // We simply 'call' the namespace X here to force the import to run and not to be optimized away
// @ts-ignore
return L.tileLayer.provider(name, options);
2020-09-27 22:48:43 +02:00
}
2020-06-24 00:35:19 +02:00
}