{"id":57,"date":"2018-06-14T14:43:01","date_gmt":"2018-06-14T14:43:01","guid":{"rendered":"https:\/\/embers.nicejacket.cc\/blog\/?p=57"},"modified":"2018-06-28T14:13:06","modified_gmt":"2018-06-28T14:13:06","slug":"making-large-maps-with-openseadragon","status":"publish","type":"post","link":"https:\/\/embers.nicejacket.cc\/blog\/2018\/06\/14\/making-large-maps-with-openseadragon\/","title":{"rendered":"Making Large Maps with OpenSeadragon"},"content":{"rendered":"<p>After <a href=\"https:\/\/www.reddit.com\/r\/worldbuilding\/comments\/8pbw19\/the_embers_a_lowmagic_grimdark_on_the_corpse_of_a\/\">posting<\/a> the first map in my campaign setting to <a href=\"https:\/\/www.reddit.com\/r\/worldbuilding\/\">r\/worldbuilding<\/a>, I had a few PMs asking after a more detailed guide to publishing maps that exceed the 8192px\u00b2 limit in Photoshop and Illustrator.<\/p>\n<p><!--more--><\/p>\n<p>First off, thanks to <a href=\"http:\/\/iangilman.com\/\">Ian Gilman<\/a> (<a href=\"https:\/\/www.reddit.com\/user\/iangilman\">u\/iangilman<\/a>), my meatspace friend and mentor; <a href=\"https:\/\/openseadragon.github.io\/\">OpenSeadragon<\/a> is his baby, and I might not have been able to do this without his help. He&#8217;s happy to assist with with technical questions.<\/p>\n<p>I use png format, as I noticed no lag in testing vs jpg, I&#8217;m picky about compression artifacts, and why not. The thing is a beast anyway. See my note about transparent layers at the end.<\/p>\n<h5>0. Required Tools<\/h5>\n<ul>\n<li><a href=\"http:\/\/www.imagemagick.org\/script\/index.php\">ImageMagick<\/a> &#8211; install<\/li>\n<li><a href=\"https:\/\/jcupitt.github.io\/libvips\/\">libvips<\/a> &#8211; install<\/li>\n<li><a href=\"https:\/\/openseadragon.github.io\/\">OpenSeadragon<\/a> &#8211; see below<\/li>\n<\/ul>\n<h5>1. Map Prep<\/h5>\n<p>My map is drawn over a grid of artboards (below). &#8220;Open ocean&#8221; \/ &#8220;blank&#8221; tiles can be repeated to fill in empty space, and items like map legends can be easily swapped in on tiles from other Illustrator files in this way.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-64\" src=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/artboard-grid-300x297.jpg\" alt=\"\" width=\"300\" height=\"297\" srcset=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/artboard-grid-300x297.jpg 300w, https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/artboard-grid-150x150.jpg 150w, https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/artboard-grid.jpg 400w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/p>\n<p>How many squares\/how detailed you need to be will depend, and will require trial and error (I started at 6000px\u00b2 per tile and worked down to 2000 before settling on 3000).<\/p>\n<p>You&#8217;ll note a tiny reference artboard off to the side. Illustrator limits to 100 artboards &#8211; my complete map (not shown below) is about 150 squares, which for me is only one &#8220;continent&#8221; &#8211; you may need a common cut &amp; paste anchor between files.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-63\" src=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/reference-artboard-300x297.jpg\" alt=\"\" width=\"300\" height=\"297\" srcset=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/reference-artboard-300x297.jpg 300w, https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/reference-artboard-150x150.jpg 150w, https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/reference-artboard.jpg 400w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/p>\n<p>Lastly, duplicate your text layers. There, select all, and go to Type &gt; Create Outlines. This is critical when using fonts not in ImageMagick&#8217;s font list, which you probably are. You can update that list manually; this is less work.<\/p>\n<p><em>Note:<\/em> Illustrator strips a couple pixels from the edge of each artboard, which seems unavoidable, so you do lose some artwork. I went to lengths to ensure that minimal text or other objects crossed artboards, to minimize damage.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-69\" src=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/clipped-pixels-300x162.jpg\" alt=\"\" width=\"300\" height=\"162\" srcset=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/clipped-pixels-300x162.jpg 300w, https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/clipped-pixels.jpg 400w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/p>\n<p><em>Photoshop:<\/em> Not as familiar with, but cursory googling implies you can use artboards similarly; I&#8217;m sure someone can comment on this in the thread.<\/p>\n<h5>2. Create SVGs<\/h5>\n<p>Once you have your artboards, go to File &gt; Save As, select SVG as the Save As Type, and check Use Artboards. An SVG Options menu will pop up. Hit OK.<\/p>\n<p><em>Photoshop: <\/em>I think that File &gt; Extract Assets will get you svg exports.<\/p>\n<h5>3. Convert to Image Files<\/h5>\n<p>You can skip this step if you have a perfect grid, but I needed to fill empty spaces with repeat tiles, and found being able to visualize them in their folder helpful.<\/p>\n<p>In the command line, navigate to the folder your svg tiles are in, and execute the below (adjust -size as desired). See <a href=\"http:\/\/www.imagemagick.org\/Usage\/basics\/#mogrify\">basics<\/a>, <a href=\"https:\/\/www.imagemagick.org\/script\/mogrify.php\">more details<\/a> on ImageMagick&#8217;s mogrify program:<\/p>\n<pre>$ mogrify -format png -size 3000x3000 *.svg<\/pre>\n<p>If you get &#8220;unable to read font&#8221; errors, you missed converting some font to objects; -verbose might help ID which tiles you missed.<\/p>\n<h5>4. Combine your PNGs<\/h5>\n<p>Once you&#8217;ve converted your svgs to pngs, fill in repeat tiles if necessary, and name your files sequentially.<\/p>\n<p>We&#8217;ll use ImageMagick&#8217;s <a href=\"https:\/\/www.imagemagick.org\/script\/montage.php\">montage<\/a> program next. <a href=\"https:\/\/deparkes.co.uk\/2015\/05\/01\/make-a-grid-of-images-with-imagemagick\/\">Here<\/a> is a good rundown of the options I used below. In the folder your pngs are in, execute:<\/p>\n<pre>$ montage -density -tile 8x0 -size 3000x3000 -geometry +0+0 -border 0 *.png output.png<\/pre>\n<p>The first number in -tile is the count of tiles across your map is; set -size to the size of your individual tiles. montage will begin with the first alphanumeric file of type *.png.<\/p>\n<h5>5. Compile a Deep Zoom Image (DZI)<\/h5>\n<p>For libvips to work, you need to navigate to the folder in which libvips lives, and run the following from there:<\/p>\n<pre>$ vips dzsave C:\\path\\to\\input.png youroutputname --suffix .png<\/pre>\n<p>This will output a folder and a .dzi file into the folder you execute from. You need both. By default, dzsave outputs jpg; &#8211;suffix gets you that high-res goodness.<\/p>\n<p>For those interested, <a href=\"https:\/\/github.com\/openseadragon\/openseadragon\/wiki\/The-DZI-File-Format\">here<\/a>&#8216;s a good writeup on the DZI format.<\/p>\n<h5>6. Build an OpenSeadragon Page<\/h5>\n<p>See <a href=\"https:\/\/threejs.org\/docs\/#manual\/introduction\/How-to-run-things-locally\">here<\/a> for details on running OpenSeadragon locally.<\/p>\n<p>Using the example from the OpenSeadragon <a href=\"https:\/\/openseadragon.github.io\/docs\/\">Getting Started<\/a> page, the simplest implementation is as follows:<\/p>\n<pre>&lt;div id=\"openseadragon1\" style=\"width: 800px; height: 600px;\"&gt;&lt;\/div&gt;\r\n\r\n&lt;script src=\"\/openseadragon\/openseadragon.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n  var viewer = OpenSeadragon({\r\n    id: \"openseadragon1\",\r\n    prefixUrl: \"\/openseadragon\/images\/\",\r\n    tileSources: \"\/path\/to\/my\/image.dzi\"\r\n  });\r\n&lt;\/script&gt;<\/pre>\n<p>Easy as that. Upload the following, your directory should look like this:<\/p>\n<pre>\/map.html\r\n\r\n\/openseadragon\/images\/\r\n\/openseadragon\/jquery.min.js\r\n\/openseadragon\/openseadragon.js\r\n\/openseadragon\/openseadragon.min.js\r\n\r\n\/dzi\/mapfiles\/\r\n\/dzi\/mapfile.dzi<\/pre>\n<h5>X. Note on Transparency<\/h5>\n<p>Working with transparent layers is a bit of a hassle. See <a href=\"http:\/\/embers.nicejacket.cc\/blog\/2018\/06\/16\/transparent-layers-for-openseadragon-with-libvips\/\">this post<\/a> for more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66\" src=\"https:\/\/embers.nicejacket.cc\/blog\/wp-content\/uploads\/2018\/06\/bee.png\" alt=\"\" width=\"30\" height=\"28\" \/><\/p>\n<p>I hope this was helpful. Please let me know if I missed something or if you know of other methods. I can&#8217;t wait to see what you come up with!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After posting the first map in my campaign setting to r\/worldbuilding, I had a few PMs asking after a more detailed guide to publishing maps that exceed the 8192px\u00b2 limit in Photoshop and Illustrator.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":10,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/embers.nicejacket.cc\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}