Write Scale and Attribution directly into PDF or PNG

[roblabs]

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)