Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Use protomaps.sunny as default layer

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-03-25 04:17:13 +01:00
parent 6a08c28dca
commit e8f4b382a8
18 changed files with 89 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/assets/sunny.json
View file

@ -1147,6 +1147,7 @@
"fill-opacity": 0.5
}
},
{
"id": "transit_pier",
"type": "line",

2
scripts/generateLayouts.ts
View file

@ -259,7 +259,7 @@ class GenerateLayouts extends Script {
const urls: string[] = []
const regex = /{switch:([^}]+)}/
const rasterLayers = [
AvailableRasterLayers.maptilerDefaultLayer,
AvailableRasterLayers.defaultBackgroundLayer,
...eli.features,
...eli_global.layers.map((properties) => ({ properties }))
]

30
src/Models/RasterLayers.ts
View file

@ -48,26 +48,12 @@ export class AvailableRasterLayers {
geometry: BBox.global.asGeometry(),
}
public static readonly maptilerDefaultLayer: RasterLayerPolygon = {
type: "Feature",
properties: {
name: "MapTiler",
url:
"https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=" +
Constants.maptilerApiKey,
style:
"https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=" +
Constants.maptilerApiKey,
category: "osmbasedmap",
id: "maptiler",
type: "vector",
attribution: {
text: "Maptiler",
url: "https://www.maptiler.com/copyright/",
},
},
geometry: BBox.global.asGeometry(),
}
/**
* The default background layer that any theme uses which does not explicitly define a background
*/
public static readonly defaultBackgroundLayer: RasterLayerPolygon = AvailableRasterLayers.globalLayers.find(l => {
return l.properties.id === "protomaps.sunny"
})
public static layersAvailableAt(
location: Store<{ lon: number; lat: number }>,
@ -93,7 +79,7 @@ export class AvailableRasterLayers {
return GeoOperations.inside(lonlat, eliPolygon)
})
matching.unshift(AvailableRasterLayers.osmCarto)
matching.push(AvailableRasterLayers.maptilerDefaultLayer)
matching.push(AvailableRasterLayers.defaultBackgroundLayer)
if (enableBing?.data) {
matching.push(AvailableRasterLayers.bing)
}
@ -110,7 +96,7 @@ export class AvailableRasterLayers {
all.push(...AvailableRasterLayers.globalLayers.map((l) => l.properties.id))
all.push(...AvailableRasterLayers.EditorLayerIndex.map((l) => l.properties.id))
all.push(this.osmCarto.properties.id)
all.push(this.maptilerDefaultLayer.properties.id)
all.push(this.defaultBackgroundLayer.properties.id)
return new Set<string>(all)
}
}

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

@ -106,6 +106,6 @@
</script>
<div class="h-full w-full relative">
<MaplibreMap {map} />
<MaplibreMap {map} mapProperties={adaptor} />
<SmallZoomButtons {adaptor} />
</div>

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

@ -25,7 +25,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.maptilerDefaultLayer
const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.defaultBackgroundLayer
const creator = new SvgToPdf(title, templates, {
state,
freeComponentId: "belowmap",

2
src/UI/InputElement/Helpers/DirectionInput.svelte
View file

@ -63,7 +63,7 @@
on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
>
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap attribution={false} {map} />
<MaplibreMap mapProperties={mla} {map} />
</div>
<div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">

2
src/UI/InputElement/Helpers/LocationInput.svelte
View file

@ -84,7 +84,7 @@
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} />
<MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} mapProperties={mla}/>
</div>
<div

9
src/UI/InputElement/InputHelpers.ts
View file

@ -60,6 +60,11 @@ export default class InputHelpers {
if (!mapProperties.zoom) {
mapProperties = { ...mapProperties, zoom: new UIEventSource<number>(zoom) }
}
if (!mapProperties.rasterLayer) {
/* mapProperties = {
...mapProperties, rasterLayer: properties?.mapProperties?.rasterLayer
}*/
}
return mapProperties
}
@ -72,7 +77,7 @@ export default class InputHelpers {
const searchKey: string = <string>args[0] ?? "name"
const searchFor: string = searchKey.split(";").map(k => inputHelperOptions.feature?.properties[k]?.toLowerCase())
.find(foundValue => !!foundValue) ?? ""
.find(foundValue => !!foundValue) ?? ""
let searchForValue: UIEventSource<string> = new UIEventSource(searchFor)
const options: any = args[1]
@ -120,7 +125,7 @@ export default class InputHelpers {
value,
searchText: searchForValue,
instanceOf,
notInstanceOf,
notInstanceOf
})
}
}

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

