Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Improve flyer, fix addPage

Browse source
This commit is contained in:
pietervdvn 2022-09-16 18:58:42 +02:00
parent ba0046120f
commit e81e894a11
6 changed files with 72 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Utils/pngMapCreator.ts
View file

@ -41,7 +41,6 @@ export class PngMapCreator {
}, 250) }, 250)
}) })
const style = `width: ${options.width * options.scaling}mm; height: ${options.height * options.scaling}mm;` const style = `width: ${options.width * options.scaling}mm; height: ${options.height * options.scaling}mm;`
console.log("Style is", style)
minimap.SetStyle(style) minimap.SetStyle(style)
minimap.AttachTo(options.divId) minimap.AttachTo(options.divId)
}) })
@ -61,8 +60,7 @@ export class PngMapCreator {
const minimap = await this.createAndLoadMinimap() const minimap = await this.createAndLoadMinimap()
const state = this._state const state = this._state
const dummyMode = this._options.dummyMode ?? false const dummyMode = this._options.dummyMode ?? false
console.log("Dummy mode is", dummyMode) return new Promise<string | Blob>((resolve, reject) => {
return new Promise<string | Blob>(resolve => {
// Next: we prepare the features. Only fully contained features are shown // Next: we prepare the features. Only fully contained features are shown
minimap.leafletMap.addCallbackAndRunD(async (leaflet) => { minimap.leafletMap.addCallbackAndRunD(async (leaflet) => {
// Ping the featurepipeline to download what is needed // Ping the featurepipeline to download what is needed
@ -96,10 +94,18 @@ export class PngMapCreator {
state: undefined, state: undefined,
}) })
}) })
await Utils.waitFor(10000) await Utils.waitFor(2000)
} }
minimap.TakeScreenshot(format).then(result => { minimap.TakeScreenshot(format).then(result => {
const divId = this._options.divId
window.setTimeout(() => {
document.getElementById(divId).removeChild(/*Will fetch the cached htmlelement:*/minimap.ConstructElement())
}, 500)
return resolve(result); return resolve(result);
}).catch(failreason => {
console.error("Could no make a screenshot due to ",failreason)
reject(failreason)
}) })
}) })

26
Utils/svgToPdf.ts
View file

