diff --git a/Models/ThemeConfig/LayoutConfig.ts b/Models/ThemeConfig/LayoutConfig.ts index 801a69811..705d21dfa 100644 --- a/Models/ThemeConfig/LayoutConfig.ts +++ b/Models/ThemeConfig/LayoutConfig.ts @@ -21,7 +21,7 @@ export default class LayoutConfig { public readonly startZoom: number public readonly startLat: number public readonly startLon: number - public readonly widenFactor: number + public widenFactor: number public readonly defaultBackgroundId?: string public layers: LayerConfig[] public tileLayerSources: TilesourceConfig[] diff --git a/Utils/pngMapCreator.ts b/Utils/pngMapCreator.ts index 8a81c0b39..791c3c7d6 100644 --- a/Utils/pngMapCreator.ts +++ b/Utils/pngMapCreator.ts @@ -5,6 +5,8 @@ import Loc from "../Models/Loc"; import ShowDataLayer from "../UI/ShowDataLayer/ShowDataLayer"; import {BBox} from "../Logic/BBox"; import Minimap from "../UI/Base/Minimap"; +import AvailableBaseLayers from "../Logic/Actors/AvailableBaseLayers"; +import AvailableBaseLayersImplementation from "../Logic/Actors/AvailableBaseLayersImplementation"; export class PngMapCreator { private readonly _state: FeaturePipelineState; @@ -29,10 +31,11 @@ export class PngMapCreator { private async createAndLoadMinimap(): Promise { const state = this._state; const options = this._options + const baselayer = AvailableBaseLayers.layerOverview.find(bl => bl.id === state.layoutToUse.defaultBackgroundId) ?? AvailableBaseLayers.osmCarto return new Promise(resolve => { const minimap = Minimap.createMiniMap({ location: new UIEventSource(state.locationControl.data), // We remove the link between the old and the new UI-event source as moving the map while the export is running fucks up the screenshot - background: state.backgroundLayer, + background: new UIEventSource(baselayer), allowMoving: false, onFullyLoaded: (_) => window.setTimeout(() => { @@ -63,14 +66,15 @@ export class PngMapCreator { return new Promise(resolve => { // Next: we prepare the features. Only fully contained features are shown minimap.leafletMap.addCallbackAndRunD(async (leaflet) => { - const bounds = BBox.fromLeafletBounds(leaflet.getBounds().pad(0.2)) + const bounds = BBox.fromLeafletBounds(leaflet.getBounds().pad(0.1).pad(-state.layoutToUse.widenFactor)) // Ping the featurepipeline to download what is needed state.currentBounds.setData(bounds) if(state.featurePipeline.runningQuery.data){ // A query is running! // Let's wait for it to complete console.log("Waiting for the query to complete") - await state.featurePipeline.runningQuery.AsPromise() + await state.featurePipeline.runningQuery.AsPromise(isRunning => !isRunning) + console.log("Query has completeted!") } window.setTimeout(() => { diff --git a/Utils/svgToPdf.ts b/Utils/svgToPdf.ts index 6901fb85b..39ffa7265 100644 --- a/Utils/svgToPdf.ts +++ b/Utils/svgToPdf.ts @@ -528,26 +528,28 @@ export class SvgToPdf { svgImage.setAttribute("height", "" + height) let layout = AllKnownLayouts.allKnownLayouts.get(params["theme"]) - if (layout === undefined) { console.error("Could not show map with parameters", params) throw "Theme not found:" + params["theme"] + ". Use theme: to define which theme to use. " } + layout.widenFactor = 0 const zoom = Number(params["zoom"] ?? params["z"] ?? 14); for (const l of layout.layers) { l.minzoom = zoom } const state = new FeaturePipelineState(layout) - state.backgroundLayer.addCallbackAndRunD(l => console.log("baselayer is",l.id)) + state.backgroundLayer.addCallbackAndRunD(l => console.log("baselayer is", l.id)) state.locationControl.setData({ zoom, lat: Number(params["lat"] ?? 51.05016), lon: Number(params["lon"] ?? 3.717842) }) - if (params["layers"] === "none") { - const fl = state.filteredLayers.data - for (const filteredLayer of fl) { + const fl = state.filteredLayers.data + for (const filteredLayer of fl) { + if (params["layers"] === "none") { + filteredLayer.isDisplayed.setData(false) + }else if(filteredLayer.layerDef.id.startsWith("note_import")){ filteredLayer.isDisplayed.setData(false) } } @@ -555,10 +557,10 @@ export class SvgToPdf { for (const paramsKey in params) { if (paramsKey.startsWith("layer-")) { const layerName = paramsKey.substring("layer-".length) - const isDisplayed = params[paramsKey].toLowerCase().trim() === "true"; + const isDisplayed = params[paramsKey].toLowerCase().trim() === "true"; console.log("Setting display status of ", layerName, "to", isDisplayed) state.filteredLayers.data.find(l => l.layerDef.id === layerName).isDisplayed.setData( - isDisplayed + isDisplayed ) } } diff --git a/assets/templates/MapComplete-flyer.back.svg b/assets/templates/MapComplete-flyer.back.svg new file mode 100644 index 000000000..96c241711 --- /dev/null +++ b/assets/templates/MapComplete-flyer.back.svg @@ -0,0 +1,395 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + $map(theme:aed,z:14,lat:51.2098,lon:3.2284) + + + $flyer.toerisme_vlaanderen + $map(theme:toerisme_vlaanderen,layer-bench:false,layers:none, layer-charging_station:true,lat:51.02403,lon:3.695483) + $map(theme:cyclofix,z:14,lat:51.05016,lon:3.717842,layers:none,layer-bike_repair_station:true,layer-drinking_water:true,layer-bike_cafe:true,layer-bicycle_tube_vending_machine: true) + $map(theme:benches,z:14,lat:51.2098,lon:3.2284) + $map(theme:waste,z:14,lat:51.2098,lon:3.2284) + + + + + + $flyer.title + + + diff --git a/test.ts b/test.ts index 9f73c6bb9..e3b2c042a 100644 --- a/test.ts +++ b/test.ts @@ -11,9 +11,6 @@ import {SvgToPdf} from "./Utils/svgToPdf"; MinimapImplementation.initialize() async function main() { - const layoutToUse = AllKnownLayouts.allKnownLayouts.get("cyclofix") - - const svg = await Utils.download(window.location.protocol + "//" + window.location.host + "/assets/templates/MapComplete-flyer.svg") const svgBack = await Utils.download(window.location.protocol + "//" + window.location.host + "/assets/templates/MapComplete-flyer.back.svg") Locale.language.setData("en")