Add a Print function

[yohanboniface]

Originally reported by: BitBucket: leftshifted, GitHub: leftshifted

---

It would be really nice to have an Option to print the map. I know printing from HTML can be very anoying because browsers behave unexpectable. Still, something like a "Print-mode" which lets users arrange the Map and a list of all points (and other objects), adds a copyright notice (and maybe a "Generated with umap") and then spits it out in a reasonable size and resolution (maybe a few options like custom size, A4, letter, whatever) would be nice. If no one else wants to try to tackle this, I might also fork and try to get something done, just know that I have somewhat limited time and skills.

Really enjoying all other aspects of umap, this should be so much more public, amazingly simple project!

---

• Bitbucket: https://bitbucket.org/yohanboniface/umap/issue/88

[thewholelifetolearn]

:+1:

I would enlarge this proposal to be more generic. It would be great if it could be possible to export in different images format (SVG, PNG, JPEG, PDF, ...). It would ease the printing and could be also reused in documents.

[jphnavarro]

C'est vraiment une fonctionnalité qui manque dans uMap... je plussoie !

[trofima]

So 3.5 years passed. Is there any progress on that?

[hannesw]

+1 for that - PDF export would be great!

[Dubidubiduu]

+1 Or at least a way to export the map. Including style!

[Guddi11]

+1 Definitely would love an export functionality, may it be pdf or reasonably sized image!! Is there any attempt in creating that?

[clembeb]

+1 It would be very nice to have an export to pdf functionality.

[sylvain-m]

+1 :+1: A mon tour de plussoyer : on vient de s'en sortir avec des captures d'écran, mais une fonction d'impression (PDF) serait beaucoup plus pratique...

On my turn to add :+1: we just got out with screenshots, but a print function (PDF) would be much more convenient ...

[crti]

Since OSM can only export as image (PNG, PDF, SVG, JPG) the standard layer (which I do not like) an UMap option in this direction to have images for print (300 dpi) would be fantastic. MyOSMatic after some experimenting does a good job, but the layer options are not as wide as with uMap and obviously custom content is not available there. Currently with my FHD monitor the only solution I can think of is getting a 4k+ Monitor and make a screenshot there to get a satisfying resolution. All other attempts with Add-ons, Zooming, etc. failed so far.

EDIT: I found the Chrome > Inspect > device toggle option >custom device / pixel ratio > Capture screenshot as workaround and are playing with it - for PNG it might almost do what I want. Source: https://droidtechknow.com/how-to/how-to-take-high-quality-screenshot-using-chrome-browser/

[yohanboniface]

EDIT: I found the Chrome > Inspect > device toggle option >custom device / pixel ratio > Capture screenshot as workaround and are playing with it - for PNG it might almost do what I want. Source: https://droidtechknow.com/how-to/how-to-take-high-quality-screenshot-using-chrome-browser/

Works on FF to, with ctrl-shift-M and then screenshot for the viewport.

Also to consider: https://github.com/Igor-Vladyka/leaflet.browser.print

[yohanboniface]

See also https://github.com/parallax/jsPDF

[yohanboniface]

For the record, this plugin could not be used because uMap uses HTML for markers, and this plugin does not deal with HTML: https://github.com/mapbox/leaflet-image

[ToastHawaii]

EDIT: I found the Chrome > Inspect > device toggle option >custom device / pixel ratio > Capture screenshot as workaround and are playing with it - for PNG it might almost do what I want. Source: https://droidtechknow.com/how-to/how-to-take-high-quality-screenshot-using-chrome-browser/

Works on FF to, with ctrl-shift-M and then screenshot for the viewport.

Thank you, that worked for me. Here is an addition: I used 3267x2310 and ratio 3 for an A3,A2 paper print. And used this CSS in inspector-stylesheet to display and customise the elements:

ul.buttons {
    display: none !important;
}

.credits-container {
    display: none;
}

.datalayer-container {
    padding-bottom: 1px;
}

.leaflet-top.leaflet-left {
    display: none;
}

.with-transition.panel.window.left.expanded.on {margin-left: -51px;top: -5px;bottom: 28px;}

.leaflet-control-scale-line:nth-of-type(2) {
    display: none;
}

.leaflet-top.leaflet-right {
    display: none;
}ul.buttons {
    display: none !important;
}

.credits-container {
    display: none;
}

.datalayer-container {
    padding-bottom: 1px;
}

.leaflet-top.leaflet-left {
    display: none;
}

.with-transition.panel.window.left.expanded.on {margin-left: -51px;top: -5px;bottom: 28px;}

.leaflet-control-scale-line:nth-of-type(2) {
    display: none;
}

.leaflet-top.leaflet-right {
    display: none;
}

button.icon.icon-16.icon-eye {
    display: none;
}

button.icon.icon-16.icon-zoom {
    display: none;
}

.datalayer-legend .icon + span {
    margin: -28px !important;
}

span.datalayer-color {
    border-radius: 50%;
    border: none;
    width: 20px;
    height: 20px;
}

h3 span {
    line-height: 26px;
}

How it looks: