contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Feature: add more vector layers from maptiler; add some fixes to theme setting handler

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-09-24 18:24:10 +02:00
parent 94f9fe7b5f
commit b3edbe846c
18 changed files with 155 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/layers/usersettings/usersettings.json
View file

@ -24,7 +24,7 @@
"_mastodon_candidate_a=(feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName(\"a\")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href }) (feat) ",
"_mastodon_link=(feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName(\"a\")).filter(a => a.getAttribute(\"rel\")?.indexOf('me') >= 0)[0]?.href})(feat) ",
"_mastodon_candidate=feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a",
"__current_background='some value to let the validation run through'"
"__current_background='initial_value'"
],
"tagRenderings": [
{
@ -104,11 +104,25 @@
"*": "{logout()}"
}
},
{
"id": "background-layer-readonly",
"condition": {
"and": [
"_theme:backgroundLayer~*",
"mapcomplete-preferred-background-layer~*",
"_theme:backgroundLayer!:={mapcomplete-preferred-background-layer}"
]
},
"render": {
"en": "This thematic map has a predefined background layer set. Your default theme setting does not apply"
}
},
{
"id": "background-layer",
"question": {
"en": "What background layer should be shown by default?"
},
"condition": "_theme:backgroundLayer=",
"mappings": [
{
"if": "mapcomplete-preferred-background-layer=",
@ -140,7 +154,11 @@
"en": "Use the current background layer (<span class='code'>{__current_background}</span>) as default background"
},
"hideInAnswer": {
"or": ["__current_background=","__current_background=osm"]
"or": [
"__current_background=",
"__current_background=osm",
"__current_background=initial_value"
]
}
},
{

2
assets/themes/blind_osm/blind_osm.json
View file

@ -31,7 +31,7 @@
"startLat": 52.99238,
"startLon": 6.570614,
"startZoom": 20,
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"layers": [
{
"builtin": "cycleways_and_roads",

2
assets/themes/cycle_highways/cycle_highways.json
View file

@ -265,6 +265,6 @@
]
}
],
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"credits": "L'imaginaire"
}

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

@ -44,7 +44,7 @@
"layers": [
"ghost_bike"
],
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"clustering": {
"maxZoom": 0
}

2
assets/themes/maps/maps.json
View file

@ -47,7 +47,7 @@
"startLon": 0,
"startZoom": 1,
"widenFactor": 5,
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"layers": [
"map"
]

2
assets/themes/speelplekken/speelplekken.json
View file

