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

UX: fix zooming of minimaps, fix #1892

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-04-24 00:28:29 +02:00
parent 3968a1e841
commit e9b7df6d2d
2 changed files with 62 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,13 +17,13 @@ export class MinimapViz implements SpecialVisualization {
{
doc: "The (maximum) zoomlevel: the target zoomlevel after fitting the entire feature. The minimap will fit the entire feature, then zoom out to this zoom level. The higher, the more zoomed in with 1 being the entire world and 19 being really close",
name: "zoomlevel",
defaultValue: "18",
defaultValue: "18"
},
{
doc: "(Matches all resting arguments) This argument should be the key of a property of the feature. The corresponding value is interpreted as either the id or the a list of ID's. The features with these ID's will be shown on this minimap. (Note: if the key is 'id', list interpration is disabled)",
name: "idKey",
defaultValue: "id",
},
defaultValue: "id"
}
]
example: "`{minimap()}`, `{minimap(17, id, _list_of_embedded_feature_ids_calculated_by_calculated_tag):height:10rem; border: 2px solid black}`"
@ -78,41 +78,36 @@ export class MinimapViz implements SpecialVisualization {
)
const mlmap = new UIEventSource(undefined)
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
const mla = new MapLibreAdaptor(mlmap, {
rasterLayer: state.mapProperties.rasterLayer,
zoom: new UIEventSource<number>(18)
})
mla.maxzoom.setData(17)
let zoom = 18
mla.allowMoving.setData(false)
mla.allowZooming.setData(false)
mla.location.setData({lon, lat})
if (args[0]) {
const parsed = Number(args[0])
if (!isNaN(parsed) && parsed > 0 && parsed < 25) {
zoom = parsed
mla.zoom.setData(parsed)
}
}
featuresToShow.addCallbackAndRunD((features) => {
if (features.length === 0) {
return
}
const bboxGeojson = GeoOperations.bbox({ features, type: "FeatureCollection" })
const [lon, lat] = GeoOperations.centerpointCoordinates(bboxGeojson)
mla.bounds.setData(BBox.get(bboxGeojson))
mla.location.setData({ lon, lat })
})
mla.zoom.setData(zoom)
mla.allowMoving.setData(false)
mla.allowZooming.setData(false)
mlmap.addCallbackAndRun(map => console.log("Map for minimap vis is now", map))
ShowDataLayer.showMultipleLayers(
mlmap,
new StaticFeatureSource(featuresToShow),
state.layout.layers
state.layout.layers,
{zoomToFeatures: true}
)
return new SvelteUIElement(MaplibreMap, {
interactive: false,
map: mlmap,
mapProperties: mla,
mapProperties: mla
})
.SetClass("h-40 rounded")
.SetStyle("overflow: hidden; pointer-events: none;")