midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add more background layers, add default background id option in the layout configuration, fix #64, #65

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-27 23:37:47 +02:00
parent 62cc392cfd
commit 66ce783f20
10 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Customizations/JSON/FromJSON.ts
View file

@ -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;

6
Customizations/JSON/LayoutConfigJson.ts
View file

@ -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

16
Customizations/Layout.ts
View file

@ -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=<name>" is defined, it will select this layout
* @param title: Will be used in the <title> 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)

18
InitUiElements.ts
View file

@ -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;
}

44
Logic/AvailableBaseLayers.ts
View file

@ -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)"),
];
}

2
Logic/BaseLayer.ts
View file

@ -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
}

7
Logic/Leaflet/Basemap.ts
View file

@ -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);
}
}

2
UI/BackgroundSelector.ts
View file

@ -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);

3
assets/themes/ghostbikes/ghostbikes.json
View file

@ -18,5 +18,6 @@
"startLat": 0,
"startLon": 0,
"widenFactor": 0.1,
"layers": ["ghost_bike"]
"layers": ["ghost_bike"],
"defaultBackgroundId": "CartoDB.Positron"
}

4
test.ts
View file

@ -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)
console.log(Basemap.ProvidedLayer("Stamen.Toner"))