@ -27,7 +27,7 @@
"startZoom": 12,
"widenFactor": 1.2,
"socialImage": "./assets/themes/speelplekken/social_image.jpg",
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"layers": [
{
"id": "shadow",

2
assets/themes/stations/stations.json
View file

@ -27,7 +27,7 @@
"startLon": 0,
"startZoom": 0,
"hideFromOverview": true,
"defaultBackgroundId": "CartoDB.Positron",
"defaultBackgroundId": "maptiler.backdrop",
"layers": [
{
"builtin": "indoors",

4
assets/themes/surveillance/surveillance.json
View file

@ -54,8 +54,8 @@
"startLon": 0,
"startZoom": 1,
"widenFactor": 2,
"defaultBackgroundId": "osm",
"defaultBackgroundId": "maptiler.carto",
"layers": [
"surveillance_camera"
]
}
}

2
src/Logic/State/UserRelatedState.ts
View file

@ -43,6 +43,7 @@ export default class UserRelatedState {
public readonly homeLocation: FeatureSource
public readonly language: UIEventSource<string>
public readonly preferredBackgroundLayer: UIEventSource<string | "photo" | "map" | "osmbasedmap" | undefined>
public readonly preferredBackgroundLayerForTheme: UIEventSource<string | "photo" | "map" | "osmbasedmap" | undefined>
/**
* The number of seconds that the GPS-locations are stored in memory.
* Time in seconds
@ -258,6 +259,7 @@ export default class UserRelatedState {
): UIEventSource<Record<string, string>> {
const amendedPrefs = new UIEventSource<Record<string, string>>({
_theme: layout?.id,
"_theme:backgroundLayer": layout?.defaultBackgroundId,
_backend: this.osmConnection.Backend(),
_applicationOpened: new Date().toISOString(),
_supports_sharing:

2
src/Logic/State/UserSettingsMetaTagging.ts
View file

@ -9,6 +9,6 @@ export class ThemeMetaTagging {
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href }) (feat) )
Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat) )
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a )
Utils.AddLazyProperty(feat.properties, '__backgroundLayerId', () => 'some value to let the validation run through' )
Utils.AddLazyProperty(feat.properties, '__current_background', () => 'initial_value' )
}
}

193
src/Models/RasterLayers.ts
View file

@ -1,43 +1,43 @@
import { Feature, Polygon } from "geojson"
import * as editorlayerindex from "../assets/editor-layer-index.json"
import * as globallayers from "../assets/global-raster-layers.json"
import { BBox } from "../Logic/BBox"
import { Store, Stores } from "../Logic/UIEventSource"
import { GeoOperations } from "../Logic/GeoOperations"
import { RasterLayerProperties } from "./RasterLayerProperties"
import { Feature, Polygon } from "geojson";
import * as editorlayerindex from "../assets/editor-layer-index.json";
import * as globallayers from "../assets/global-raster-layers.json";
import { BBox } from "../Logic/BBox";
import { Store, Stores } from "../Logic/UIEventSource";
import { GeoOperations } from "../Logic/GeoOperations";
import { RasterLayerProperties } from "./RasterLayerProperties";
export class AvailableRasterLayers {
public static EditorLayerIndex: (Feature<Polygon, EditorLayerIndexProperties> &
RasterLayerPolygon)[] = <any>editorlayerindex.features
RasterLayerPolygon)[] = <any>editorlayerindex.features;
public static globalLayers: RasterLayerPolygon[] = globallayers.layers.map(
(properties) =>
<RasterLayerPolygon>{
type: "Feature",
properties,
geometry: BBox.global.asGeometry(),
geometry: BBox.global.asGeometry()
}
)
);
public static readonly osmCartoProperties: RasterLayerProperties = {
id: "osm",
name: "OpenStreetMap",
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution: {
text: "OpenStreetMap",
url: "https://openStreetMap.org/copyright",
url: "https://openStreetMap.org/copyright"
},
best: true,
max_zoom: 19,
min_zoom: 0,
category: "osmbasedmap",
}
category: "osmbasedmap"
};
public static readonly osmCarto: RasterLayerPolygon = {
type: "Feature",
properties: AvailableRasterLayers.osmCartoProperties,
geometry: BBox.global.asGeometry(),
}
geometry: BBox.global.asGeometry()
};
public static readonly maplibre: RasterLayerPolygon = {
public static readonly maptilerDefaultLayer: RasterLayerPolygon = {
type: "Feature",
properties: {
name: "MapTiler",
@ -47,12 +47,43 @@ export class AvailableRasterLayers {
type: "vector",
attribution: {
text: "Maptiler",
url: "https://www.maptiler.com/copyright/",
},
url: "https://www.maptiler.com/copyright/"
}
},
geometry: BBox.global.asGeometry(),
}
geometry: BBox.global.asGeometry()
};
public static readonly maptilerCarto: RasterLayerPolygon = {
type: "Feature",
properties: {
name: "MapTiler Carto",
url: "https://api.maptiler.com/maps/openstreetmap/style.json?key=GvoVAJgu46I5rZapJuAy",
category: "osmbasedmap",
id: "maptiler.carto",
type: "vector",
attribution: {
text: "Maptiler",
url: "https://www.maptiler.com/copyright/"
}
},
geometry: BBox.global.asGeometry()
};
public static readonly maptilerBackdrop: RasterLayerPolygon = {
type: "Feature",
properties: {
name: "MapTiler Backdrop",
url: "https://api.maptiler.com/maps/backdrop/style.json?key=GvoVAJgu46I5rZapJuAy",
category: "osmbasedmap",
id: "maptiler.backdrop",
type: "vector",
attribution: {
text: "Maptiler",
url: "https://www.maptiler.com/copyright/"
}
},
geometry: BBox.global.asGeometry()
};
public static readonly americana: RasterLayerPolygon = {
type: "Feature",
properties: {
@ -63,41 +94,43 @@ export class AvailableRasterLayers {
type: "vector",
attribution: {
text: "Americana",
url: "https://github.com/ZeLonewolf/openstreetmap-americana/",
},
url: "https://github.com/ZeLonewolf/openstreetmap-americana/"
}
},
geometry: BBox.global.asGeometry(),
}
geometry: BBox.global.asGeometry()
};
public static layersAvailableAt(
location: Store<{ lon: number; lat: number }>
): Store<RasterLayerPolygon[]> {
const availableLayersBboxes = Stores.ListStabilized(
location.mapD((loc) => {
const lonlat: [number, number] = [loc.lon, loc.lat]
const lonlat: [number, number] = [loc.lon, loc.lat];
return AvailableRasterLayers.EditorLayerIndex.filter((eliPolygon) =>
BBox.get(eliPolygon).contains(lonlat)
)
);
})
)
);
const available = Stores.ListStabilized(
availableLayersBboxes.map((eliPolygons) => {
const loc = location.data
const lonlat: [number, number] = [loc.lon, loc.lat]
const loc = location.data;
const lonlat: [number, number] = [loc.lon, loc.lat];
const matching: RasterLayerPolygon[] = eliPolygons.filter((eliPolygon) => {
if (eliPolygon.geometry === null) {
return true // global ELI-layer
return true; // global ELI-layer
}
return GeoOperations.inside(lonlat, eliPolygon)
})
matching.unshift(AvailableRasterLayers.osmCarto)
matching.unshift(AvailableRasterLayers.americana)
matching.unshift(AvailableRasterLayers.maplibre)
matching.push(...AvailableRasterLayers.globalLayers)
return matching
return GeoOperations.inside(lonlat, eliPolygon);
});
matching.push(...AvailableRasterLayers.globalLayers);
matching.unshift(AvailableRasterLayers.maptilerDefaultLayer,
AvailableRasterLayers.osmCarto,
AvailableRasterLayers.maptilerCarto,
AvailableRasterLayers.maptilerBackdrop,
AvailableRasterLayers.americana);
return matching;
})
)
return available
);
return available;
}
}
@ -115,22 +148,22 @@ export class RasterLayerUtils {
preferredCategory: string,
ignoreLayer?: RasterLayerPolygon
): RasterLayerPolygon {
let secondBest: RasterLayerPolygon = undefined
let secondBest: RasterLayerPolygon = undefined;
for (const rasterLayer of available) {
if (rasterLayer === ignoreLayer) {
continue
continue;
}
const p = rasterLayer.properties
const p = rasterLayer.properties;
if (p.category === preferredCategory) {
if (p.best) {
return rasterLayer
return rasterLayer;
}
if (!secondBest) {
secondBest = rasterLayer
secondBest = rasterLayer;
}
}
}
return secondBest
return secondBest;
}
}
@ -146,11 +179,11 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
/**
* The name of the imagery source
*/
readonly name: string
readonly name: string;
/**
* Whether the imagery name should be translated
*/
readonly i18n?: boolean
readonly i18n?: boolean;
readonly type:
| "tms"
| "wms"
@ -158,7 +191,7 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
| "scanex"
| "wms_endpoint"
| "wmts"
| "vector" /* Vector is not actually part of the ELI-spec, we add it for vector layers */
| "vector"; /* Vector is not actually part of the ELI-spec, we add it for vector layers */
/**
* A rough categorisation of different types of layers. See https://github.com/osmlab/editor-layer-index/blob/gh-pages/CONTRIBUTING.md#categories for a description of the individual categories.
*/
@ -170,53 +203,53 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
| "historicphoto"
| "qa"
| "elevation"
| "other"
| "other";
/**
* A URL template for imagery tiles
*/
readonly url: string
readonly min_zoom?: number
readonly max_zoom?: number
readonly url: string;
readonly min_zoom?: number;
readonly max_zoom?: number;
/**
* explicit/implicit permission by the owner for use in OSM
*/
readonly permission_osm?: "explicit" | "implicit" | "no"
readonly permission_osm?: "explicit" | "implicit" | "no";
/**
* A URL for the license or permissions for the imagery
*/
readonly license_url?: string
readonly license_url?: string;
/**
* A URL for the privacy policy of the operator or false if there is no existing privacy policy for tis imagery.
*/
readonly privacy_policy_url?: string | boolean
readonly privacy_policy_url?: string | boolean;
/**
* A unique identifier for the source; used in imagery_used changeset tag
*/
readonly id: string
readonly id: string;
/**
* A short English-language description of the source
*/
readonly description?: string
readonly description?: string;
/**
* The ISO 3166-1 alpha-2 two letter country code in upper case. Use ZZ for unknown or multiple.
*/
readonly country_code?: string
readonly country_code?: string;
/**
* Whether this imagery should be shown in the default world-wide menu
*/
readonly default?: boolean
readonly default?: boolean;
/**
* Whether this imagery is the best source for the region
*/
readonly best?: boolean
readonly best?: boolean;
/**
* The age of the oldest imagery or data in the source, as an RFC3339 date or leading portion of one
*/
readonly start_date?: string
readonly start_date?: string;
/**
* The age of the newest imagery or data in the source, as an RFC3339 date or leading portion of one
*/
readonly end_date?: string
readonly end_date?: string;
/**
* HTTP header to check for information if the tile is invalid
*/
@ -226,61 +259,61 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
* via the `patternProperty` "^.*$".
*/
[k: string]: string[] | null
}
};
/**
* 'true' if tiles are transparent and can be overlaid on another source
*/
readonly overlay?: boolean & string
readonly available_projections?: string[]
readonly overlay?: boolean & string;
readonly available_projections?: string[];
readonly attribution?: {
readonly url?: string
readonly text?: string
readonly html?: string
readonly required?: boolean
}
};
/**
* A URL for an image, that can be displayed in the list of imagery layers next to the name
*/
readonly icon?: string
readonly icon?: string;
/**
* A link to an EULA text that has to be accepted by the user, before the imagery source is added. Can contain {lang} to be replaced by a current user language wiki code (like FR:) or an empty string for the default English text.
*/
readonly eula?: string
readonly eula?: string;
/**
* A URL for an image, that is displayed in the mapview for attribution
*/
readonly "logo-image"?: string
readonly "logo-image"?: string;
/**
* Customized text for the terms of use link (default is "Background Terms of Use")
*/
readonly "terms-of-use-text"?: string
readonly "terms-of-use-text"?: string;
/**
* Specify a checksum for tiles, which aren't real tiles. `type` is the digest type and can be MD5, SHA-1, SHA-256, SHA-384 and SHA-512, value is the hex encoded checksum in lower case. To create a checksum save the tile as file and upload it to e.g. https://defuse.ca/checksums.htm.
*/
readonly "no-tile-checksum"?: string
readonly "no-tile-checksum"?: string;
/**
* header-name attribute specifies a header returned by tile server, that will be shown as `metadata-key` attribute in Show Tile Info dialog
*/
readonly "metadata-header"?: string
readonly "metadata-header"?: string;
/**
* Set to `true` if imagery source is properly aligned and does not need imagery offset adjustments. This is used for OSM based sources too.
*/
readonly "valid-georeference"?: boolean
readonly "valid-georeference"?: boolean;
/**
* Size of individual tiles delivered by a TMS service
*/
readonly "tile-size"?: number
readonly "tile-size"?: number;
/**
* Whether tiles status can be accessed by appending /status to the tile URL and can be submitted for re-rendering by appending /dirty.
*/
readonly "mod-tile-features"?: string
readonly "mod-tile-features"?: string;
/**
* HTTP headers to be sent to server. It has two attributes header-name and header-value. May be specified multiple times.
*/
readonly "custom-http-headers"?: {
readonly "header-name"?: string
readonly "header-value"?: string
}
};
/**
* Default layer to open (when using WMS_ENDPOINT type). Contains list of layer tag with two attributes - name and style, e.g. `"default-layers": ["layer": { name="Basisdata_NP_Basiskart_JanMayen_WMTS_25829" "style":"default" } ]` (not allowed in `mirror` attribute)
*/
@ -291,17 +324,17 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
[k: string]: unknown
}
[k: string]: unknown
}[]
}[];
/**
* format to use when connecting tile server (when using WMS_ENDPOINT type)
*/
readonly format?: string
readonly format?: string;
/**
* If `true` transparent tiles will be requested from WMS server
*/
readonly transparent?: boolean & string
readonly transparent?: boolean & string;
/**
* minimum expiry time for tiles in seconds. The larger the value, the longer entry in cache will be considered valid
*/
readonly "minimum-tile-expire"?: number
readonly "minimum-tile-expire"?: number;
}

