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

More work on the flyer

Browse source
This commit is contained in:
pietervdvn 2022-09-13 00:42:29 +02:00
parent c4404d68f9
commit d186b207de
5 changed files with 412 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Models/ThemeConfig/LayoutConfig.ts
View file

@ -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[]

10
Utils/pngMapCreator.ts
View file

@ -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<MinimapImplementation> {
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<Loc>(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<string | Blob>(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(() => {

16
Utils/svgToPdf.ts
View file

@ -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
)
}
}

395
assets/templates/MapComplete-flyer.back.svg Normal file
View file

@ -0,0 +1,395 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="297mm"
height="210mm"
viewBox="0 0 297 210"
version="1.1"
id="svg5"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="MapComplete-flyer.back.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffe1d9"
bordercolor="#111111"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="1"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="1.0655694"
inkscape:cx="790.65709"
inkscape:cy="236.49328"
inkscape:window-width="1920"
inkscape:window-height="1007"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer2"
inkscape:snap-global="false">
<sodipodi:guide
position="98.990966,200.95191"
orientation="1,0"
id="guide824" />
<sodipodi:guide
position="197.9831,159.95064"
orientation="1,0"
id="guide826" />
<sodipodi:guide
position="86.1934,210.06914"
orientation="0,-1"
id="guide160707" />
<sodipodi:guide
position="78.427414,189.67053"
orientation="0,-1"
id="guide160709" />
<sodipodi:guide
position="0.0075135965,211.02194"
orientation="1,0"
id="guide160711" />
</sodipodi:namedview>
<defs
id="defs2">
<rect
x="28.759503"
y="661.40117"
width="336.0073"
height="131.84647"
id="rect13433" />
<rect
x="343.40695"
y="500.0196"
width="84.364494"
height="237.72838"
id="rect10255" />
<rect
x="95.317586"
y="187.03827"
width="248.16225"
height="252.69233"
id="rect6693" />
<rect
x="74.304079"
y="174.49336"
width="441.66818"
height="518.87427"
id="rect4913" />
<rect
x="381.53312"
y="90.109134"
width="359.30269"
height="272.24152"
id="rect171375" />
<rect
x="8.7294125"
y="5.7021616"
width="335.82774"
height="63.733595"
id="rect135032" />
<rect
x="1.194874"
y="0.64196106"
width="372.94421"
height="73.665799"
id="rect81706" />
<rect
x="11.104974"
y="79.878933"
width="321.37852"
height="83.989392"
id="rect61742" />
<rect
x="185.64819"
y="566.90703"
width="5.2949575"
height="50.231147"
id="rect62798" />
<rect
x="27.586344"
y="568.35688"
width="344.11667"
height="264.10881"
id="rect45500" />
<rect
x="31.707453"
y="397.84775"
width="312.90904"
height="82.873294"
id="rect8363" />
<rect
x="11.104974"
y="79.878937"
width="331.73628"
height="72.868062"
id="rect61742-2" />
<rect
x="11.104974"
y="79.878933"
width="362.00167"
height="83.989392"
id="rect20620" />
<rect
x="27.586344"
y="568.35688"
width="360.00143"
height="409.35817"
id="rect21926" />
<rect
x="28.759503"
y="661.40117"
width="317.84229"
height="426.97013"
id="rect17153" />
<rect
x="28.759503"
y="661.40117"
width="439.98073"
height="339.17915"
id="rect21432" />
<rect
x="28.759502"
y="661.40118"
width="417.32852"
height="149.75414"
id="rect21432-8" />
<rect
x="28.759502"
y="661.40118"
width="417.32852"
height="149.75414"
id="rect890" />
<rect
x="28.759502"
y="661.40118"
width="417.32852"
height="149.75414"
id="rect3231" />
<rect
x="28.759502"
y="661.40118"
width="417.32852"
height="149.75414"
id="rect3239" />
</defs>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="bg"
style="display:inline">
<rect
style="fill:#d4f1f4;fill-opacity:1;stroke-width:0.264583;stroke-linecap:round"
id="rect5863"
width="296.841"
height="209.992"
x="0.06620156"
y="-0.31411523" />
<text
xml:space="preserve"
transform="scale(0.26458333)"
id="text4911"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect4913);fill:#000000;fill-opacity:1;stroke:#ff0000;stroke-opacity:1" />
<text
xml:space="preserve"
transform="scale(0.26458333)"
id="text10253"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect10255);fill:#000000;fill-opacity:1;stroke:none" />
<rect
style="fill:#deadff;fill-opacity:1;stroke:#ff0000;stroke-width:0.34015;stroke-linecap:round;stroke-opacity:1"
id="rect11121"
width="91.924393"
height="133.61514"
x="6.4013166"
y="28.100414" />
<rect
style="fill:#cccccc;fill-opacity:1;stroke:#ff0000;stroke-width:0.327255;stroke-linecap:round;stroke-opacity:1"
id="rect11459"
width="124.591"
height="91.249603"
x="85.240631"
y="12.735214" />
<rect
style="fill:#cccccc;fill-opacity:1;stroke:#ff0000;stroke-width:0.207702;stroke-linecap:round;stroke-opacity:1"
id="rect11461"
width="83.939919"
height="54.557529"
x="202.0016"
y="27.626516" />
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,204.88433,-148.35647)"
id="text21430-7"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432-8);display:inline;fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17813"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17811">$map(theme:aed,z:14,lat:51.2098,lon:3.2284)</tspan></tspan></text>
<rect
style="fill:#cccccc;fill-opacity:1;stroke:#ff0000;stroke-width:0.202542;stroke-linecap:round;stroke-opacity:1"
id="rect11543"
width="78.526718"
height="55.456982"
x="218.29224"
y="77.650108" />
<rect
style="fill:#cccccc;fill-opacity:1;stroke:#ff0000;stroke-width:0.202542;stroke-linecap:round;stroke-opacity:1"
id="rect11647"
width="78.526718"
height="55.456982"
x="202.53519"
y="129.35155" />
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,-0.11468789,-6.3280046)"
id="text13431"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect13433);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17817"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17815">$flyer.toerisme_vlaanderen</tspan></tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,5.6749026,-127.45858)"
id="text17151"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect17153);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17821"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17819">$map(theme:toerisme_vlaanderen,l</tspan></tspan><tspan
x="28.759766"
y="747.7954"
id="tspan17825"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17823">ayer-bench:false,layers:none, layer-</tspan></tspan><tspan
x="28.759766"
y="797.7954"
id="tspan17829"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17827">charging_station:true,lat:</tspan></tspan><tspan
x="28.759766"
y="847.7954"
id="tspan17833"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17831">51.02403,lon:3.695483)</tspan></tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,83.780194,-161.66961)"
id="text21430"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17839"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17835">$map(theme:cyclofix,z:14,lat:</tspan><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17837">51.05016,lon:</tspan></tspan><tspan
x="28.759766"
y="747.7954"
id="tspan17843"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17841">3.717842,layers:none,layer-</tspan></tspan><tspan
x="28.759766"
y="797.7954"
id="tspan17847"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17845">bike_repair_station:true,layer-</tspan></tspan><tspan
x="28.759766"
y="847.7954"
id="tspan17851"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17849">drinking_water:true,layer-bike_cafe:true,layer-</tspan></tspan><tspan
x="28.759766"
y="897.7954"
id="tspan17855"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17853">bicycle_tube_vending_machine: true)</tspan></tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,220.91359,-94.272148)"
id="text888"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect890);display:inline;fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17859"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17857">$map(theme:benches,z:14,lat:51.2098,lon:</tspan></tspan><tspan
x="28.759766"
y="747.7954"
id="tspan17863"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17861">3.2284)</tspan></tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,200.73575,-44.990658)"
id="text3237"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect3239);display:inline;fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766"
y="697.7954"
id="tspan17867"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan17865">$map(theme:waste,z:14,lat:51.2098,lon:3.2284)</tspan></tspan></text>
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<text
xml:space="preserve"
transform="scale(0.26458333)"
id="text62796"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect62798);fill:#000000;fill-opacity:1;stroke:none" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="102.80793"
y="16.415634"
id="text8611-8"><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
x="102.80793"
y="16.415634"
id="tspan8613-8" /></text>
<text
xml:space="preserve"
transform="scale(0.26458333)"
id="text81704"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect81706);fill:#000000;fill-opacity:1;stroke:none" />
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,3.324481,3.3706638)"
id="text135030"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect135032);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="8.7285156"
y="42.098132"
id="tspan17871"><tspan
style="font-weight:bold;font-size:34.6667px;-inkscape-font-specification:'sans-serif, Bold'"
id="tspan17869">$flyer.title</tspan></tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="105.86118"
y="116.25558"
id="text53309"><tspan
sodipodi:role="line"
id="tspan53307"
style="stroke-width:0.264583"
x="105.86118"
y="116.25558" /><tspan
sodipodi:role="line"
style="stroke-width:0.264583"
id="tspan53311"
x="105.86118"
y="129.4847" /></text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

3
test.ts
View file

@ -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")