-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.html
191 lines (180 loc) · 7.69 KB
/
index.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Print Maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Print Maps</h1>
<p class="lead">High-resolution maps in the browser, for printing.</p>
</div>
<noscript>
<div class="alert alert-danger" role="alert">
This site requires JavaScript to function, but it seems to be disabled in your browser.
</div>
</noscript>
<form onsubmit="generateMap(); return false;" id="config">
<fieldset id="config-fields">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Unit</label><br>
<label class="radio-inline">
<input type="radio" name="unitOptions" value="in" id="inUnit" checked> Inch
</label>
<label class="radio-inline">
<input type="radio" name="unitOptions" value="mm" id="mmUnit"> Millimeter
</label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Output format</label><br>
<label class="radio-inline">
<input type="radio" name="outputOptions" value="png" checked> PNG
</label>
<label class="radio-inline">
<input type="radio" name="outputOptions" value="pdf"> PDF
</label>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="styleSelect">Map style</label>
<select id="styleSelect" class="form-control">
<option value="mapbox://styles/mapbox/bright-v9">Mapbox Bright</option>
<option value="mapbox://styles/mapbox/outdoors-v10">Mapbox Outdoors</option>
<option value="mapbox://styles/mapbox/emerald-v8">Mapbox Emerald</option>
<option value="mapbox://styles/mapbox/light-v9">Mapbox Light</option>
<option value="mapbox://styles/mapbox/streets-v10">Mapbox Streets</option>
<option value="https://tiles.stadiamaps.com/styles/alidade_smooth.json">Stadia Maps Alidade Smooth</option>
<option value="https://tiles.stadiamaps.com/styles/alidade_smooth_dark.json">Stadia Maps Alidade Smooth Dark</option>
<option value="https://tiles.stadiamaps.com/styles/outdoors.json">Stadia Maps Outdoors</option>
<option value="https://tiles.stadiamaps.com/styles/osm_bright.json">Stadia Maps OSM Bright</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group" id="widthGroup">
<label for="widthInput">Width</label>
<input type="text" class="form-control" id="widthInput" autocomplete="off" value="8">
</div>
</div>
<div class="col-sm-2">
<div class="form-group" id="heightGroup">
<label for="heightInput">Height</label>
<input type="text" class="form-control" id="heightInput" autocomplete="off" value="6">
</div>
</div>
<div class="col-sm-3">
<div class="form-group" id="dpiGroup">
<label for="dpiInput">DPI</label>
<input type="text" class="form-control" id="dpiInput" autocomplete="off" value="300">
</div>
</div>
<div class="col-sm-5">
<div class="row">
<div class="col-sm-4">
<div class="form-group" id="latGroup">
<label for="latInput">Latitude</label>
<input type="text" class="form-control" id="latInput" autocomplete="off" value="">
</div>
</div>
<div class="col-sm-4">
<div class="form-group" id="lonGroup">
<label for="lonInput">Longitude</label>
<input type="text" class="form-control" id="lonInput" autocomplete="off" value="">
</div>
</div>
<div class="col-sm-4">
<div class="form-group" id="zoomGroup">
<label for="zoomInput">Zoom</label>
<input type="text" class="form-control" id="zoomInput" autocomplete="off" value="">
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<div class="alert alert-danger" role="alert" id="error-message"></div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Map</h3>
</div>
<div class="panel-body map-container">
<div id="map"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Required Attribution</h3>
</div>
<div class="panel-body" id="mapbox-attribution" style="display: none;">
<p><strong>Attribution of maps is required.</strong> Per the <a href="https://www.mapbox.com/help/how-attribution-works/#static--print">Mapbox attribution requirements:</a></p>
<p>Static and print maps need to be attributed in the same fashion as you would cite a photograph: in a textual description near the image.</p>
<p>If you can include HTML, use this code snippet that includes links to Mapbox & OpenStreetMap:</p>
<pre>© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong></pre>
<p>For print output or if you can’t include links, use this text-only attribution:</p>
<pre>© Mapbox, © OpenStreetMap</pre>
</div>
<div class="panel-body" id="stadiamaps-attribution" style="display: none;">
<p><strong>Attribution of maps is required.</strong> See the Stadia Maps <a href="https://stadiamaps.com/attribution/">attribution</a> and <a href="https://stadiamaps.com/terms-of-service/">terms of service</a> pages for details.</p>
<p><strong>Commerical use is prohibited.</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary btn-lg" id="generate-btn">Generate Map</button>
<div id="spinner"></div>
</div>
</div>
<!-- Error Modal -->
<div class="modal in" id="errorModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeErrorModal()"><span>×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Print Maps Error</h4>
</div>
<div class="modal-body">
<p id="modal-error-text"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="closeErrorModal()">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop in" id="modalBackdrop" style="display: none;"></div>
<hr>
<footer>
<p>
Print Maps is a project by <a href="//mpetroff.net/">Matthew Petroff</a>.
The code behind this site is available on <a href="https://github.com/mpetroff/print-maps">GitHub</a>.
</p>
</footer>
</div>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/canvas-toblob/0.1/canvas-toBlob.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/FileSaver.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/dist/jspdf.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>