@ -11,6 +11,7 @@ import {makeAbsolute, parseSVG} from 'svg-path-parser';
import Translations from "../UI/i18n/Translations"; import Translations from "../UI/i18n/Translations";
import {Utils} from "../Utils"; import {Utils} from "../Utils";
import Locale from "../UI/i18n/Locale"; import Locale from "../UI/i18n/Locale";
import Constants from "../Models/Constants";
class SvgToPdfInternals { class SvgToPdfInternals {
private readonly doc: jsPDF; private readonly doc: jsPDF;
@ -214,6 +215,9 @@ class SvgToPdfInternals {
if (pathPart === null) { if (pathPart === null) {
return text return text
} }
if(text === "$version"){
return new Date().toISOString()+" "+Constants.vNumber
}
let t: any = Translations.t let t: any = Translations.t
const path = pathPart[1].split(".") const path = pathPart[1].split(".")
if (this._importedTranslations[path[0]]) { if (this._importedTranslations[path[0]]) {
@ -362,8 +366,6 @@ class SvgToPdfInternals {
} }
private drawPath(element: SVGPathElement): void { private drawPath(element: SVGPathElement): void {
if (element.id === "rect25327")
console.log("Drawing", element.id, element)
const path = element.getAttribute("d") const path = element.getAttribute("d")
const parsed: { code: string, x: number, y: number, x2?, y2?, x1?, y1? }[] = parseSVG(path) const parsed: { code: string, x: number, y: number, x2?, y2?, x1?, y1? }[] = parseSVG(path)
makeAbsolute(parsed) makeAbsolute(parsed)
@ -612,7 +614,6 @@ export class SvgToPdfPage {
throw "Invalid mapspec:" + spec throw "Invalid mapspec:" + spec
} }
const params = SvgToPdfInternals.parseCss(match[1], ",") const params = SvgToPdfInternals.parseCss(match[1], ",")
const ctx = `Preparing map (theme ${params["theme"]})`
let smallestRect: SVGRectElement = undefined let smallestRect: SVGRectElement = undefined
let smallestSurface: number = undefined; let smallestSurface: number = undefined;
@ -660,8 +661,10 @@ export class SvgToPdfPage {
const layerName = paramsKey.substring("layer-".length) const layerName = paramsKey.substring("layer-".length)
const key = params[paramsKey].toLowerCase().trim() const key = params[paramsKey].toLowerCase().trim()
const layer = layout.layers.find(l => l.id === layerName) const layer = layout.layers.find(l => l.id === layerName)
if (layer === undefined) {
throw "No layer found for " + paramsKey
}
if (key === "force") { if (key === "force") {
console.log("Forcing minzoom of layer", layer.id)
layer.minzoom = 0 layer.minzoom = 0
layer.minzoomVisible = 0 layer.minzoomVisible = 0
} }
@ -678,7 +681,9 @@ export class SvgToPdfPage {
const fl = state.filteredLayers.data const fl = state.filteredLayers.data
for (const filteredLayer of fl) { for (const filteredLayer of fl) {
if (params["layers"] === "none") { if (params["layer-" + filteredLayer.layerDef.id] !== undefined) {
filteredLayer.isDisplayed.setData(params["layer-" + filteredLayer.layerDef.id].trim().toLowerCase() !== "false")
} else if (params["layers"] === "none") {
filteredLayer.isDisplayed.setData(false) filteredLayer.isDisplayed.setData(false)
} else if (filteredLayer.layerDef.id.startsWith("note_import")) { } else if (filteredLayer.layerDef.id.startsWith("note_import")) {
filteredLayer.isDisplayed.setData(false) filteredLayer.isDisplayed.setData(false)
@ -698,6 +703,12 @@ export class SvgToPdfPage {
if (key === "force") { if (key === "force") {
layer.layerDef.minzoom = 0 layer.layerDef.minzoom = 0
layer.layerDef.minzoomVisible = 0 layer.layerDef.minzoomVisible = 0
layer.isDisplayed.addCallback(isDisplayed => {
if(!isDisplayed){
console.warn("Forcing layer " + paramsKey + " as true")
layer.isDisplayed.setData(true)
}
})
} }
} }
} }
@ -742,8 +753,9 @@ export class SvgToPdfPage {
await this.prepareElement(<any>child, mapSpecs) await this.prepareElement(<any>child, mapSpecs)
} }
const self = this; for (const mapSpec of mapSpecs) {
await Promise.all(mapSpecs.map(ms => self.prepareMap(ms))) await this.prepareMap(mapSpec)
}
} }

21
langs/en.json
View file

@ -42,8 +42,9 @@
"flyer": { "flyer": {
"aerial": "This map uses a different background, namely aerial imagery by Agentschap Informatie Vlaanderen", "aerial": "This map uses a different background, namely aerial imagery by Agentschap Informatie Vlaanderen",
"callToAction": "Test it on mapcomplete.osm.be", "callToAction": "Test it on mapcomplete.osm.be",
"cyclofix": "Bicycle pumps, repair stations, drinking water and cycle shops are on cyclofix",
"editing": { "editing": {
"intro": "The user is greeted by a map with points. Upon selecting a point, the information about the point is shown. A simplified example of what this looks like for a nature reserve is shown below.", "intro": "The user is greeted by a map with feature. Upon selecting one, the information about that feature is shown. A simplified example of what this looks like for a nature reserve is shown below.",
"title": "What does the interface look like?" "title": "What does the interface look like?"
}, },
"examples": "There are many thematic maps available of which a few are printed here, namely the maps with AED's, artwork, cyclestreets, benches and cyclepumps.\n\nThere are many more thematic maps online: about healthcare, indoor navigation, wheelchair accessibility, waste facilities, public bookcases, pedestrian crossings with a rainbow-painting,... Discover them all on mapcomplete.osm.be ", "examples": "There are many thematic maps available of which a few are printed here, namely the maps with AED's, artwork, cyclestreets, benches and cyclepumps.\n\nThere are many more thematic maps online: about healthcare, indoor navigation, wheelchair accessibility, waste facilities, public bookcases, pedestrian crossings with a rainbow-painting,... Discover them all on mapcomplete.osm.be ",
@ -56,21 +57,21 @@
"wikipedia": "Linked Wikipedia articles are shown" "wikipedia": "Linked Wikipedia articles are shown"
}, },
"frontParagraph": "MapComplete is an easy to use web application to collect geodata in OpenStreetMap, enabling collecting and managing relevant data in an open, crowdsourced and reusable way.\n\nNew categories and attributes can be added upon request.", "frontParagraph": "MapComplete is an easy to use web application to collect geodata in OpenStreetMap, enabling collecting and managing relevant data in an open, crowdsourced and reusable way.\n\nNew categories and attributes can be added upon request.",
"lines_too": "Lines and polygons are shown too. Attributes and images can be added and updated as well.", "lines_too": "Lines and polygons are shown too. Attributes and images can be added and updated on those objects as well.",
"mapcomplete": { "mapcomplete": {
"customize": "MapComplete can tailored to your needs, with new map layers, new functionalities or styled to your organisation styleguide. We also have experience with starting campaigns to crowdsource geodata.\nContact pietervdvn@posteo.net for a quote.", "customize": "MapComplete can be tailored to your needs, with new map layers, new functionalities or styled with your organisations colours and font.\nWe also have experience with starting campaigns to crowdsource geodata.\nContact pietervdvn@posteo.net for a quote.",
"intro": "MapComplete is a website which has {mapCount} interactive maps. Every single map allows to add or update information.", "intro": "MapComplete is a website which has {mapCount} interactive maps. Every single map allows to add or update information.",
"li0": "Show where POI are", "li0": "Show where POI are",
"li1": "Add new points and update information on existing points", "li1": "Add new points and update information on existing points",
"li2": "View and add pictures", "li2": "Add contact information and opening hours easily",
"li3": "Add contact information and opening hours easily", "li3": "Can be placed in other websites as iFrame",
"li4": "See Wikipedia articles about the selected feature", "li4": "Embedded within the OpenStreetMap-ecosystem, which has many tools available",
"li5": "See aerial imagery and map backgrounds", "li5": "Functionality to import existing datasets",
"li6": "Can be placed in other websites as iFrame", "li6": "Many advanced features, such as tree detection and advanced input methods",
"li7": "Embedded within the OpenStreetMap-ecosystem, which has many tools available", "li7": "Fully open source (GPL) and free to use",
"li8": "Fully open source (GPL) and free to use",
"title": "What is MapComplete?" "title": "What is MapComplete?"
}, },
"onwheels": "Indoor maps for wheelchair users are available as well.",w
"osm": "OpenStreetMap is an online map which can be edited and reused by anyone for any purpose as long as attribution is given and the data is kept open.\n\nIt is the biggest geospatial database in the world and is reused by thousands of applications and websites.", "osm": "OpenStreetMap is an online map which can be edited and reused by anyone for any purpose as long as attribution is given and the data is kept open.\n\nIt is the biggest geospatial database in the world and is reused by thousands of applications and websites.",
"tagline": "Collect geodata easily with OpenStreetMap", "tagline": "Collect geodata easily with OpenStreetMap",
"title": "MapComplete.osm.be", "title": "MapComplete.osm.be",

36
langs/nl.json
View file

@ -42,38 +42,40 @@
"flyer": { "flyer": {
"aerial": "Deze kaart gebruikt luchtfoto's van het Agentschap Informatie Vlaanderen als achtergrond.\nOok het GRB is beschikbaar als achtergrondlaag.", "aerial": "Deze kaart gebruikt luchtfoto's van het Agentschap Informatie Vlaanderen als achtergrond.\nOok het GRB is beschikbaar als achtergrondlaag.",
"callToAction": "Probeer het uit op mapcomplete.osm.be", "callToAction": "Probeer het uit op mapcomplete.osm.be",
"cyclofix": "Fietspompen, drinkwaterkraantjes, bandenautomaten en fietswinkels vind je op Cyclofix",
"editing": { "editing": {
"intro": "De gebruiker krijgt eerst een kaart met interesspunten te zien. Wanneer er op een punt geklikt wordt, wordt een interface met informatie geopend. Een (versimpeld) voorbeeld voor een natuurgebied wordt hieronder getoond:", "intro": "De gebruiker krijgt eerst een kaart met interesspunten te zien. Wanneer er op een punt geklikt wordt, wordt een interface met informatie geopend. Een (vereenvoudigd) voorbeeld voor een natuurgebied wordt hieronder getoond:",
"title": "Hoe ziet de interface eruit?" "title": "Hoe ziet de interface eruit?"
}, },
"examples": "Er zijn vele thematische kaarten beschikbaar. Enkele voorbeelden zijn hier geprint, zoals de kaart met AEDs, kunstwerken, fietsstraten, banken en fietspompen.\n\nOnline zijn er nog kaarten met diverse thema's, zoals gezondheidszorg, binnenruimtes, rolstoeltoegankelijkheid, afvalcontainers, boekenruilkasten, regenboog-zebrapaden,... Ontdek ze allemaal mapcomplete.osm.be ", "examples": "Er zijn veel thematische kaarten beschikbaar, enkele voorbeelden zijn hier geprint.\n\nOnline zijn er nog kaarten met diverse thema's, zoals gezondheidszorg, binnenruimtes, rolstoeltoegankelijkheid, afvalcontainers, boekenruilkasten, regenboog-zebrapaden,... Ontdek ze allemaal op mapcomplete.osm.be ",
"fakeui": { "fakeui": {
"add_images": "Voeg foto's met een paar klikken toe", "add_images": "Voeg foto's toe met een paar klikken",
"attributes": "Attributen worden getoond op begrijpbare wijze", "attributes": "Attributen worden getoond op begrijpbare wijze",
"edit": "Foute of verouderde gegevens? Aanpassen kan hier", "edit": "Foute of verouderde gegevens? Aanpassen kan hier",
"question": "Is een attribuut nog niet gekend? MapComplete toont een vraag", "question": "Is een attribuut nog niet gekend? MapComplete toont een vraag",
"see_images": "Toont afbeeldingen van eerdere bijdragers, Wikipedia, Mapillary, ...", "see_images": "Toont afbeeldingen van eerdere bijdragers, Wikipedia, Mapillary, ...",
"wikipedia": "Gelinkte Wikipedia-artikels worden getoond" "wikipedia": "Gelinkte Wikipedia-artikels worden getoond"
}, },
"frontParagraph": "MapComplete is een web-applicatie om OpenStreetMap-data te tonen en aan te passen op basis van thematische kaarten. Het maakt het mogelijk om open geodata te crowdsourcen en te managen op een makkelijke manier.\n\nNieuwe categorie<69>n en attributen kunnen op vraag worden toegevoegd.", "frontParagraph": "MapComplete is een web-applicatie om OpenStreetMap-data te tonen en aan te passen op basis van thematische kaarten. Het maakt het mogelijk om open geodata te crowdsourcen en te managen op een makkelijke manier.\n\nNieuwe categorieën en attributen kunnen op vraag worden toegevoegd.",
"lines_too": "Lijnobjecten en polygonen worden ook getoond, waarvan afbeeldingen en attributen toegevoegd en aangepast kunnen worden.",
"mapcomplete": { "mapcomplete": {
"customize": "Wil je een versie op maat? Wil je een versie in jullie huisstijl?\nWil je een nieuwe kaartlaag of functionaliteit? Wil je een crowdsourcing-campagne opzetten?\nNeem contact op met pietervdvn@posteo.net voor een offerte.", "customize": "Wil je een versie op maat? Wil je een versie in jullie huisstijl?\nWil je een nieuwe kaartlaag of functionaliteit? Wil je een crowdsourcing-campagne opzetten?\nNeem contact op met pietervdvn@posteo.net voor meer info.",
"intro": "MapComplete is een website met {mapCount} interactieve kaarten. Op iedere kaart kunnen gebruikers data zien en updaten.", "intro": "MapComplete is een website met {mapCount} interactieve kaarten - er komen regelmatig kaarten bij. Iedere kaart toont items binnen een interessegebied waar gebruikers data zien en updaten.",
"li0": "Communiceer waar interessepunten zijn", "li0": "Toon waar interessepunten zijn",
"li1": "Voeg nieuwe punten toe en update informatie van reeds bestaande punten", "li1": "Voeg nieuwe punten toe en update informatie van reeds bestaande punten",
"li2": "Bekijk en voeg foto's van interessepunten toe", "li2": "Voeg eenvoudig contactgegevens en openingsuren toe",
"li3": "Voeg eenvoudig contactgegevens en openingsuren toe", "li3": "Eenvoudig te embedden in een website als iFrame",
"li4": "Bekijk het Wikipedia-artikel van interessepunten", "li4": "Deel van het OpenStreetMap-ecosysteem met honderden andere tools",
"li5": "Wissel tussen kaart- en luchtfoto's als achtergrond", "li5": "Hulp bij importeren van datasets",
"li6": "Eenvoudig te embedden in een website als iFrame", "li6": "Gespecialiseerde invoer voor boomherkenning, Wikipedia, kijkrichting, ...",
"li7": "Deel van het OpenStreetMap-ecosysteem waarbinnen honderden andere tools bestaan", "li7": "Volledig Open-Source (GPL) en gratis te gebruiken",
"li8": "Volledig Open-Source (GPL) en gratis te gebruiken",
"title": "Wat is MapComplete?" "title": "Wat is MapComplete?"
}, },
"osm": "OpenStreetMap is een online kaart die door iedereen aangepast en herbruikt mag worden - mits bronvermelding en het openhouden van de data.\n\nHet is de grootste geodatabank ter wereld en wordt herbruikt door miljoenen websites en applicaties.", "onwheels": "Kaarten van binnenruimtes voor rolstoelgebruikers zijn ook beschikbaar",
"tagline": "Eenvoudig geodata verzamelen met OpenStreetMap", "osm": "OpenStreetMap is een online kaart die door iedereen aangepast en herbruikt mag worden mits bronvermelding en het openhouden van de data.\n\nHet is de grootste geodatabank ter wereld en wordt herbruikt door miljoenen websites en applicaties.",
"tagline": "Geodata eenvoudig verzamelen met OpenStreetMap",
"title": "MapComplete.osm.be", "title": "MapComplete.osm.be",
"toerisme_vlaanderen": "In samenwerking met Toerisme Vlaanderen werd 'Pin Je Punt' gecre<EFBFBD>erd. Op enkele maanden tijd werden duizenden zitbanken en picnictafels en meer dan honderd oplaadpunten voor elektrische fietsen toegevoegd aan de kaart door meer dan 160 bijdragers.", "toerisme_vlaanderen": "In samenwerking met Toerisme Vlaanderen werd 'Pin Je Punt' gecreëerd. Op enkele maanden tijd werden hiermee duizenden zitbanken, picknicktafels en oplaadpunten voor elektrische fietsen toegevoegd aan de kaart door meer dan 160 personen.",
"whatIsOsm": "Wat is OpenStreetMap?" "whatIsOsm": "Wat is OpenStreetMap?"
}, },
"general": { "general": {

2
package.json
View file

@ -8,7 +8,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "npm run generate:layeroverview && npm run strt", "start": "npm run generate:layeroverview && npm run strt",
"strt": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve *.html UI/** Logic/** assets/*.json assets/svg/* assets/generated/* assets/layers/*/*.svg assets/layers/*/*/*/*.svg assets/layers/*/*.jpg assets/layers/*/*.png assets/layers/*/*.css assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.ttf assets/themes/*/*/*.ttf assets/themes/*/*.otf assets/themes/*/*/*.otf assets/themes/*/*.css assets/themes/*/*.jpg assets/themes/*/*.woff assets/themes/*/*.png vendor/* vendor/*/* assets/tagRenderings/*.svg", "strt": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve *.html UI/** Logic/** assets/*.json assets/svg/* assets/templates/* assets/generated/* assets/layers/*/*.svg assets/layers/*/*/*/*.svg assets/layers/*/*.jpg assets/layers/*/*.png assets/layers/*/*.css assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.ttf assets/themes/*/*/*.ttf assets/themes/*/*.otf assets/themes/*/*/*.otf assets/themes/*/*.css assets/themes/*/*.jpg assets/themes/*/*.woff assets/themes/*/*.png vendor/* vendor/*/* assets/tagRenderings/*.svg",
"strttest": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve test.html assets/templates/*.svg assets/templates/fonts/*.ttf", "strttest": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve test.html assets/templates/*.svg assets/templates/fonts/*.ttf",
"watch:css": "tailwindcss -i index.css -o css/index-tailwind-output.css --watch", "watch:css": "tailwindcss -i index.css -o css/index-tailwind-output.css --watch",
"generate:css": "tailwindcss -i index.css -o css/index-tailwind-output.css", "generate:css": "tailwindcss -i index.css -o css/index-tailwind-output.css",

20
test.ts
View file

@ -1,16 +1,13 @@
import MinimapImplementation from "./UI/Base/MinimapImplementation"; import MinimapImplementation from "./UI/Base/MinimapImplementation";
MinimapImplementation.initialize()
import {Utils} from "./Utils"; import {Utils} from "./Utils";
import {SvgToPdf, SvgToPdfOptions} from "./Utils/svgToPdf"; import {SvgToPdf, SvgToPdfOptions} from "./Utils/svgToPdf";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts"; import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import Locale from "./UI/i18n/Locale";
import LayerConfig from "./Models/ThemeConfig/LayerConfig"; import LayerConfig from "./Models/ThemeConfig/LayerConfig";
import Constants from "./Models/Constants";
import {And} from "./Logic/Tags/And"; import {And} from "./Logic/Tags/And";
import {Tag} from "./Logic/Tags/Tag"; import {Tag} from "./Logic/Tags/Tag";
import {Overpass} from "./Logic/Osm/Overpass";
import Constants from "./Models/Constants"; MinimapImplementation.initialize()
let i = 0 let i = 0
@ -25,10 +22,11 @@ async function main() {
{ {
// Dirty hack! // Dirty hack!
// Make the charging-station layer simpler to allow querying it by overpass // Make the charging-station layer simpler to allow querying it by overpass
const chargingStationLayer: LayerConfig = AllKnownLayouts.allKnownLayouts.get("toerisme_vlaanderen").layers.find(l => l.id === "charging_station_ebikes") const chargingStationLayer: LayerConfig = AllKnownLayouts.allKnownLayouts.get("toerisme_vlaanderen").layers.find(l => l.id === "charging_station")
chargingStationLayer.minzoom = 0 chargingStationLayer.filters = []
chargingStationLayer.minzoomVisible = 0 const bikechargingStationLayer : LayerConfig = AllKnownLayouts.allKnownLayouts.get("toerisme_vlaanderen").layers.find(l => l.id === "charging_station_ebikes")
// chargingStationLayer.source.osmTags = new And([new Tag("amenity","charging_station"), new Tag("bicycle","yes")])
bikechargingStationLayer.source.osmTags = new And([new Tag("amenity","charging_station"), new Tag("bicycle","yes")])
Constants.defaultOverpassUrls.splice(0,1) // remove overpass-api.de for this run Constants.defaultOverpassUrls.splice(0,1) // remove overpass-api.de for this run
} }
@ -41,7 +39,7 @@ async function main() {
textSubstitutions: { textSubstitutions: {
mapCount: "" + Array.from(AllKnownLayouts.allKnownLayouts.values()).filter(th => !th.hideFromOverview).length mapCount: "" + Array.from(AllKnownLayouts.allKnownLayouts.values()).filter(th => !th.hideFromOverview).length
}, },
disableMaps: true disableMaps: false
} }
const front = await new SvgToPdf([svg, svgBack], options) const front = await new SvgToPdf([svg, svgBack], options)
await front.ConvertSvg("Flyer-nl.pdf", "nl") await front.ConvertSvg("Flyer-nl.pdf", "nl")