diff --git a/Customizations/JSON/FromJSON.ts b/Customizations/JSON/FromJSON.ts index 307b3e94a..a539a0eb5 100644 --- a/Customizations/JSON/FromJSON.ts +++ b/Customizations/JSON/FromJSON.ts @@ -87,6 +87,7 @@ export class FromJSON { ); + layout.defaultBackground = json.defaultBackgroundId ?? "osm"; layout.widenFactor = json.widenFactor ?? 0.07; layout.icon = json.icon; layout.maintainer = json.maintainer; diff --git a/Customizations/JSON/LayoutConfigJson.ts b/Customizations/JSON/LayoutConfigJson.ts index 08cbe099c..f64732e6c 100644 --- a/Customizations/JSON/LayoutConfigJson.ts +++ b/Customizations/JSON/LayoutConfigJson.ts @@ -94,6 +94,12 @@ export interface LayoutConfigJson { * These tag renderings will only show up if the object matches this filter. */ roamingRenderings?: (TagRenderingConfigJson | string)[], + + /** + * The id of the default background. BY default: vanilla OSM + */ + defaultBackgroundId?: string; + /** * The layers to display diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index 8e1976dd4..f0a644715 100644 --- a/Customizations/Layout.ts +++ b/Customizations/Layout.ts @@ -34,6 +34,7 @@ export class Layout { public enableUserBadge: boolean = true; public enableSearch: boolean = true; public enableLayers: boolean = true; + public enableBackgroundLayers: boolean = true; public enableMoreQuests: boolean = true; public enableShareScreen: boolean = true; public enableGeolocation: boolean = true; @@ -46,19 +47,6 @@ export class Layout { public widenFactor: number = 0.07; public defaultBackground: string = "osm"; - /** - * - * @param id: The name used in the query string. If in the query "quests=" is defined, it will select this layout - * @param title: Will be used in the of the page - * @param layers: The layers to show, a list of LayerDefinitions - * @param startzoom: The initial starting zoom of the map - * @param startLat:The initial starting latitude of the map - * @param startLon: the initial starting longitude of the map - * @param welcomeMessage: This message is shown in the collapsable box on the left - * @param gettingStartedPlzLogin: This is shown below the welcomemessage and wrapped in a login link. - * @param welcomeBackMessage: This is shown when the user is logged in - * @param welcomeTail: This text is shown below the login message. It is ideal for extra help - */ constructor( id: string, supportedLanguages: string[], @@ -75,7 +63,7 @@ export class Layout { Translations.t.general.getStartedNewAccount ]), welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack, - welcomeTail: UIElement | string = "" + welcomeTail: UIElement | string = "", ) { this.supportedLanguages = supportedLanguages; this.title = Translations.W(title) diff --git a/InitUiElements.ts b/InitUiElements.ts index 180fd0641..08518dc3d 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -353,13 +353,21 @@ export class InitUiElements { } private static GenerateLayerControlPanel() { - let layerControlPanel: UIElement = new BackgroundSelector(State.state); - layerControlPanel.SetStyle("margin:1em"); - layerControlPanel.onClick(() => {}); + + + let layerControlPanel: UIElement = undefined; + if (State.state.layoutToUse.data.enableBackgroundLayers) { + layerControlPanel = new BackgroundSelector(State.state); + layerControlPanel.SetStyle("margin:1em"); + layerControlPanel.onClick(() => { }); + } + + if (State.state.filteredLayers.data.length > 1) { const layerSelection = new LayerSelection(); - layerSelection.onClick(() => {}); - layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]); + layerSelection.onClick(() => { + }); + layerControlPanel = new Combine([layerSelection, "<br/>", layerControlPanel]); } return layerControlPanel; } diff --git a/Logic/AvailableBaseLayers.ts b/Logic/AvailableBaseLayers.ts index 3c3963515..187ed1666 100644 --- a/Logic/AvailableBaseLayers.ts +++ b/Logic/AvailableBaseLayers.ts @@ -13,7 +13,7 @@ export default class AvailableBaseLayers { - public static layerOverview = AvailableBaseLayers.LoadRasterIndex()//.concat(AvailableBaseLayers.LoadStamenIndex()); + public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex()); public availableEditorLayers: UIEventSource<BaseLayer[]>; constructor(state: State) { @@ -88,7 +88,7 @@ export default class AvailableBaseLayers { const globalLayers = []; for (const i in AvailableBaseLayers.layerOverview) { const layer = AvailableBaseLayers.layerOverview[i]; - if (layer.feature.geometry === null) { + if (layer.feature?.geometry === undefined || layer.feature?.geometry === null) { globalLayers.push(layer); continue; } @@ -158,7 +158,6 @@ export default class AvailableBaseLayers { id: props.id, max_zoom: props.max_zoom ?? 25, min_zoom: props.min_zoom ?? 1, - attribution_url: props.license_url, name: props.name, layer: leafletLayer, feature: layer @@ -166,21 +165,34 @@ export default class AvailableBaseLayers { } return layers; } - - private static LoadStamenIndex(): BaseLayer[]{ + + private static LoadProviderIndex(): BaseLayer[] { + + function l(id: string, name: string){ + const layer = Basemap.ProvidedLayer(id); + return { + feature: null, + id: id, + name: name, + layer: layer, + min_zoom: layer.minzoom, + max_zoom: layer.maxzoom + } + } return [ - { - attribution: "Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. Data by <a href=\"http://openstreetmap.org\">OpenStreetMap</a>, under <a href=\"http://www.openstreetmap.org/copyright\">ODbL</a>.", - attribution_url: undefined, // already in the attribution string - feature: null, - id: "toner", - layer:Basemap.ProvidedLayer("toner"), - max_zoom: 20, - min_zoom:1, - name: "Toner" - } - ] + 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)"), + + ]; } diff --git a/Logic/BaseLayer.ts b/Logic/BaseLayer.ts index 5adac959d..e5e1c2ccc 100644 --- a/Logic/BaseLayer.ts +++ b/Logic/BaseLayer.ts @@ -3,10 +3,8 @@ import {TileLayer} from "leaflet"; export interface BaseLayer { id: string, name: string, - attribution_url: string, layer: TileLayer, max_zoom: number, min_zoom: number; feature: any, - attribution?: string } \ No newline at end of file diff --git a/Logic/Leaflet/Basemap.ts b/Logic/Leaflet/Basemap.ts index 1b7e8788b..a1b09c9d5 100644 --- a/Logic/Leaflet/Basemap.ts +++ b/Logic/Leaflet/Basemap.ts @@ -1,4 +1,5 @@ import * as L from "leaflet" +import * as X from "leaflet-providers" import {TileLayer} from "leaflet" import {UIEventSource} from "../UIEventSource"; import {UIElement} from "../../UI/UIElement"; @@ -12,7 +13,6 @@ export class Basemap { { id: "osm", //max_zoom: 19, - attribution_url: "https://openStreetMap.org/copyright", name: "OpenStreetMap", layer: Basemap.CreateBackgroundLayer("osm", "OpenStreetMap", "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", "https://openStreetMap.org/copyright", @@ -146,7 +146,8 @@ export class Basemap { } public static ProvidedLayer(name: string, options?: any): any { - // return new L.tileLayer.provider(name, options); - return undefined; + 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); } } diff --git a/UI/BackgroundSelector.ts b/UI/BackgroundSelector.ts index da086a9e7..f4faa1f41 100644 --- a/UI/BackgroundSelector.ts +++ b/UI/BackgroundSelector.ts @@ -29,7 +29,7 @@ export default class BackgroundSelector extends UIElement { const baseLayers: { value: BaseLayer, shown: string }[] = []; for (const i in available) { const layer: BaseLayer = available[i]; - baseLayers.push({value: layer.layer, shown: layer.name ?? "id:" + layer.id}); + baseLayers.push({value: layer, shown: layer.name ?? "id:" + layer.id}); } this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer); diff --git a/assets/themes/ghostbikes/ghostbikes.json b/assets/themes/ghostbikes/ghostbikes.json index 6bc82b811..bc7a64f11 100644 --- a/assets/themes/ghostbikes/ghostbikes.json +++ b/assets/themes/ghostbikes/ghostbikes.json @@ -18,5 +18,6 @@ "startLat": 0, "startLon": 0, "widenFactor": 0.1, - "layers": ["ghost_bike"] + "layers": ["ghost_bike"], + "defaultBackgroundId": "CartoDB.Positron" } \ No newline at end of file diff --git a/test.ts b/test.ts index 98924327c..498aaf25d 100644 --- a/test.ts +++ b/test.ts @@ -1,5 +1,3 @@ import {Basemap} from "./Logic/Leaflet/Basemap"; -const input = "https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?FORMAT=image/jpeg&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=OGWRGB13_15VL&STYLES=&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}"; -const leafletLayer = Basemap.CreateBackgroundLayer("aiv", "AIV", input, "Attr", "http://osm.org", 22, true, false); -console.log(leafletLayer) \ No newline at end of file +console.log(Basemap.ProvidedLayer("Stamen.Toner")) \ No newline at end of file