Export as

[Messa1]

Would be nice if i can export the map (Viewport), after styling, as a image (vector).
Best would as SVG, PDF or ESP File.

Is there any way to include this extension?

[orangemug]

This sounds like a good candidate for another app that shares the same underlying datastore. Lets try and define what that might look like.

I guess we'd need

• options to set a bounding box area for export
• density (or size) of the output image

I'm guessing we could just grab the pixel buffer from the webgl context so the output would be a raster... although I haven't actually tried this.

[pjsier]

For PNG raster output, we can set options.preserveDrawingBuffer to true, and then map.getCanvas().toDataURL() to get the output. SVG is a bit harder, but I think I've seen implementations

[Messa1]

For me SVG or a vector format Interesting. PNG i can also create with a Screenshot :) I will donate for this extension for the online editor.

[orangemug]

So as far as I can see SVG support isn't possible at this time as there is no interface to do that in mapbox-gl-js. We could do a raster exporter but there doesn't seem to be any interest in that at this time.

@pjsier please include links if you know different regarding SVG output

[pjsier]

@orangemug The only implementation I've seen just gets the shapes, not the styles: https://github.com/hanbyul-here/svg-exporter

It's hypothetically doable to get the shapes as GeoJSON and then convert those to SVG, but you'd also have to translate the style spec to SVG styles. This probably isn't doable without a lot of effort, and even then there are some properties that likely wouldn't work

[orangemug]

Thanks @pjsier that's where I got to as well. I'll leave the issue open for a bit incase anybody is following along and wants a raster exporter. Else I'll close the issue in a week or so.

[nschlax-lumeris]

I'd love the ability to be able to export high-resolution raster images for the purpose of printing, and using in other design projects. Screenshots don't allow sufficient resolution.

[orangemug]

Thanks @nschlax-lumeris, I've reopened the issue.

If it's possible to outline an example use case, so what you'd be exporting and for what use. So are you wanting to print for the back of a menu in a restaurant or the side of a bus, that'd be very much appreciated. There are probably going to be limits on the size we can export so I'm keen to make something that initially serves at least one user (yourself). Although I think this would be generally useful and I want to print some maps too 😁

Oh also hi, and welcome to the Maputnik community. If you use Maputnik currently (and you have time), we'd love to hear what you use it for over in issue #164

[pathmapper]

I am also interested in this feature, my use case are large paper maps, up to a size of DIN A0 which is 841 × 1189 mm (33,11 x 46,81 inch) in 300dpi, portrait and landscape format.

There is a project under MIT which works very well for various existing basemap styles:
https://github.com/mpetroff/print-maps
https://printmaps.mpetroff.net/

Here is a fork which works also with custom Mapbox styles:
https://github.com/pkd2512/print-maps
http://prasantakrdutta.com/print-maps/

Important:
Tile providers do have different attribution requirements or restrictions for exporting png / printing maps, e.g.:
https://www.tilehosting.com/terms/
https://www.mapbox.com/help/how-static-maps-work/

[Messa1]

@pathmapper as i see if you export PDF you will not getting a vector graphic. I start the post, cause i need vector output not a PDF with an image in it.

[orangemug]

Thanks @pathmapper, especially for the links. Perhaps we could just submit a PR to one of those projects, add something like a 'Hash-Bang' url containing the style (less secure for private styles). Or a window.postMessage type arrangement. Alternatively we could just fork the project.

@Messa1 unfortunately vector isn't possible at this time. We'd have to create a brand new renderer, which is out of scope for this project and a lot of work. It's turned into a ticket for raster export, see @nschlax-lumeris comment.

I'd love the ability to be able to export high-resolution raster images...

Sorry we should probably have created a new ticket, but since all the comments are here now lets transition into raster exporter ticket.

[pathmapper]

@Messa1

export PDF you will not getting a vector graphic

True, but I understood that the vector export feature is currently out of scope, because there are no known implementations and this issue changed to high-resolution raster export with #180 (comment).

For that i can make a screenshot an use that

No, the print quality is far better with a high-resolution raster export (lets say 300dpi) compared to a printed screenshot.
Additionally, using a screenshot you are limited to the extend of the map which is visible on your screen.

@orangemug maybe open a new issue to keep vector and high-resolution raster export separated?

[Messa1]

@orangemug oky got it 👍 Its oky you can stay in this ticket, maybe the raster image export could help me also :) Cause at the moment i just export map and turn it in Illustrator to a vector image.

[orangemug]

Thanks @Messa1. If you have time please share what you're up to over in #164

[orangemug]

Right so I had a quick look at this. It look like the DPI settings in https://github.com/mpetroff/print-maps doesn't actually work, if I look at the info on OSX it displays '72 pixels/inch'.

