forked from cole-gillespie/StoryMapJS
-
Notifications
You must be signed in to change notification settings - Fork 1
/
gigapixel.html
144 lines (139 loc) · 8.25 KB
/
gigapixel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
{% extends "_base.html" %}
{% block title %}StoryMap for Gigapixel Images - {% endblock %}
{% block content %}
<style>
#storymap {
height: 600px;
width: 100%;
}
.modal {
width: 80%;
margin-left:-40%; /* width/2) */
}
</style>
<div class="container">
<div class="row-fluid">
<div class="span12">
<h3>StoryMap for Images</h3>
<p>
You can use StoryMap to tell stories about photography or art, or to show a journey on a historic map. Learn more <a href="#how-to-gigapixel">below the example</a>.
</p>
<div id="storymap"></div>
<!-- JavaScript-->
<script>
var storymap = new VCO.StoryMap('storymap', '{{ STATIC_URL }}demo/seurat.json', {
map_type: "zoomify",
map_background_color: "#333",
map_as_image: true,
calculate_zoom: false,
zoomify: {
path: "http://cdn.verite.co/maps/zoomify/seurat/",
width: 30000,
height: 19970,
tolerance: 0.9,
attribution: "<a href='http://www.google.com/culturalinstitute/asset-viewer/a-sunday-on-la-grande-jatte-1884/twGyqq52R-lYpA?projectId=art-project' target='_blank'>Google Art Project</a>"
}
});
window.onresize = function(event) {
storymap.updateDisplay();
}
</script>
</div>
<div class="span12" id="how-to-gigapixel">
<h3>How do I make one?</h3>
<p>
To begin, you need a large image. It doesn't actually need to be a <a href="http://en.wikipedia.org/wiki/Gigapixel_image">gigapixel</a> image, but images you take with your phone won't be big enough to be interesting. You need to know the image width and height in pixels as part of starting a gigapixel StoryMap.
</p>
<p>
Once you have a large image, you need to export it as tiles. Windows and Mac users can use the <a href="http://www.zoomify.com/express.htm">Zoomify Express</a> app. Or, if you have Photoshop, you can use its "Zoomify" export feature. <a href="#zoomify-export" data-toggle="modal">(show me how)</a> More technically-minded users can use command-line tools such as <a href="http://sourceforge.net/projects/zoomifyimage/">ZoomifyImage</a> or <a href="http://libvips.blogspot.com/2013/03/making-deepzoom-zoomify-and-google-maps.html">VIPS</a>.
</p>
<p>
When you have your image tiles, you need to put them on a web server. If you don't have a webserver, you can use <a href="https://drive.google.com/">Google Drive</a> or <a href="http://dropbox.com/">Dropbox</a>. You need the base url for your exported image tiles when you start making your gigapixel StoryMap. <a href="#serving-your-tiles" data-toggle="modal">(show me how)</a>
</p>
<p>
When you've got your image tiles up on a server, <a href="{{ url_for('select') }}">go to make a new StoryMap</a> and choose the "gigapixel" button. (<i class="vco-icon-image icon-button"></i>). Give your new project a name and enter the base url and image width and height mentioned above, and you're ready to tell your gigapixel story.
</p>
</div>
</div>
<div id="zoomify-export" class="modal hide fade" data-keyboard="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Zoomify help</h3>
</div>
<div class="modal-body">
<img src="{{ STATIC_URL }}img/zoomify-tutorial-image-size.png" style="float:right;">
<ol>
<li>Open your image in Adobe Photoshop</li>
<li>Note the pixel dimensions of your image:
<ol>
<li>From the <strong>Image</strong> menu, choose <strong>Image Size</strong></li>
<li>If the dimensions aren't in pixels, use the menu next to "Dimensions:" to set it to pixels. </li>
<li>Make a note of the dimensions: the first number is width, the second is height.</li>
</ol>
</li>
<li>From the <strong>File</strong> menu choose <strong>Export > Zoomify.</strong></li>
<li>Set the output folder and click OK. Take note of (or edit) the "Base Name". Photoshop will create a folder with that name in your output folder. Later, you'll need to put that "Base Name" folder on a <a href="#serving-your-tiles" data-toggle="modal">web server</a>.</li>
<li>After you click OK, Photoshop will open a page in your browser showing your Zoomify export. You can ignore this.</li>
</ol>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
</div>
</div>
<div id="serving-your-tiles" class="modal hide fade" data-keyboard="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Serving your tiles</h3>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#serve-with-google-drive">Google Drive</a>
</li>
<li><a data-toggle="tab" href="#serve-with-new-google-drive">New Google Drive</a></li>
<li><a data-toggle="tab" href="#serve-with-dropbox">Dropbox</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="serve-with-google-drive">
<img src="{{ STATIC_URL }}img/zoomify-tutorial-gdrive-show-details.png" style="float:right;">
<ol>
<li>Upload the entire folder (from step 4 above) to your Google Drive.</li>
<li>After selecting your uploaded folder, choose "Details and activity" from the "More" menu.</li>
<li>In the "Details" tab, click the pencil icon next to "sharing."</li>
<li>Under "Who has access," change the setting to "public on the web" and click "Done".</li>
<li>Now on the "Details" tab you'll see a section labeled "Hosting." (You may need to wait a moment or reload the page.) Copy the entire URL. You'll need it when you start your StoryMap. <strong>Note:</strong> some of the URL may not be visible. It may be easiest to click on it, and then copy the URL from your browser address bar.</li>
</ol>
<p><strong>Another note:</strong> once you've done this, you can move the folder around in your Google Drive. You won't need to repeat this step. The "hosting" URL will not change.</p>
</div>
<div class="tab-pane" id="serve-with-new-google-drive">
<img src="{{ STATIC_URL }}img/zoomify-tutorial-ngdrive-show-details.png" style="float:right;">
<ol>
<li>Upload the entire folder (from step 4 above) to your Google Drive.</li>
<li>Right click the folder and select "Share...".</li>
<li>Change to "Anyone on the internet can find and view" and click "Done".</li>
<li>Right click the folder again and select "Get link". Copy the entire URL. You'll need it when you start your StoryMap.</li>
</ol>
<p><strong>Note:</strong> once you've done this, you can move the folder around in your Google Drive. You won't need to repeat this step. The "hosting" URL will not change.</p>
</div>
<div class="tab-pane" id="serve-with-dropbox">
<img src="{{ STATIC_URL }}img/zoomify-tutorial-db_copy_public_link.png" style="float:right;">
<ol>
<li>Upload the entire folder (from step 4 above) <strong>to your DropBox <em>public</em> folder</strong>.</li>
<li>In the folder you uploaded, there should be a file named <strong><code>ImageProperties.xml</code></strong>. Right-click on it to copy its public link.</li>
<li>Paste that link somewhere for a minute, and delete the "ImageProperties.xml" part of the URL. For example:
<br>copied: <code>https://dl.dropboxusercontent.com/u/2653407/folder_name/ImageProperties.xml</code>
<br>edited: <code>https://dl.dropboxusercontent.com/u/2653407/folder_name/</code>
</li>
<li>
Keep track of the edited URL. You'll need it when you start your StoryMap.
</li>
</ol>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
</div>
</div>
</div>
{% endblock %}