midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feature: allow to disable map rotation

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-07-18 01:26:04 +02:00
parent bc385259ed
commit 2cc943889d
6 changed files with 108 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/layers/usersettings/usersettings.json
View file

@ -221,6 +221,26 @@
}
]
},
{
"id": "fixate-north",
"question": {
"en": "Should north always be up?"
},
"mappings": [
{
"if": "mapcomplete-fixate-north=",
"then": {
"en": "Allow to rotate the map"
}
},
{
"if": "mapcomplete-fixate-north=yes",
"then": {
"en": "Always keep north pointing up"
}
}
]
},
{
"id": "mangrove-keys",
"render": {

12
src/Logic/State/UserRelatedState.ts
View file

@ -36,6 +36,7 @@ export default class UserRelatedState {
public readonly installedUserThemes: Store<string[]>
public readonly showAllQuestionsAtOnce: UIEventSource<boolean>
public readonly showTags: UIEventSource<"no" | undefined | "always" | "yes" | "full">
public readonly fixateNorth: UIEventSource<undefined | "yes">
public readonly homeLocation: FeatureSource
public readonly language: UIEventSource<string>
/**
@ -87,7 +88,7 @@ export default class UserRelatedState {
)
this.language = this.osmConnection.GetPreference("language")
this.showTags = <UIEventSource<any>>this.osmConnection.GetPreference("show_tags")
this.fixateNorth = <any>this.osmConnection.GetPreference("fixate-north")
this.mangroveIdentity = new MangroveIdentity(
this.osmConnection.GetLongPreference("identity", "mangrove")
)
@ -364,7 +365,14 @@ export default class UserRelatedState {
// Language is managed seperately
continue
}
this.osmConnection.GetPreference(key, undefined, { prefix: "" }).setData(tags[key])
if (tags[key + "-combined-0"]) {
// A combined value exists
this.osmConnection.GetLongPreference(key, "").setData(tags[key])
} else {
this.osmConnection
.GetPreference(key, undefined, { prefix: "" })
.setData(tags[key])
}
}
})

2
src/Models/MapProperties.ts
View file

@ -11,7 +11,7 @@ export interface MapProperties {
readonly rasterLayer: UIEventSource<RasterLayerPolygon | undefined>
readonly maxbounds: UIEventSource<undefined | BBox>
readonly allowMoving: UIEventSource<true | boolean>
readonly allowRotating: UIEventSource<true | boolean>
readonly lastClickLocation: Store<{ lon: number; lat: number }>
readonly allowZooming: UIEventSource<true | boolean>

35
src/Models/ThemeViewState.ts
View file

@ -2,7 +2,11 @@ import LayoutConfig from "./ThemeConfig/LayoutConfig"
import { SpecialVisualizationState } from "../UI/SpecialVisualization"
import { Changes } from "../Logic/Osm/Changes"
import { ImmutableStore, Store, UIEventSource } from "../Logic/UIEventSource"
import {FeatureSource, IndexedFeatureSource, WritableFeatureSource,} from "../Logic/FeatureSource/FeatureSource"
import {
FeatureSource,
IndexedFeatureSource,
WritableFeatureSource,
} from "../Logic/FeatureSource/FeatureSource"
import { OsmConnection } from "../Logic/Osm/OsmConnection"
import { ExportableMap, MapProperties } from "./MapProperties"
import LayerState from "../Logic/State/LayerState"
@ -46,8 +50,10 @@ import BackgroundLayerResetter from "../Logic/Actors/BackgroundLayerResetter"
import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveFeatureSourceToLocalStorage"
import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
import ThemeViewStateHashActor from "../Logic/Web/ThemeViewStateHashActor"
import NoElementsInViewDetector, {FeatureViewState,} from "../Logic/Actors/NoElementsInViewDetector"
import FilteredLayer from "./FilteredLayer";
import NoElementsInViewDetector, {
FeatureViewState,
} from "../Logic/Actors/NoElementsInViewDetector"
import FilteredLayer from "./FilteredLayer"
/**
*
@ -69,6 +75,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
readonly osmConnection: OsmConnection
readonly selectedElement: UIEventSource<Feature>
readonly selectedElementAndLayer: Store<{ feature: Feature; layer: LayerConfig }>
readonly mapProperties: MapProperties & ExportableMap
readonly osmObjectDownloader: OsmObjectDownloader
@ -133,8 +140,23 @@ export default class ThemeViewState implements SpecialVisualizationState {
layout,
this.featureSwitches
)
this.userRelatedState.fixateNorth.addCallbackAndRunD((fixated) => {
this.mapProperties.allowRotating.setData(fixated !== "yes")
})
this.selectedElement = new UIEventSource<Feature | undefined>(undefined, "Selected element")
this.selectedLayer = new UIEventSource<LayerConfig>(undefined, "Selected layer")
this.selectedElementAndLayer = this.selectedElement.mapD(
(feature) => {
const layer = this.selectedLayer.data
if (!layer) {
return undefined
}
return { layer, feature }
},
[this.selectedLayer]
)
this.geolocation = new GeoLocationHandler(
geolocationState,
this.selectedElement,
@ -521,12 +543,13 @@ export default class ThemeViewState implements SpecialVisualizationState {
})
}
const rangeFLayer: FilteredLayer = this.layerState.filteredLayers
.get("range")
const rangeFLayer: FilteredLayer = this.layerState.filteredLayers.get("range")
const rangeIsDisplayed = rangeFLayer?.isDisplayed
if (!QueryParameters.wasInitialized(FilteredLayer.queryParameterKey(rangeFLayer.layerDef))) {
if (
!QueryParameters.wasInitialized(FilteredLayer.queryParameterKey(rangeFLayer.layerDef))
) {
rangeIsDisplayed?.syncWith(this.featureSwitches.featureSwitchIsTesting, true)
}

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

@ -35,6 +35,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
readonly rasterLayer: UIEventSource<RasterLayerPolygon | undefined>
readonly maxbounds: UIEventSource<BBox | undefined>
readonly allowMoving: UIEventSource<true | boolean | undefined>
readonly allowRotating: UIEventSource<true | boolean | undefined>
readonly allowZooming: UIEventSource<true | boolean | undefined>
readonly lastClickLocation: Store<undefined | { lon: number; lat: number }>
readonly minzoom: UIEventSource<number>
@ -69,6 +70,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
})
this.maxbounds = state?.maxbounds ?? new UIEventSource(undefined)
this.allowMoving = state?.allowMoving ?? new UIEventSource(true)
this.allowRotating = state?.allowRotating ?? new UIEventSource<boolean>(true)
this.allowZooming = state?.allowZooming ?? new UIEventSource(true)
this.bounds = state?.bounds ?? new UIEventSource(undefined)
this.rasterLayer =
@ -95,6 +97,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
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)
@ -105,6 +108,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
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)
@ -134,6 +138,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
this.zoom.addCallbackAndRunD((z) => self.SetZoom(z))
this.maxbounds.addCallbackAndRun((bbox) => self.setMaxBounds(bbox))
this.allowMoving.addCallbackAndRun((allowMoving) => self.setAllowMoving(allowMoving))
this.allowRotating.addCallbackAndRunD((allowRotating) =>
self.setAllowRotating(allowRotating)
)
this.allowZooming.addCallbackAndRun((allowZooming) => self.setAllowZooming(allowZooming))
this.bounds.addCallbackAndRunD((bounds) => self.setBounds(bounds))
}
@ -181,13 +188,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
drawOn.width = Math.ceil(drawOn.width * dpiFactor)
drawOn.height = Math.ceil(drawOn.height * dpiFactor)
ctx.scale(dpiFactor, dpiFactor)
console.log(
"Resizing canvas with setDPI:",
drawOn.width,
drawOn.height,
drawOn.style.width,
drawOn.style.height
)
}
/**
@ -228,27 +228,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
drawOn.width = map.getCanvas().width
drawOn.height = map.getCanvas().height
console.log("Canvas size:", drawOn.width, drawOn.height)
const ctx = drawOn.getContext("2d")
// Set up CSS size.
MapLibreAdaptor.setDpi(drawOn, ctx, dpiFactor / map.getPixelRatio())
await this.exportBackgroundOnCanvas(ctx)
console.log("Getting markers")
// MapLibreAdaptor.setDpi(drawOn, ctx, 1)
const markers = await this.drawMarkers(dpiFactor)
console.log(
"Drawing markers (" +
markers.width +
"*" +
markers.height +
") onto drawOn (" +
drawOn.width +
"*" +
drawOn.height +
")"
)
ctx.drawImage(markers, 0, 0, drawOn.width, drawOn.height)
ctx.scale(dpiFactor, dpiFactor)
this._maplibreMap.data?.resize()
@ -288,14 +275,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
}
const width = map.getCanvas().clientWidth
const height = map.getCanvas().clientHeight
console.log(
"Canvas size markers:",
map.getCanvas().width,
map.getCanvas().height,
"canvasClientRect:",
width,
height
)
map.getCanvas().style.display = "none"
const img = await htmltoimage.toCanvas(map.getCanvasContainer(), {
pixelRatio: dpiFactor,
@ -394,7 +373,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
return
}
const background: RasterLayerProperties = this.rasterLayer?.data?.properties
console.log("Setting background to", background)
if (!background) {
console.error(
"Attempting to 'setBackground', but the background is",
@ -416,7 +394,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
}
if (background.type === "vector") {
console.log("Background layer is vector", background.id)
this.removeCurrentLayer(map)
map.setStyle(background.url)
return
@ -473,6 +450,21 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
}
}
private setAllowRotating(allow: true | boolean | undefined) {
const map = this._maplibreMap.data
if (!map) {
return
}
console.log("Rotation allowed:", allow)
if (allow === false) {
map.rotateTo(0, { duration: 0 })
map.setPitch(0)
map.dragRotate.disable()
} else {
map.dragRotate.enable()
}
}
private setAllowMoving(allow: true | boolean | undefined) {
const map = this._maplibreMap.data
if (!map) {
@ -487,6 +479,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
map[id].enable()
}
}
this.setAllowRotating(this.allowRotating.data)
}
private setMinzoom(minzoom: number) {

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

@ -23,7 +23,6 @@
export let attribution = false
export let center: {lng: number, lat: number} | Readable<{ lng: number; lat: number }> = writable({lng: 0, lat: 0})
console.trace("Center is", center)
export let zoom: Readable<number> = writable(1)
const styleUrl = AvailableRasterLayers.maplibre.properties.url