opened
roblabs
username_0
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

<img width="720" alt="dom" src="https://user-images.githubusercontent.com/118112/33534642-a4265caa-d85d-11e7-9546-d8df0f966532.png">

--- 
## Research 

### Attribution
- [ ] How to write attribution into PDF
* 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,

``` javascript
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](https://www.w3.org/Style/Examples/007/units.en.html)
  * 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`

``` javascript
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](http://rawgit.com/MrRio/jsPDF/master/) 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. 

<img width="465" alt="pdf" src="https://user-images.githubusercontent.com/118112/33534682-ed9c7658-d85d-11e7-8874-ed97874c14a8.png">


---

### 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
Write Scale and Attribution directly into PDF or PNG
issue