UI(basemap): add language support: labels now show in the selected language

This commit is contained in:
Pieter Vander Vennet 2025-02-24 16:49:40 +01:00
parent 5dc6d82cd0
commit 2a603852a6
7 changed files with 5458 additions and 45 deletions

View file

@ -4,9 +4,12 @@ import { RasterLayerPolygon } from "../../Models/RasterLayers"
import { RasterLayerProperties } from "../../Models/RasterLayerProperties"
import { Utils } from "../../Utils"
import { VectorSourceSpecification } from "@maplibre/maplibre-gl-style-spec"
import { ProtomapsLanguageSupport } from "./ProtomapsLanguageSupport"
class SingleBackgroundHandler {
// Value between 0 and 1.0
/**
* Current opacity of this layer, Value between 0 and 1.0
* */
public opacity = new UIEventSource<number>(0.0)
private _map: Store<MLMap>
private _background: UIEventSource<RasterLayerPolygon | undefined>
@ -18,15 +21,18 @@ class SingleBackgroundHandler {
*/
public static readonly DEACTIVATE_AFTER = 60
private fadeStep = 0.1
private _languageSupport: ProtomapsLanguageSupport
constructor(
map: Store<MLMap>,
targetLayer: RasterLayerPolygon,
background: UIEventSource<RasterLayerPolygon | undefined>
background: UIEventSource<RasterLayerPolygon | undefined>,
languageSupport: ProtomapsLanguageSupport
) {
this._targetLayer = targetLayer
this._map = map
this._background = background
this._languageSupport = languageSupport
background.addCallback(async () => {
await this.update()
@ -64,7 +70,7 @@ class SingleBackgroundHandler {
map.removeLayer(<string>this._targetLayer.properties.id)
}
} catch (e) {
console.warn("Could not (try to) remove the raster layer", e)
// Probably already removed
}
}
@ -95,7 +101,7 @@ class SingleBackgroundHandler {
private async enable() {
let ttl = 15
await this.awaitStyleIsLoaded()
while (!this.tryEnable() && ttl > 0) {
while (this._background.data.properties.id === this._targetLayer.properties.id && !this.tryEnable() && ttl > 0) {
ttl--
await Utils.waitFor(250)
}
@ -137,6 +143,11 @@ class SingleBackgroundHandler {
if (background.type === "vector") {
const styleToSet = background.style ?? background.url
map.setStyle(styleToSet)
this.awaitStyleIsLoaded().then(() => {
console.log("UPDATING")
this._languageSupport.update()
})
} else {
map.addLayer(
{
@ -150,6 +161,9 @@ class SingleBackgroundHandler {
addLayerBeforeId
)
this.opacity.addCallbackAndRun((o) => {
if (map.getStyle() === undefined || map.getLayer(background.id) === undefined) {
return true
}
try {
map.setPaintProperty(background.id, "raster-opacity", o)
} catch (e) {
@ -166,27 +180,43 @@ class SingleBackgroundHandler {
Stores.Chronic(
8,
() => this.opacity.data > 0 && this._deactivationTime !== undefined
).addCallback(() => this.opacity.setData(Math.max(0, this.opacity.data - this.fadeStep)))
).addCallback(() => {
try {
this.opacity.setData(Math.max(0, this.opacity.data - this.fadeStep))
} catch (e) {
// The layer probably got pruned; we just unregister
return true
}
})
}
private fadeIn() {
Stores.Chronic(
8,
() => this.opacity.data < 1.0 && this._deactivationTime === undefined
).addCallback(() => this.opacity.setData(Math.min(1.0, this.opacity.data + this.fadeStep)))
).addCallback(() => {
try {
this.opacity.setData(Math.min(1.0, this.opacity.data + this.fadeStep))
} catch (e) {
// The layer probably got pruned; we just unregister
return true
}
})
}
}
export default class RasterLayerHandler {
private _singleLayerHandlers: Record<string, SingleBackgroundHandler> = {}
private _languageSupport: ProtomapsLanguageSupport
constructor(map: Store<MLMap>, background: UIEventSource<RasterLayerPolygon | undefined>) {
background.addCallbackAndRunD((l) => {
const key = l.properties.id
if (!this._singleLayerHandlers[key]) {
this._singleLayerHandlers[key] = new SingleBackgroundHandler(map, l, background)
this._singleLayerHandlers[key] = new SingleBackgroundHandler(map, l, background, this._languageSupport)
}
})
this._languageSupport = new ProtomapsLanguageSupport(map)
}
public static prepareSource(