@ -60,6 +60,8 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
if(!MapLibreAdaptor.pmtilesInited){
maplibregl.addProtocol("pmtiles",new Protocol().tile);
MapLibreAdaptor.pmtilesInited = true
console.log("PM-tiles protocol added" +
"")
}
this._maplibreMap = maplibreMap

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

@ -1,13 +1,15 @@
<script lang="ts">
import { onDestroy, onMount } from "svelte"
import type { Map } from "maplibre-gl"
import type { Map, MapOptions } from "maplibre-gl"
import * as maplibre from "maplibre-gl"
import type { Readable, Writable } from "svelte/store"
import { get, writable } from "svelte/store"
import type { Writable } from "svelte/store"
import { get } from "svelte/store"
import { AvailableRasterLayers } from "../../Models/RasterLayers"
import { Utils } from "../../Utils"
import { ariaLabel } from "../../Utils/ariaLabel"
import Translations from "../i18n/Translations"
import type { MapProperties } from "../../Models/MapProperties"
import type { RasterLayerProperties } from "../../Models/RasterLayerProperties"
/**
* The 'MaplibreMap' maps various event sources onto MapLibre.
@ -17,40 +19,43 @@
* Beware: this map will _only_ be set by this component
* It should thus be treated as a 'store' by external parties
*/
export let map: Writable<Map>
export let map: Writable<Map> = undefined
export let mapProperties: MapProperties = undefined
export let interactive: boolean = true
let container: HTMLElement
export let center: { lng: number; lat: number } | Readable<{ lng: number; lat: number }> =
writable({ lng: 0, lat: 0 })
export let zoom: Readable<number> = writable(1)
const styleUrl = AvailableRasterLayers.maptilerDefaultLayer.properties.url
let _map: Map
onMount(() => {
let _center: { lng: number; lat: number }
if (typeof center["lng"] === "number" && typeof center["lat"] === "number") {
_center = <any>center
const { lon, lat } = mapProperties?.location?.data ?? { lon: 0, lat: 0 }
const rasterLayer: RasterLayerProperties = mapProperties?.rasterLayer?.data?.properties
let styleUrl: string
if (rasterLayer?.type === "vector") {
styleUrl = rasterLayer?.style ?? rasterLayer?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url
} else {
_center = get(<any>center)
const defaultLayer = AvailableRasterLayers.defaultBackgroundLayer.properties
styleUrl = defaultLayer.style ?? defaultLayer.url
}
_map = new maplibre.Map({
console.log("INiting mapLIbremap with style", styleUrl)
const options: MapOptions = {
container,
style: styleUrl,
zoom: get(zoom),
center: _center,
zoom: mapProperties?.zoom?.data ?? 1,
center: { lng: lon, lat },
maxZoom: 24,
interactive: true,
attributionControl: false,
})
attributionControl: false
}
_map = new maplibre.Map(options)
window.requestAnimationFrame(() => {
_map.resize()
})
_map.on("load", function () {
_map.on("load", function() {
_map.resize()
const canvas = _map.getCanvas()
if (interactive) {

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

@ -74,4 +74,4 @@
style="z-index: 100">
<StyleLoadingIndicator map={altmap} />
</div>
<MaplibreMap {interactive} map={altmap} />
<MaplibreMap {interactive} map={altmap} mapProperties={altproperties} />

6
src/UI/Map/RasterLayerHandler.ts
View file

@ -108,7 +108,11 @@ class SingleBackgroundHandler {
}
const background = this._targetLayer.properties
console.debug("Enabling", background.id)
let addLayerBeforeId = "aeroway_fill" // this is the first non-landuse item in the stylesheet, we add the raster layer before the roads but above the landuse
let addLayerBeforeId = "transit_pier" // this is the first non-landuse item in the stylesheet, we add the raster layer before the roads but above the landuse
if(!map.getLayer(addLayerBeforeId)){
console.warn("Layer", addLayerBeforeId,"not foundhttp://127.0.0.1:1234/theme.html?layout=cyclofix&z=14.8&lat=51.05282501324558&lon=3.720591622281745&layer-range=true")
addLayerBeforeId = undefined
}
if (background.category === "osmbasedmap" || background.category === "map") {
// The background layer is already an OSM-based map or another map, so we don't want anything from the baselayer
addLayerBeforeId = undefined

2
src/UI/Popup/AutoApplyButton.ts
View file

@ -110,7 +110,7 @@ class ApplyButton extends UIElement {
mla.allowZooming.setData(false)
mla.allowMoving.setData(false)
const previewMap = new SvelteUIElement(MaplibreMap, { map: mlmap }).SetClass("h-48")
const previewMap = new SvelteUIElement(MaplibreMap, { mapProperties: mla, map: mlmap }).SetClass("h-48")
const features = this.target_feature_ids.map((id) =>
this.state.indexedFeatures.featuresById.data.get(id)

2
src/UI/Popup/ImportButtons/WayImportFlow.svelte
View file

@ -48,7 +48,7 @@
<ImportFlow {importFlow} on:confirm={() => importFlow.onConfirm()}>
<div slot="map" class="relative">
<div class="h-32">
<MaplibreMap {map} />
<MaplibreMap {map} mapProperties={mla} />
</div>
<div class="absolute bottom-0">
<OpenBackgroundSelectorButton />

2
src/UI/Popup/MinimapViz.ts
View file

@ -109,7 +109,7 @@ export class MinimapViz implements SpecialVisualization {
state.layout.layers
)
return new SvelteUIElement(MaplibreMap, { interactive: false, map: mlmap })
return new SvelteUIElement(MaplibreMap, { interactive: false, map: mlmap, mapProperties: mla })
.SetClass("h-40 rounded")
.SetStyle("overflow: hidden; pointer-events: none;")
}

4
src/UI/ThemeViewGUI.svelte
View file

@ -149,7 +149,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.maptilerDefaultLayer.properties.name
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.defaultBackgroundLayer.properties.name
onDestroy(
rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name
@ -180,7 +180,7 @@
</script>
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
<MaplibreMap map={maplibremap} />
<MaplibreMap map={maplibremap} mapProperties={mapproperties} />
</div>
{#if $visualFeedback}

2
src/Utils/pngMapCreator.ts
View file

@ -67,7 +67,7 @@ export class PngMapCreator {
const newZoom = settings.zoom.data + Math.log2(pixelRatio) - 1
const mapElem = new MlMap({
container: div.id,
style: AvailableRasterLayers.maptilerDefaultLayer.properties.url,
style: AvailableRasterLayers.defaultBackgroundLayer.properties.url,
center: [l.lon, l.lat],
zoom: newZoom,
pixelRatio,

36
src/assets/global-raster-layers.json
View file

@ -23,6 +23,18 @@
"url": "https://github.com/ZeLonewolf/openstreetmap-americana/"
}
},
{
"name": "MapTiler",
"url": "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=GvoVAJgu46I5rZapJuAy",
"style": "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=GvoVAJgu46I5rZapJuAy",
"category": "osmbasedmap",
"id": "maptiler",
"type": "vector",
"attribution": {
"text": "Maptiler",
"url": "https://www.maptiler.com/copyright/"
}
},
{
"name": "MapTiler Carto",
"url": "https://api.maptiler.com/maps/openstreetmap/style.json?key=GvoVAJgu46I5rZapJuAy",
@ -168,7 +180,9 @@
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"style": "https://api.protomaps.com/styles/v2/white.json?key=2af8b969a9e8b692",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"id": "protomaps.white",
"name": "Protomaps White",
"type": "vector",
@ -181,7 +195,9 @@
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"style": "https://api.protomaps.com/styles/v2/light.json?key=2af8b969a9e8b692",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"id": "protomaps.light",
"name": "Protomaps Light",
"type": "vector",
@ -193,7 +209,9 @@
},
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"style": "https://api.protomaps.com/styles/v2/grayscale.json?key=2af8b969a9e8b692",
"id": "protomaps.grayscale",
"name": "Protomaps Grayscale",
@ -206,7 +224,9 @@
},
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"style": "https://api.protomaps.com/styles/v2/dark.json?key=2af8b969a9e8b692",
"id": "protomaps.dark",
"name": "Protomaps Dark",
@ -220,7 +240,9 @@
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"style": "https://api.protomaps.com/styles/v2/black.json?key=2af8b969a9e8b692",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"id": "protomaps.black",
"name": "Protomaps Black",
"type": "vector",
@ -233,7 +255,9 @@
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"style": "assets/sunny.json",
"connect-src": ["https://protomaps.github.io"],
"connect-src": [
"https://protomaps.github.io"
],
"id": "protomaps.sunny",
"name": "Protomaps Sunny",
"type": "vector",