Generate PDF Button

Put a “Generate PDF” button next to any map on your site. One script tag, no build step, no dependencies. Your visitors get a printable, cut-and-assemble PDF of your map.

Available on Co-Brand and Whitelabel commercial licences, under our Terms of Service. The button opens the Paper Map Generator in a new tab, hands the image over directly from your visitor's browser, and the PDF is generated and downloaded there — your maps are never stored on our servers. See the Privacy Policy for what is processed.

Quick start

Add a container where the button should appear, then load the script:

<div id="pdf-button"></div>

<script
  src="https://js.arkanatools.com/pdf-button/v1.js"
  data-arkanatools-id="YOUR-ACCOUNT-UUID"
  data-image-selector="#my-map-image"
></script>

That's it. Two things you must get right:

• data-arkanatools-id — your Arkana account UUID, from your commercial licence.
• data-image-selector — a CSS selector matching the <img> of the map.

Try it

A real map, a real button — exactly the integration shown above.

The live demo is not configured on this copy of the documentation.

Options

All configuration is data-* attributes on the script tag.

Map scale

Get this right and a printed square lines up with a miniature's base. Get it wrong and the whole map prints too large or too small, across the wrong number of pages.

The generator needs to know how big your map is in the real world. You can say that in tiles or in inches — whichever you actually know.

In tiles (usually what you want)

Tiles are the grid squares or hexes players count movement across. If your map is 70 squares wide and 48 tall:

data-settings-map-tiles="70x48"

Tiles are assumed to print at 1 inch each, the standard for tabletop battlemaps. If yours are a different size — 1.5″ hexes, or 25 mm squares (0.98″) — say so:

data-settings-map-tiles="70x48"
data-settings-tile-size="1.5"   <!-- inches per tile -->

In inches

If you know the finished printed size instead, give that directly:

data-settings-map-size="70x48"   <!-- inches -->

Or in the filename

With no settings at all, the generator looks for a WIDTHxHEIGHT token in the image filename and reads it as inches — harbin-westers-home-70x48.webp is a 70×48 inch map. Convenient if your library is already named that way, and it needs no configuration.

Map settings

Optionally control how the PDF is generated with data-settings-* attributes. Anything you leave out keeps the generator's default, and an unrecognised value is ignored rather than breaking generation.

Example

<script
  src="https://js.arkanatools.com/pdf-button/v1.js"
  data-arkanatools-id="YOUR-ACCOUNT-UUID"
  data-image-selector="#my-map-image"
  data-settings-grid-type="hexagon"
  data-settings-paper-size="letter"
  data-settings-backside-numbers="true"
  data-settings-commercial-logo="https://your-site.com/logo.png"
></script>

Styling

The button ships looking like an Arkana Tools button. Its typography inherits from your page, so it picks up your font automatically. There are three levels of control.

1. Retint it

Override the custom properties. Keeps the shape and interactions, in your colours:

Copy the result straight into your stylesheet:

.arkana-pdf-button {
  --arkana-btn-bg-top: #9E0B0F;
  --arkana-btn-bg-bottom: #E61720;
  --arkana-btn-border: #E61720;
  --arkana-btn-color: #CCCDD2;
  --arkana-btn-radius: 6px;
}

2. Style it from scratch Whitelabel only

On Whitelabel, add data-style="none" and no stylesheet of ours is loaded at all — you get a plain <button class="arkana-pdf-button"> with no styling to fight:

<script
  src="https://js.arkanatools.com/pdf-button/v1.js"
  data-arkanatools-id="YOUR-ACCOUNT-UUID"
  data-image-selector="#my-map-image"
  data-style="none"
></script>

<style>
  .arkana-pdf-button { /* entirely your design system */ }
</style>

3. States you should style

The button disables itself while a PDF is being prepared and re-enables when the tab responds, so style :disabled — otherwise a working button looks broken.

JavaScript API

If your map is not a plain <img> — it is drawn on a canvas, or fetched dynamically — hand the bytes over yourself instead of using data-image-selector:

window.PDFButton.setImage(arrayBuffer, 'my-map-30x30.jpg', width, height);

The filename still carries the map scale, so pass a real one. Call this before the visitor clicks; the button reads it at click time.

Image requirements

In practice this only bites if you serve maps from a separate image CDN or a different subdomain. If so, enable CORS there. The button will tell you in the browser console when this is the problem.

Formats: PNG, JPEG, WebP and GIF. The original file is sent as-is, so there is no quality loss from re-encoding.

Troubleshooting

Versioning

The v1 in the URL is a promise: we ship fixes and new settings to it, but never a change that breaks a page already using it. If we ever need to break something it becomes v2.js at a new URL, and v1.js keeps working.

So pin the version — use /pdf-button/v1.js exactly as shown. You never need to update it to receive fixes.

Need help? support@arkanatools.com
Use of this button is governed by our Terms of Service and Privacy Policy.