If anyone has any idea how you'd achieve a higher DPI export. Or if I've got it completely wrong (more than likely) then please comment.

[pathmapper]

@orangemug I did a png export with 1 x 1 inch and 300 DPI using https://printmaps.mpetroff.net/ .

Opening the png with GIMP it shows also a resolution of 72 x 72 ppi, but for a print size of 105.83 x 105.83 mm which is roughly 4 inch.

The size in pixels is 300 x 300.

When setting the image print resolution to 300 ppi, the print size is 1 inch for width and height, so everything should be fine.

[orangemug]

@pathmapper so to clarify what you are saying is, ideally the DPI should be set in the metadata of the image file. However that doesn't really matter because the image has the correct amount of pixels.

[pathmapper]

@orangemug

the image has the correct amount of pixels

Yes, you have to take also the print size into account.

The png has enough pixels (300 x 300) to achieve a resolution of 300 ppi when printing in a size of 1 x 1 inch, which were the export settings.

It is also possible to print this image in a size of 10 x 10 inch, but then the resolution would be reduced to 30 ppi.

[orangemug]

I just created https://github.com/orangemug/mapbox-gl-to-blob which mostly does what we want. It's still a little buggy see mapparatus/mapbox-gl-to-blob#1 which looks like a mapbox-gl issue (not sure though).

Does anyone want to help investigate mapparatus/mapbox-gl-to-blob#1 ?

[orangemug]

@pathmapper getting pretty close with the raster exporter. You can now give it a try https://596-84182601-gh.circle-artifacts.com/0/artifacts/build/index.html and see the code master...orangemug:feature/export-raster

Give it a try let me know what you think. Press export and you'll see the new option.

[pathmapper]

@orangemug cool, looks great! I like the idea of the scaled preview.

I've played around with it, some remarks and thoughts:

• When opening the raster exporter, it would be good if the zoom level and center of the map is the same as in the editor.

• Make clear in raster exporter that "Latitude" and "Longitude" are referring to the center of the map. Maybe renaming them in "Latitude (center)" and "Longitude (center)" or adding a subheading "Center of the Map".

• With large values for "Height" the Scale factor is not entirely visible:
  

• When modifying the values for "Width" and "Height" sometimes the raster exporter crashes with the following error message:

Most important:

• It should be possible to add attribution to the exported image. Maybe link also to the print policies/ terms of use which are valid for the gallery styles available in Maputnik (Mapbox / Maptiler)?

• I think it shouldn't be possible to use the raster exporter with the fallback keys/tokens used in Maputnik and the user must enter an own key/token.
  By the way: Did you get a response regarding the Mapbox fallback token? Export to preview in Gist blocks.org Mapbox basemaps not displaying #230 (comment)

[orangemug]

Thanks @pathmapper

When opening the raster exporter, it would be good if the zoom level and center of the map is the same as in the editor.

This is due to scaling on the map canvas and the calculations happening in mapbox-gl-js I have a few work arounds in mind which I'll share shortly

Make clear in raster exporter that "Latitude" and "Longitude" are referring to the center of the map. Maybe renaming them in "Latitude (center)" and "Longitude (center)" or adding a subheading "Center of the Map".

That makes sense (fixed)

With large values for "Height" the Scale factor is not entirely visible:

Nice spot I will look into it (fixed)

When modifying the values for "Width" and "Height" sometimes the raster exporter crashes with the following error message:

Assuming out of memory, we might have to limit the canvas size initially and then move to rendering the style in sections

It should be possible to add attribution to the exported image. Maybe link also to the print policies/ terms of use which are valid for the gallery styles available in Maputnik (Mapbox / Maptiler)?

Maybe we should ask Maptiler for a endpoint we can hit. Something like /attribution/print.json that returns what we need to add. That way when/if they update their terms it just works

I think it shouldn't be possible to use the raster exporter with the fallback keys/tokens used in Maputnik and the user must enter an own key/token.
By the way: Did you get a response regarding the Mapbox fallback token? #230 (comment)

Agree I'll update

[gregwolanski]

This issue appears in the answers to question “What annoys you about Maputnik?” in the survey (original spelling):

• No .svg or .png export function

[Framer150]

Hi @orangemug,

Are you available for hire for a custom job?
I have been reading your comments and would love to get your insight in regards to a project I would like to do..

I tired going to your website but the link does not seem to be working, is there another way to contact you privately?

Thanks!
Chris

[orangemug]

@Framer150 can you DM me via twitter, I'm https://twitter.com/orangemugdev

[Ezgikay]

hey, I created a map on maputnik but I don't know anything about coding.. Can't I download my map as a jpeg/png/pdf...?