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

Improvements to pdfExport, small tweaks to the themes

Browse source
This commit is contained in:
pietervdvn 2021-07-29 01:57:45 +02:00
parent 38635ba8b2
commit f946ad38b7
8 changed files with 102 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
UI/ExportPDF.ts
View file

@ -20,6 +20,8 @@ import BaseLayer from "../Models/BaseLayer";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import {FixedUiElement} from "./Base/FixedUiElement";
import Translations from "./i18n/Translations";
import State from "../State";
import Constants from "../Models/Constants";
export default class ExportPDF {
// dimensions of the map in milimeter
@ -100,7 +102,7 @@ export default class ExportPDF {
}
private cleanup() {
new FixedUiElement("Screenshot taken!").AttachTo(this.freeDivId)
// new FixedUiElement("Screenshot taken!").AttachTo(this.freeDivId)
this._screenhotTaken = true;
}
@ -124,28 +126,67 @@ export default class ExportPDF {
doc.setDrawColor(255, 255, 255)
doc.setFillColor(255, 255, 255)
doc.roundedRect(12, 5, 125, 30, 5, 5, 'FD')
doc.roundedRect(12, 10, 145, 25, 5, 5, 'FD')
doc.setFontSize(20)
doc.text(layout.title.txt, 40, 20, {
maxWidth: 100
doc.textWithLink(layout.title.txt, 40, 18.5, {
maxWidth: 125,
url: window.location.href
})
doc.setFontSize(10)
doc.text(t.attr.txt, 40, 25, {
maxWidth: 100
doc.text(t.generatedWith.txt, 40, 23, {
maxWidth: 125
})
const backgroundLayer : BaseLayer = State.state.backgroundLayer.data
const attribution = new FixedUiElement(backgroundLayer.layer().getAttribution() ?? backgroundLayer.name).ConstructElement().innerText
doc.textWithLink(t.attr.txt, 40, 26.5, {
maxWidth: 125,
url: "https://www.openstreetmap.org/copyright"
})
doc.text(t.attrBackground.Subs({
background: attribution
}).txt, 40, 30)
let date = new Date().toISOString().substr(0,16)
doc.setFontSize(7)
doc.text(t.versionInfo.Subs({
version: Constants.vNumber,
date: date
}).txt, 40, 34, {
maxWidth: 125
})
// Add the logo of the layout
let img = document.createElement('img');
const imgSource = layout.icon
const imgType = imgSource.substr(imgSource.lastIndexOf(".") + 1);
img.src = imgSource
try {
doc.addImage(img, imgSource.substr(imgSource.lastIndexOf(".")), 15, 12, 20, 20);
} catch (e) {
// TODO: support svg rendering...
console.error(e)
console.log(imgType)
if (imgType.toLowerCase() === "svg") {
new FixedUiElement("").AttachTo(this.freeDivId)
// This is an svg image, we use the canvas to convert it to a png
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d');
canvas.width = 500
canvas.height = 500
img.style.width = "100%"
img.style.height = "100%"
ctx.drawImage(img, 0, 0, 500, 500);
const base64img = canvas.toDataURL("image/png")
doc.addImage(base64img, 'png', 15, 12, 20, 20);
} else {
try {
doc.addImage(img, imgType, 15, 12, 20, 20);
} catch (e) {
console.error(e)
}
}
doc.save("MapComplete_export.pdf");
doc.save(`MapComplete_${layout.title.txt}_${date}.pdf`);
}

33
assets/themes/cycle_infra/cycle_infra.json
View file

@ -633,11 +633,15 @@
},
"freeform": {
"key": "width:carriageway",
"type": "length", "helperArgs": ["20", "map"]
"type": "length",
"helperArgs": [
"20",
"map"
]
},
"question": {
"en": "What is the carriage width of this road (in meters)?<br/><span class='subtle'>This is measured from kerb to kerb, including parking lanes</span>",
"nl": "Hoe breed is de rijbaan in deze straat (in meters)?<br/><span class='subtle'>Gemeten van stoepsteen tot stoepsten, inclusief parkeerstroken</span>"
"en": "What is the carriage width of this road (in meters)?",
"nl": "Hoe breed is de rijbaan in deze straat (in meters)?"
}
},
{
@ -971,7 +975,11 @@
},
"freeform": {
"key": "cycleway:buffer",
"type": "length", "helperArgs": ["20", "map"]
"type": "length",
"helperArgs": [
"20",
"map"
]
}
},
{
@ -1308,7 +1316,11 @@
},
"freeform": {
"key": "width:carriageway",
"type": "length", "helperArgs": ["20", "map"]
"type": "length",
"helperArgs": [
"20",
"map"
]
},
"question": {
"en": "What is the carriage width of this road (in meters)?<br/><span class='subtle'>This is measured from kerb to kerb, including parking lanes</span>",
@ -1509,7 +1521,11 @@
},
"freeform": {
"key": "maxwidth:physical",
"type": "length", "helperArgs": ["20", "map"]
"type": "length",
"helperArgs": [
"20",
"map"
]
}
},
{
@ -1530,7 +1546,10 @@
"freeform": {
"key": "width:seperation",
"type": "length",
"helperArgs": ["20", "map"]
"helperArgs": [
"20",
"map"
]
}
},
{

9
index.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html>
<!-- WARNING: index.html serves as a template. If you want to change something, change it there -->
<html lang="en">
@ -24,7 +23,8 @@
<link rel="icon" href="./assets/svg/add.svg" sizes="any" type="image/svg+xml">
<meta property="og:image" content="./assets/SocialImage.png">
<meta property="og:title" content="MapComplete - editable, thematic maps with OpenStreetMap">
<meta property="og:description" content="MapComplete is a platform to visualize OpenStreetMap on a specific topic and to easily contribute data back to it.">
<meta property="og:description"
content="MapComplete is a platform to visualize OpenStreetMap on a specific topic and to easily contribute data back to it.">
<link rel="apple-touch-icon" sizes="512x512" href="./assets/generated/svg_mapcomplete_logo512.png">
<link rel="apple-touch-icon" sizes="384x384" href="./assets/generated/svg_mapcomplete_logo384.png">
@ -74,10 +74,7 @@
Loading MapComplete, hang on...
</div>
<span id="belowmap"
class="absolute"
style="z-index: -1"
>Below</span>
<span id="belowmap" class="absolute" style="z-index: -1">Below</span>
<div id="leafletDiv"></div>
<script src="./index.ts"></script>

5
langs/en.json
View file

@ -62,7 +62,10 @@
},
"general": {
"pdf": {
"attr": "Generated with MapComplete.osm.be - map data © OpenStreetMap Contributors, reusable under ODbL"
"generatedWith": "Generated with MapComplete.osm.be",
"attr": "Map data © OpenStreetMap Contributors, reusable under ODbL",
"attrBackground": "Background layer: {background}",
"versionInfo": "v{version} - generated on {date}"
},
"loginWithOpenStreetMap": "Login with OpenStreetMap",
"welcomeBack": "You are logged in, welcome back!",

6
langs/layers/nl.json
View file

@ -2364,12 +2364,6 @@
}
}
}
},
"presets": {
"0": {
"title": "Paden",
"description": "Voeg een ontbrekend, erkend pad toe."
}
}
}
}

4
langs/themes/en.json
View file

@ -1108,6 +1108,10 @@
"then": "This is not a cyclestreet."
}
}
},
"2": {
"render": "The carriage width of this road is <strong>{width:carriageway}m</strong>",
"question": "What is the carriage width of this road (in meters)?<br/><span class='subtle'>This is measured from kerb to kerb, including parking lanes</span>"
}
}
},

4
langs/themes/nl.json
View file

@ -970,6 +970,10 @@
"then": "Dit is geen fietsstraat"
}
}
},
"2": {
"render": "De breedte van deze rijbaan in deze straat is <strong>{width:carriageway}m</strong>",
"question": "Hoe breed is de rijbaan in deze straat (in meters)?<br/><span class='subtle'>Gemeten van stoepsteen tot stoepsten, inclusief parkeerstroken</span>"
}
}
},

11
scripts/generateTranslations.ts
View file

@ -2,6 +2,7 @@ import * as fs from "fs";
import {readFileSync, writeFileSync} from "fs";
import {Utils} from "../Utils";
import ScriptUtils from "./ScriptUtils";
import {Layer} from "leaflet";
const knownLanguages = ["en", "nl", "de", "fr", "es", "gl", "ca"];
@ -40,12 +41,12 @@ class TranslationPart {
}
}
recursiveAdd(object: any) {
recursiveAdd(object: any, context: string) {
const isProbablyTranslationObject = knownLanguages.map(l => object.hasOwnProperty(l)).filter(x => x).length > 0;
if (isProbablyTranslationObject) {
this.addTranslationObject(object)
this.addTranslationObject(object, context)
return;
}
@ -68,7 +69,7 @@ class TranslationPart {
this.contents.set(key, new TranslationPart())
}
(this.contents.get(key) as TranslationPart).recursiveAdd(v);
(this.contents.get(key) as TranslationPart).recursiveAdd(v, context + "." + key);
}
}
@ -190,7 +191,7 @@ function generateTranslationsObjectFrom(objects: { path: string, parsed: { id: s
if (config === undefined) {
throw "Got something not parsed! Path is " + layerFile.path
}
layerTr.recursiveAdd(config)
layerTr.recursiveAdd(config, layerFile.path)
tr.contents.set(config.id, layerTr)
}
@ -301,7 +302,7 @@ function mergeThemeTranslations() {
const oldLanguages = config.language;
const allTranslations = new TranslationPart();
allTranslations.recursiveAdd(config)
allTranslations.recursiveAdd(config, themeFile.path)
const newLanguages = allTranslations.knownLanguages()
const languageDiff = newLanguages.filter(l => oldLanguages.indexOf(l) < 0).join(", ")
if (languageDiff !== "") {