import L from "leaflet" import {UIEventSource} from "../UIEventSource"; import {UIElement} from "../../UI/UIElement"; export class BaseLayers { public static readonly defaultLayer: { name: string, layer: any, id: string } = { id: "osm", name: "Kaart van OpenStreetMap", layer: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '', maxZoom: 19, minZoom: 1 }) }; public static readonly baseLayers: { name: string, layer: any, id: string } [] = [ { id: "aiv-latest", name: "Luchtfoto Vlaanderen (recentste door AIV)", layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" + "LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}", { // omwrgbmrvl attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV', maxZoom: 20, minZoom: 1, wmts: true }) }, BaseLayers.defaultLayer, { id: "aiv-13-15", name: "Luchtfoto Vlaanderen (2013-2015, door AIV)", layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s', { layers: "OGWRGB13_15VL", attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | " }) }, { id:"grb", name: "Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV", layer: 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: 'Achtergrond Grootschalig ReferentieBestand(GRB) © AGIV', maxZoom: 20, minZoom: 1, wmts: true }) } ] ; } // Contains all setup and baselayers for Leaflet stuff export class Basemap { // @ts-ignore public readonly map: Map; 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) private _previousLayer: L.tileLayer = undefined; public readonly CurrentLayer: UIEventSource<{ id: string, name: string, layer: L.tileLayer }> = new UIEventSource(BaseLayers.defaultLayer); constructor(leafletElementId: string, location: UIEventSource<{ zoom: number, lat: number, lon: number }>, extraAttribution: UIElement) { this.map = L.map(leafletElementId, { center: [location.data.lat ?? 0, location.data.lon ?? 0], zoom: location.data.zoom ?? 2, layers: [BaseLayers.defaultLayer.layer], }); // 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]] ); this.map.attributionControl.setPrefix( extraAttribution.Render() + " | OpenStreetMap"); this.Location = location; this.map.zoomControl.setPosition("bottomright"); const self = this; this.map.on("moveend", function () { location.data.zoom = self.map.getZoom(); location.data.lat = self.map.getCenter().lat; location.data.lon = self.map.getCenter().lng; location.ping(); }); this.CurrentLayer.addCallback((layer:{layer: L.tileLayer}) => { if(self._previousLayer !== undefined){ self.map.removeLayer(self._previousLayer); } self._previousLayer = layer.layer; self.map.addLayer(layer.layer); }); 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}); console.log("Right click") e.preventDefault(); }); } }