7
src/Models/ThemeConfig/Conversion/LegacyJsonConvert.ts
View file

@ -4,6 +4,7 @@ import LineRenderingConfigJson from "../Json/LineRenderingConfigJson"
import { LayerConfigJson } from "../Json/LayerConfigJson"
import { DesugaringStep, Each, Fuse, On } from "./Conversion"
import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
import { del } from "idb-keyval";
export class UpdateLegacyLayer extends DesugaringStep<
LayerConfigJson | string | { builtin; override }
@ -41,7 +42,6 @@ export class UpdateLegacyLayer extends DesugaringStep<
delete preset["preciseInput"]
} else if (preciseInput !== undefined) {
delete preciseInput["preferredBackground"]
console.log("Precise input:", preciseInput)
preset.snapToLayer = preciseInput.snapToLayer
delete preciseInput.snapToLayer
if (preciseInput.maxSnapDistance) {
@ -146,7 +146,6 @@ export class UpdateLegacyLayer extends DesugaringStep<
}
const pr = <PointRenderingConfigJson>rendering
let iconSize = pr.iconSize
console.log("Iconsize is", iconSize)
if (Object.keys(pr.iconSize).length === 1 && pr.iconSize["render"] !== undefined) {
iconSize = pr.iconSize["render"]
@ -198,6 +197,10 @@ class UpdateLegacyTheme extends DesugaringStep<LayoutConfigJson> {
delete oldThemeConfig.socialImage
}
if(oldThemeConfig.defaultBackgroundId === "osm"){
console.log("Removing old background in", json.id)
}
if (oldThemeConfig["roamingRenderings"] !== undefined) {
if (oldThemeConfig["roamingRenderings"].length == 0) {
delete oldThemeConfig["roamingRenderings"]

2
src/UI/BigComponents/BackgroundSwitcher.svelte
View file

@ -37,7 +37,7 @@
function updatedAltLayer() {
const available = availableRasterLayers.data
const current = rasterLayer.data
const defaultLayer = AvailableRasterLayers.maplibre
const defaultLayer = AvailableRasterLayers.maptilerDefaultLayer
const firstOther = available.find((l) => l !== defaultLayer)
const secondOther = available.find((l) => l !== defaultLayer && l !== firstOther)
raster0.setData(firstOther === current ? defaultLayer : firstOther)

2
src/UI/DownloadFlow/DownloadPdf.svelte
View file

@ -29,7 +29,7 @@
const templateUrls = SvgToPdf.templates[templateName].pages
const templates: string[] = await Promise.all(templateUrls.map((url) => Utils.download(url)))
console.log("Templates are", templates)
const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maplibre
const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maptilerDefaultLayer
const creator = new SvgToPdf(title, templates, {
state,
freeComponentId: "belowmap",

2
src/UI/Map/MapLibreAdaptor.ts
View file

@ -405,7 +405,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
this.removeCurrentLayer(map)
} else {
// Make sure that the default maptiler style is loaded as it gives an overlay with roads
const maptiler = AvailableRasterLayers.maplibre.properties
const maptiler = AvailableRasterLayers.maptilerDefaultLayer.properties
if (!map.getSource(maptiler.id)) {
this.removeCurrentLayer(map)
map.addSource(maptiler.id, MapLibreAdaptor.prepareWmsSource(maptiler))

2
src/UI/Map/MaplibreMap.svelte
View file

@ -24,7 +24,7 @@
writable({ lng: 0, lat: 0 })
export let zoom: Readable<number> = writable(1)
const styleUrl = AvailableRasterLayers.maplibre.properties.url
const styleUrl = AvailableRasterLayers.maptilerDefaultLayer.properties.url
let _map: Map
onMount(() => {

2
src/UI/ThemeViewGUI.svelte
View file

@ -103,7 +103,7 @@
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
let rasterLayerName =
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
onDestroy(
rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name

2
src/Utils/pngMapCreator.ts
View file

@ -46,7 +46,7 @@ export class PngMapCreator {
const pixelRatio = 4
const mapElem = new MlMap({
container: div.id,
style: AvailableRasterLayers.maplibre.properties.url,
style: AvailableRasterLayers.maptilerDefaultLayer.properties.url,
center: [l.lon, l.lat],
zoom: settings.zoom.data,
pixelRatio,