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

Fix #1842; update code to fit maplibre 4.*

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-03-28 03:14:55 +01:00
parent d848171c3d
commit fbaaa2217e
1 changed files with 26 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/UI/Map/ShowDataLayer.ts
View file

@ -154,7 +154,7 @@ class PointRenderingLayer {
if (this._onClick) { if (this._onClick) {
const self = this const self = this
el.addEventListener("click", function (ev) { el.addEventListener("click", function(ev) {
ev.preventDefault() ev.preventDefault()
self._onClick(feature) self._onClick(feature)
// Workaround to signal the MapLibreAdaptor to ignore this click // Workaround to signal the MapLibreAdaptor to ignore this click
@ -200,7 +200,7 @@ class LineRenderingLayer {
"lineCap", "lineCap",
"offset", "offset",
"fill", "fill",
"fillColor", "fillColor"
] as const ] as const
private static readonly lineConfigKeysColor = ["color", "fillColor"] as const private static readonly lineConfigKeysColor = ["color", "fillColor"] as const
@ -249,16 +249,8 @@ class LineRenderingLayer {
imageAlongWay.map(async (img, i) => { imageAlongWay.map(async (img, i) => {
const imgId = img.then.replaceAll(/[/.-]/g, "_") const imgId = img.then.replaceAll(/[/.-]/g, "_")
if (map.getImage(imgId) === undefined) { if (map.getImage(imgId) === undefined) {
await new Promise<void>((resolve, reject) => { const loadedImage = await map.loadImage(img.then)
map.loadImage(img.then, (err, image) => { map.addImage(imgId, loadedImage.data)
if (err) {
console.error("Could not add symbol layer to line due to", err)
return
}
map.addImage(imgId, image)
resolve()
})
})
} }
const spec: AddLayerObject = { const spec: AddLayerObject = {
@ -272,8 +264,8 @@ class LineRenderingLayer {
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-image": imgId, "icon-image": imgId,
"icon-size": 0.055, "icon-size": 0.055
}, }
} }
const filter = img.if?.asMapboxExpression() const filter = img.if?.asMapboxExpression()
if (filter) { if (filter) {
@ -346,9 +338,9 @@ class LineRenderingLayer {
type: "geojson", type: "geojson",
data: { data: {
type: "FeatureCollection", type: "FeatureCollection",
features, features
}, },
promoteId: "id", promoteId: "id"
}) })
const linelayer = this._layername + "_line" const linelayer = this._layername + "_line"
map.addLayer({ map.addLayer({
@ -359,11 +351,11 @@ class LineRenderingLayer {
"line-color": ["feature-state", "color"], "line-color": ["feature-state", "color"],
"line-opacity": ["feature-state", "color-opacity"], "line-opacity": ["feature-state", "color-opacity"],
"line-width": ["feature-state", "width"], "line-width": ["feature-state", "width"],
"line-offset": ["feature-state", "offset"], "line-offset": ["feature-state", "offset"]
}, },
layout: { layout: {
"line-cap": "round", "line-cap": "round"
}, }
}) })
if (this._config.imageAlongWay) { if (this._config.imageAlongWay) {
@ -396,8 +388,8 @@ class LineRenderingLayer {
layout: {}, layout: {},
paint: { paint: {
"fill-color": ["feature-state", "fillColor"], "fill-color": ["feature-state", "fillColor"],
"fill-opacity": ["feature-state", "fillColor-opacity"], "fill-opacity": ["feature-state", "fillColor-opacity"]
}, }
}) })
if (this._onClick) { if (this._onClick) {
map.on("click", polylayer, (e) => { map.on("click", polylayer, (e) => {
@ -428,7 +420,7 @@ class LineRenderingLayer {
this.currentSourceData = features this.currentSourceData = features
src.setData({ src.setData({
type: "FeatureCollection", type: "FeatureCollection",
features: this.currentSourceData, features: this.currentSourceData
}) })
} }
} }
@ -512,14 +504,14 @@ export default class ShowDataLayer {
layers.filter((l) => l.source !== null).map((l) => new FilteredLayer(l)), layers.filter((l) => l.source !== null).map((l) => new FilteredLayer(l)),
features, features,
{ {
constructStore: (features, layer) => new SimpleFeatureSource(layer, features), constructStore: (features, layer) => new SimpleFeatureSource(layer, features)
} }
) )
perLayer.forEach((fs) => { perLayer.forEach((fs) => {
new ShowDataLayer(mlmap, { new ShowDataLayer(mlmap, {
layer: fs.layer.layerDef, layer: fs.layer.layerDef,
features: fs, features: fs,
...(options ?? {}), ...(options ?? {})
}) })
}) })
} }
@ -532,11 +524,12 @@ export default class ShowDataLayer {
return new ShowDataLayer(map, { return new ShowDataLayer(map, {
layer: ShowDataLayer.rangeLayer, layer: ShowDataLayer.rangeLayer,
features, features,
doShowLayer, doShowLayer
}) })
} }
public destruct() {} public destruct() {
}
private zoomToCurrentFeatures(map: MlMap) { private zoomToCurrentFeatures(map: MlMap) {
if (this._options.zoomToFeatures) { if (this._options.zoomToFeatures) {
@ -545,20 +538,21 @@ export default class ShowDataLayer {
map.resize() map.resize()
map.fitBounds(bbox.toLngLat(), { map.fitBounds(bbox.toLngLat(), {
padding: { top: 10, bottom: 10, left: 10, right: 10 }, padding: { top: 10, bottom: 10, left: 10, right: 10 },
animate: false, animate: false
}) })
} }
} }
private initDrawFeatures(map: MlMap) { private initDrawFeatures(map: MlMap) {
let { features, doShowLayer, fetchStore, selectedElement } = this._options let { features, doShowLayer, fetchStore, selectedElement } = this._options
const onClick = let onClick = this._options.onClick
this._options.onClick ?? if (!onClick && selectedElement) {
(this._options.layer.title === undefined onClick = (this._options.layer.title === undefined
? undefined ? undefined
: (feature: Feature) => { : (feature: Feature) => {
selectedElement?.setData(feature) selectedElement?.setData(feature)
}) })
}
if (this._options.drawLines !== false) { if (this._options.drawLines !== false) {
for (let i = 0; i < this._options.layer.lineRendering.length; i++) { for (let i = 0; i < this._options.layer.lineRendering.length; i++) {
const lineRenderingConfig = this._options.layer.lineRendering[i] const lineRenderingConfig = this._options.layer.lineRendering[i]