mpetroff/print-maps

High-resolution maps in the browser, for printing

print-maps's Issues

Increase maximum image dimension

Hi again! ^^

I get the following error when i try to generate a large image

The maximum image dimension is 16384px

Is there a way to go beyond that ?

Handling of attribution to adhere to TOS for Tile Companies

Issue — How to include attribution

Potential Solutions

1. Include basic attribution notes in COPYING or TOS for print-maps, and include in the footer of index.html
2. When downloading map.png or map.pdf, also download COPYING which has the modifications that suggests to include proper attribution. For example, sites such as CodePen.io and Mapbox.com download a license when you down load a zip package from your account.
3. Optionally write attributions to the canvas. Change the UI to have a toggle.

Writing the Map canvas to PNG is handled in here

print-maps/js/script.js

Line 360 in 8c50e7c

renderMap.getCanvas().toBlob(function(blob) {

---

Tile Companies and their Terms

Mapbox

• https://www.mapbox.com/help/how-attribution-works/

Static and print maps need to be attributed in the same fashion as you would cite a photograph: in a textual description near the image.

Mapzen

• https://mapzen.com/rights/

If you are using any of Mapzen services, you should use the following attribution statement: © Mapzen, OpenStreetMap, and others

Klokantech

• https://openmaptiles.com/terms/

For printed maps, images or video recording a similar attribution should be made in a clearly visible textual description near the map, in the same fashion as if you cite a photograph.

Empty exports

Hi, thanks for your great work. It looks like it's exactly the tool I need right now.
Unfortunately my exports are always empty. It doesn't matter if PNG or PDF and it's also the same if I try to export an image from your demo @ https://printmaps.mpetroff.net/ (I'm running on macOS Mojave 10.14).

Do you have an idea?

Crashes on Chrome in Android and FireFox on Android

Unfortunately executing the code causes a crash in Chrome and FireFox on Android. What causes the crash is the drawing of the canvas when a new mapboxgl map is instantiated (renderMap).

I attempted a workaround by creating a renderMap prior to print time but the resize() function which is needed to redraw the canvas representing the new dimensions and the dpi results in a crash as well. Also FireFox on Android could not detect when the renderMap had finished drawing by using either on load or on idle events. This would cause the process to hang.

I also experimented with changing the default size of the canvas built into mapboxgl.js (400 X 300 respectively) to see if I could start out with a large size and circumvent calling resize() on the renderMap but the dpi cannot be updated this way. Setting the device pixel ratio (to 300) prior to creating the renderMap results in a crash as well. Using the html2canvas plugin on the canvas resulted in a crash on Android too.

I don't mean to deviate but I also used the leaflet-image plugin(which uses nothing but pngs from tilelayers) with your application format and the print process doesn't crash on Android except when the dimensions get very large. But as you probably well know rasters can take hours if not days to generate and take up excessive amounts of storage and are not always easy to work with.

Let me know if you have any ideas on potential solutions. Thanks again for the plugin. It works great on the desktop.

High DPI Images

Is there a possibility to scale down the Map windows (While still sing big sizes 3000x4000PX at the export). I am trying to make a 300DPI export for the poster print?

Navigation control position

Hello! script.js contains code, which supposed to set up position for zoom buttons. However the code below does not works.

    map.addControl(new mapboxgl.NavigationControl({
        position: 'top-left'
    }));

Consider to switch to the following instead:

map.addControl(new mapboxgl.NavigationControl(), "top-left");

PDFs are ANSI A (letter) dimensions regardless of width and height entered

Exported a few PDFs and I noticed that they all are sized at ANSI A 8.5x11" (letter). This line of code may be to blame. It looks like there are only a few options for the paper size in the jsPDF spec, though it appears you can specificy a custom size in this case.

Here are a few example PDFs where the filename was the input values in inches.

Changing to millimeter mode switches the output paper size to A4.

Question on Copyright

If I don't use the mapstyle feature and use my own maps created with mapboxgl js do I need to purchase a plan? I essentially just want to use the print features of the tool without the mapstyle component (which I can remove on my own).

Exporting custom styles

This is a great tool. Could instructions be included on how to export your own style in addition to the standard Mapbox styles?

For example, if my style is: mapbox://styles/testuser/ciyb84q3s000q2sqlyr5bz53u

What should I change in the code to export it?

Map window "bounce" when zooming in

Here is a screencast of an odd behavior when zooming in.

Chrome Version 40.0.2214.111 m
Windows 7 x64

Implementing DIN sizes and a Bounding Box

Hi,

first off all thank you guys for the amazing work with print maps.

I would like to use presets for different print sizes (DIN A4, A3, A2, A1 and like in the offical version an option with mm, I don't need the inch). How do I manage this?

Also I changed the canvas size of the mapbox map to 93vw (93% of the viewport width) because I would like to always show the full size map but if a user is going to pick a print size I would like to load a boundingbox which is showing the actual area which is going to get printed. Is this possible?

Cheers

Map corners don't completely render (satellite layer)

Sometimes the map's corners don't render completely when using a satellite layer. It's a sporadic behavior and during each map generation the result seems to be different. The squares that appear as lighter colored correspond directly with the Mapbox tiles.

I've tried applying timer delays to the various steps in createPrintMap->renderMap.once, but it doesn't seem to have any effect. Maybe a WebGL issue?

Any help appreciated, thanks!

Preview images powered by expressions are not yet supported by the Static API and may not render correctly.

123

Increase max width and height

Trying to figure out how to change the max-width to 5906px and the max-height to 8268px. Any tips on how to proceed?

Double Click to Zoom Selects the Copyright Character

Minor I noticed that while zooming in, the ©️ Mapbox character is selected when double clicking the map to zoom.

printing with details without zooming

Hi,
it will be very nice to be able to printing with details for instance of zoomlevel 12 when the view is at zoomlevel 11 so that we can have a larger coverage but with good details and resolution.

As manual alternative i'll have to generate separate adjacent images and then join them together with an editting software, but it'll be amazing to be able to do it right away.

404 for element causing chrome to spin

I noticed that the site seems to be continuously loading. I inspected the element in Chrome (Version 40.0.2214.111 m) and this page appears to be 404 on my browser.

Question on using for Leaflet

I know there's probably not an easy answer, but I thought I would ask anyway. Is there a way to use this tool for leaflet instead of mapbox-gl?

I have no trouble bringing the map into the panel-body map-container. I have issues when I try to export the map to png or pdf in the createPrintMap function. Here's what I got so far:

function createPrintMap(width, height, dpi, format, unit, zoom, center){
    // bearing, style, pitch) { //Remove bearing,style, and pitch for leaflet;

    // Calculate pixel ratio
    var actualPixelRatio = window.devicePixelRatio;
    Object.defineProperty(window, 'devicePixelRatio', {
        get: function() {return dpi / 96}
    });

    // Create map container
    var hidden = document.createElement('div');
    hidden.className = 'hidden-map';
    document.body.appendChild(hidden);
    var container = document.createElement('div');
    container.style.width = toPixels(width);
    container.style.height = toPixels(height);
    hidden.appendChild(container);
    container.id = 'myContainer'
    
    var renderMap = L.map(container,{preferCanvas:true}).setView([51.505, -0.09], 13);
    L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(renderMap);

    // Render map
    // var renderMap = new mapboxgl.Map({
    //     container: container,
    //     // center: center,
    //     // zoom: zoom,
    //     // style: style,
    //     // bearing: bearing,
    //     // pitch: pitch,
    //     // interactive: false,
    //     // attributionControl: false
    // });
    setTimeout(function(){
        html2canvas(document.getElementById('myContainer'), {
        allowTaint:false,
        useCORS: true,
    }).then(canvas => {
        canvas.toBlob((blob) => {
            saveAs(blob, "my-map.png");
        });
    });
}, 3000);

The png downloads but only shows the very bottom of the map at the top of the screen. If I shrink the browser screen to 25% I get a complete (but shrunken) image. I know this tool was made for mapbox-gl but I thought I would ask anyway to see if you had approached this challenge with Leaflet in the past. I know this is a question and not an issue. Thanks for your time.

Write Scale and Attribution directly into PDF or PNG

Following up on use and attribution of downloaded maps —  cf. #12, Handling of attribution to adhere to TOS for Tile Companies

Documenting some research into what it takes to directly write the attribution and scale into the PDF or PNG file. This work would need to planned out with a proper amount of use and test cases.

Example of Map Attribution and Scale in Mapbox GL JS

---

Research

Attribution

• How to write attribution into PDF.

• Done — see an example on how to write an attribution to a US Letter sized PDF, 36c4726
• Get the Attribution by accessing the class where its held in Mapbox GL JS
  • Then access the data with attrib.innerText or attrib.innerHTML
• The class is called mapboxgl-ctrl-attrib

Example,

var attrib = window.document.getElementsByClassName("mapboxgl-ctrl-attrib")[0];
console.log(attrib.innerText)
© 𝘦 π Maps | © USGS | Wilderness.net | © OpenMapTiles © OpenStreetMap contributors

Scale

• How to write scale directly into PDF

• The scale takes a bit more work as you need to make use of two numbers.
  • The width of the scale control in pixels, e.g., width: 77.82px;
  • convert using device dependent pixels using Media Queries, cf. W3C Units
  • The physical measurement , e.g, 1000ft
  • Write the measurement to the PDF similar to how the attribution was done
• The class is called mapboxgl-ctrl-scale

var scale = window.document.getElementsByClassName("mapboxgl-ctrl-scale")[0];
console.log(scale)
<div class="mapboxgl-ctrl mapboxgl-ctrl-scale" style="width: 77.82px;">1000ft</div>

Writing directly into PDF

• jsPDF has two examples that show how to write text.

doc.text()

• Position of where to write is dependent on landscape vs. portrait of PDF
• Text can be right aligned. Need to verify if HTML links are preserved in written PDF
• Example, doc.text(200, 100, attrib, null, null, 'right'); // units are mm

doc.fromHTML()

pdf.fromHTML(attrib, 150, 210); // units are mm

• Issue is how to compute the proper x dimension of wheres to start writing the attribution.
• In this example, a guess was chosen and would need to iterate on final position. As you can see the final words are cut off.
• Unicode is not supported, so ignore the garbled symbols 𝘦 π Maps, they didn't make it into the final PDF.

---

PNG Research

• Would need to write directly into the canvas
• Projects that may be useful
  • https://github.com/niklasvh/html2canvas
  • https://github.com/cburgmer/rasterizeHTML.js
  • https://github.com/tsayen/dom-to-image (thanks to @chiefkleef for gist and tip)

map.remove() doesn't remove the map

First things first, this is such a useful tool. Thank you thank you thank you.

Did you have a problem getting renderMap.remove(); to actually remove renderMap? I have created an application that depends on a few versions of the same map (a display version, a print map version that opens when a modal is activated, and then the hidden map to generate the png/pdf). I call .remove(); on the print map when the modal is closed. This function successfully removes all of the print map DOM elements so from the way it looks on the screen and in the Elements view in Chrome inspector, the old print map is gone. But when I open the print map modal again to generate a new renderMap, all of my previous print maps reappear.

I'm also getting a ton of Error: Error at Actor.receive (actor.js:69) but nothing in the actor.js explains what this error is about.

Did you have trouble with this when you built print-maps?

Layer via mapboxgl.Map.addLayer() in rendered image missing

Hi, this is great, but it doesn't seem to work with custom layers (e.g. GeoJSON information) on top of the map. Do you have any idea how to get a print of both the base layer map and one or more overlays?
I can't explain why that would be the case?! Somehow the data/layer must be in the canvas object, but the layers don't seem to be considered while exporting?

Btw. it also doesn't work without your tooling by grabbing the image from the canvas via toDataURL.

IE 11 prints PDF when PNG is selected

When using IE 11 and your test page when picking to print PNG a pdf is created instead. The PDF that is created is also not sized correctly. When zoomed to 100% it looks like a thumbnail print. You have to zoom to 1900%+ to get it close to the size it was on screen.

Thoughts

Change rendermap.once event to idle

Related to #21 if you have transitions in your style they might not yet finished rendering when map.on('load') gets called, resulting in incomplete renders. using map.on('idle') fixes this.

Happens here: https://github.com/mpetroff/print-maps/blob/master/js/script.js#L434