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

Chore: refactoring

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-02-07 01:09:17 +01:00
parent 12869321fd
commit f1f8b75964
2 changed files with 64 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,13 +25,13 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
"dragRotate",
"dragPan",
"keyboard",
"touchZoomRotate",
"touchZoomRotate"
]
private static maplibre_zoom_handlers = [
"scrollZoom",
"boxZoom",
"doubleClickZoom",
"touchZoomRotate",
"touchZoomRotate"
]
readonly location: UIEventSource<{ lon: number; lat: number }>
private readonly isFlying = new UIEventSource(false)
@ -45,14 +45,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
readonly lastClickLocation: Store<
| undefined
| {
lon: number
lat: number
mode: "left" | "right" | "middle"
/**
* The nearest feature from a MapComplete layer
*/
nearestFeature?: Feature
}
lon: number
lat: number
mode: "left" | "right" | "middle"
/**
* The nearest feature from a MapComplete layer
*/
nearestFeature?: Feature
}
>
readonly minzoom: UIEventSource<number>
readonly maxzoom: UIEventSource<number>
@ -143,7 +143,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
const features = map
.queryRenderedFeatures([
[point.x - buffer, point.y - buffer],
[point.x + buffer, point.y + buffer],
[point.x + buffer, point.y + buffer]
])
.filter((f) => f.source.startsWith("mapcomplete_"))
if (features.length === 1) {
@ -172,38 +172,28 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
lastClickLocation.setData({ lon, lat, mode, nearestFeature })
}
const syncStores = () => {
this.MoveMapToCurrentLoc(this.location.data)
this.SetZoom(this.zoom.data)
this.setMaxBounds(this.maxbounds.data)
this.setAllowMoving(this.allowMoving.data)
this.setAllowRotating(this.allowRotating.data)
this.setAllowZooming(this.allowZooming.data)
this.setMinzoom(this.minzoom.data)
this.setMaxzoom(this.maxzoom.data)
this.setBounds(this.bounds.data)
this.SetRotation(this.rotation.data)
this.setScale(this.showScale.data)
this.setTerrain(this.useTerrain.data)
this.updateStores(true)
}
maplibreMap.addCallbackAndRunD((map) => {
map.on("load", () => {
console.log("Setting projection")
map.setProjection({
type: "globe" // Set projection to globe
})
self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data)
self.setMaxBounds(self.maxbounds.data)
self.setAllowMoving(self.allowMoving.data)
self.setAllowRotating(self.allowRotating.data)
self.setAllowZooming(self.allowZooming.data)
self.setMinzoom(self.minzoom.data)
self.setMaxzoom(self.maxzoom.data)
self.setBounds(self.bounds.data)
self.setTerrain(self.useTerrain.data)
self.setScale(self.showScale.data)
this.updateStores(true)
syncStores()
})
self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data)
self.setMaxBounds(self.maxbounds.data)
self.setAllowMoving(self.allowMoving.data)
self.setAllowRotating(self.allowRotating.data)
self.setAllowZooming(self.allowZooming.data)
self.setMinzoom(self.minzoom.data)
self.setMaxzoom(self.maxzoom.data)
self.setBounds(self.bounds.data)
self.SetRotation(self.rotation.data)
self.setTerrain(self.useTerrain.data)
self.setScale(self.showScale.data)
this.updateStores(true)
syncStores()
map.on("movestart", () => {
this.isFlying.setData(true)
})
@ -224,9 +214,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
map.on("dblclick", (e) => {
handleClick(e, "left")
})
map.on("touchend", (e) => {
const touchEvent = e.originalEvent
})
map.on("rotateend", (_) => {
this.updateStores()
})
@ -265,22 +253,22 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
})
this.location.addCallbackAndRunD((loc) => {
self.MoveMapToCurrentLoc(loc)
this.MoveMapToCurrentLoc(loc)
})
this.zoom.addCallbackAndRunD((z) => self.SetZoom(z))
this.maxbounds.addCallbackAndRun((bbox) => self.setMaxBounds(bbox))
this.rotation.addCallbackAndRunD((bearing) => self.SetRotation(bearing))
this.zoom.addCallbackAndRunD((z) => this.SetZoom(z))
this.maxbounds.addCallbackAndRun((bbox) => this.setMaxBounds(bbox))
this.rotation.addCallbackAndRunD((bearing) => this.SetRotation(bearing))
this.allowMoving.addCallbackAndRun((allowMoving) => {
self.setAllowMoving(allowMoving)
self.pingKeycodeEvent(allowMoving ? "unlocked" : "locked")
this.setAllowMoving(allowMoving)
this.pingKeycodeEvent(allowMoving ? "unlocked" : "locked")
})
this.allowRotating.addCallbackAndRunD((allowRotating) =>
self.setAllowRotating(allowRotating)
this.setAllowRotating(allowRotating)
)
this.allowZooming.addCallbackAndRun((allowZooming) => self.setAllowZooming(allowZooming))
this.bounds.addCallbackAndRunD((bounds) => self.setBounds(bounds))
this.useTerrain?.addCallbackAndRun((useTerrain) => self.setTerrain(useTerrain))
this.showScale?.addCallbackAndRun((showScale) => self.setScale(showScale))
this.allowZooming.addCallbackAndRun((allowZooming) => this.setAllowZooming(allowZooming))
this.bounds.addCallbackAndRunD((bounds) => this.setBounds(bounds))
this.useTerrain?.addCallbackAndRun((useTerrain) => this.setTerrain(useTerrain))
this.showScale?.addCallbackAndRun((showScale) => this.setScale(showScale))
}
/**
@ -295,9 +283,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
return {
map: mlmap,
ui: new SvelteUIElement(MaplibreMap, {
map: mlmap,
map: mlmap
}),
mapproperties: new MapLibreAdaptor(mlmap),
mapproperties: new MapLibreAdaptor(mlmap)
}
}
@ -365,7 +353,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
) {
const event = {
date: new Date(),
key: key,
key: key
}
for (let i = 0; i < this._onKeyNavigation.length; i++) {
@ -434,7 +422,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
element.style.transform = ""
const offset = style.match(/translate\(([-0-9]+)%, ?([-0-9]+)%\)/)
let labels = <HTMLElement[]>Array.from(element.getElementsByClassName("marker-label"))
const labels = <HTMLElement[]>Array.from(element.getElementsByClassName("marker-label"))
const origLabelTransforms = labels.map((l) => l.style.transform)
// We save the original width (`w`) and height (`h`) in order to restore them later on
const w = element.style.width
@ -554,7 +542,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
const bounds = map.getBounds()
const bbox = new BBox([
[bounds.getEast(), bounds.getNorth()],
[bounds.getWest(), bounds.getSouth()],
[bounds.getWest(), bounds.getSouth()]
])
if (this.bounds.data === undefined || !isSetup) {
this.bounds.setData(bbox)
@ -748,14 +736,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
type: "raster-dem",
url:
"https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=" +
Constants.maptilerApiKey,
Constants.maptilerApiKey
})
try {
while (!map?.isStyleLoaded()) {
await Utils.waitFor(250)
}
map.setTerrain({
source: id,
source: id
})
} catch (e) {
console.error(e)
@ -780,7 +768,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
if (this.scaleControl === undefined) {
this.scaleControl = new ScaleControl({
maxWidth: 100,
unit: "metric",
unit: "metric"
})
}
if (!map.hasControl(this.scaleControl)) {
@ -793,7 +781,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
window.requestAnimationFrame(() => {
this._maplibreMap.data?.flyTo({
zoom,
center: [lon, lat],
center: [lon, lat]
})
})
}

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

@ -1,5 +1,5 @@
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import type { AddLayerObject, Map as MlMap } from "maplibre-gl"
import type { AddLayerObject, Alignment, Map as MlMap } from "maplibre-gl"
import { GeoJSONSource, Marker } from "maplibre-gl"
import { ShowDataLayerOptions } from "./ShowDataLayerOptions"
import { GeoOperations } from "../../Logic/GeoOperations"
@ -16,6 +16,7 @@ import PerLayerFeatureSourceSplitter from "../../Logic/FeatureSource/PerLayerFea
import FilteredLayer from "../../Models/FilteredLayer"
import SimpleFeatureSource from "../../Logic/FeatureSource/Sources/SimpleFeatureSource"
import { TagsFilter } from "../../Logic/Tags/TagsFilter"
import { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson"
class PointRenderingLayer {
private readonly _config: PointRenderingConfig
@ -47,19 +48,18 @@ class PointRenderingLayer {
this._fetchStore = fetchStore
this._onClick = onClick
this._selectedElement = selectedElement
const self = this
if (!features?.features) {
throw (
"Could not setup a PointRenderingLayer; features?.features is undefined/null. The layer is " +
layer.id
)
}
features.features?.addCallbackAndRunD((features) => self.updateFeatures(features))
features.features?.addCallbackAndRunD((features) => this.updateFeatures(features))
visibility?.addCallbackAndRunD((visible) => {
if (visible === true && self._dirty) {
self.updateFeatures(features.features.data)
if (visible === true && this._dirty) {
this.updateFeatures(features.features.data)
}
self.setVisibility(visible)
this.setVisibility(visible)
})
selectedElement?.addCallbackAndRun((selected) => {
this._markedAsSelected.forEach((el) => el.classList.remove("selected"))
@ -123,7 +123,7 @@ class PointRenderingLayer {
}
const loc = GeoOperations.featureToCoordinateWithRenderingType(
<any>feature,
feature,
location
)
if (loc === undefined) {
@ -199,10 +199,10 @@ class PointRenderingLayer {
.addTo(this._map)
store
.map((tags) => this._config.pitchAlignment.GetRenderValue(tags).Subs(tags).txt)
.addCallbackAndRun((pitchAligment) => marker.setPitchAlignment(<any>pitchAligment))
.addCallbackAndRun((pitchAligment) => marker.setPitchAlignment(<Alignment>pitchAligment))
store
.map((tags) => this._config.rotationAlignment.GetRenderValue(tags).Subs(tags).txt)
.addCallbackAndRun((pitchAligment) => marker.setRotationAlignment(<any>pitchAligment))
.addCallbackAndRun((pitchAligment) => marker.setRotationAlignment(<Alignment>pitchAligment))
if (feature.geometry.type === "Point") {
// When the tags get 'pinged', check that the location didn't change
@ -261,10 +261,9 @@ class LineRenderingLayer {
this._visibility = visibility
this._fetchStore = fetchStore
this._onClick = onClick
const self = this
features.features.addCallbackAndRunD(() => self.update(features.features))
features.features.addCallbackAndRunD(() => this.update(features.features))
map.on("styledata", () => self.update(features.features))
map.on("styledata", () => this.update(features.features))
}
public destruct(): void {
@ -324,7 +323,7 @@ class LineRenderingLayer {
calculatedProps.fillColor = calculatedProps.fillColor ?? calculatedProps.color
for (const key of LineRenderingLayer.lineConfigKeysColor) {
let v = <string>calculatedProps[key]
const v = <string>calculatedProps[key]
if (v === undefined) {
continue
}
@ -353,14 +352,6 @@ class LineRenderingLayer {
// As such, we only now read the features from the featureSource and compare with the previously set data
const features = featureSource.data
const src = <GeoJSONSource>map.getSource(this._layername)
if (
src !== undefined &&
this.currentSourceData === features &&
src._data === <any>features
) {
// Already up to date
return
}
{
// Add source to the map or update the feature source
if (src === undefined) {
@ -516,7 +507,7 @@ class LineRenderingLayer {
}
export default class ShowDataLayer {
public static rangeLayer = new LayerConfig(<any>range_layer, "ShowDataLayer.ts:range.json")
public static rangeLayer = new LayerConfig(<LayerConfigJson>range_layer, "ShowDataLayer.ts:range.json")
private readonly _options: ShowDataLayerOptions & {
layer: LayerConfig
drawMarkers?: true | boolean