-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (271 loc) · 24.7 KB
/
index.html
File metadata and controls
304 lines (271 loc) · 24.7 KB
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!--
PROJECTION WIZARD v2.1
Map Projection Selection Tool
Author: Bojan Savric, Jacob Wasilkowski
Date: November, 2024
-->
<!DOCTYPE html>
<html>
<head>
<title>Projection Wizard</title>
<!--JQUERY-UI-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<!--Leaflet AND Leaflet.PM for editing -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.pm@2.1.0/dist/leaflet.pm.css" />
<!-- <script src="https://unpkg.com/leaflet.pm@2.1.0/dist/leaflet.pm.min.js"></script> -->
<!-- until https://github.com/codeofsumit/leaflet.pm/pull/464 is merged -->
<script src="lib/leaflet.pm.min.js"></script>
<!--D3-->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo-projection@4"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo-polygon@1"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<script src="lib/transverseCylindricalEqualArea.js" ></script>
<meta charset="utf-8" />
<meta name="description" content="Projection Wizard is a web application that helps cartographers select an appropriate projection for their map. Depending on the extent and the distortion property of the map, the application returns a list of appropriate map projections with additional projection parameters if necessary. The Projection Wizard is based on John P. Snyder’s selection guideline and on the extension to this guideline for world and hemisphere maps written by the Cartography and Geovisualization Group at Oregon State University. If available, there is a PROJ.4 link next to each proposed projection that opens a popup window with a PROJ.4 library code available for copying to the clipboard. The Projection Wizard displays a map preview on the right side of the list with appropriate projections. The preview shows how the projected data will look. The map preview is created using D3. How to choose a map projection? What map projection should I use? How to select an appropriate map projection?" />
<meta name="keywords" content="Projection Wizard, Map Projection Selection Tool, choose a map projection, " />
<meta name="author" content="Bojan Šavrič">
<link rel="stylesheet" href="page.css" />
<script src="map.js" ></script>
<script src="DDvsDMSconverter.js" ></script>
<script src="outputFormat.js" ></script>
<script src="previewMap.js" ></script>
<!--ICON-->
<link href="figures/favicon-32x32.png" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div id="container">
<div id="inputUIarea">
<img id="settings" src="figures/opts.png" height="22" align="left" title="Customize">
<div id="options_dialog" class="dialogtext" title="Projection Wizard Options">
<fieldset>
<legend><h4> Angular units format </h4></legend>
<form id="ang_format">
<div id="ang_ops">
<input type="radio" name="ang_format" id="DMS" value="DMS" checked="checked" />
<label for="DMS"> 44° 30' 15'' W </label>
<input type="radio" name="ang_format" id="DD" value="DD"/>
<label for="DD"> –44.754305°<br></label>
</div>
</form>
</fieldset>
<fieldset>
<legend><h4> Output </h4></legend>
<div id="check_ops">
<label>
<input type="checkbox" id="roundCM" name="roundCM" />
Round the central meridian value
</label>
</div>
<p>Geographic coordinates:
<select id="datum">
<option value="WGS84" selected>WGS84</option>
<option value="ETRS89">ETRS89</option>
<option value="NAD83">NAD83</option>
</select>
</p>
<p>Linear units:
<select id="unit">
<option value="m" selected>Meter</option>
<option value="ft">Intl. Foot</option>
</select>
</p>
</fieldset>
<fieldset>
<legend><h4> Preview map </h4></legend>
<div id="check_ops">
<input type="checkbox" id="showEextent" name="showEextent" />
<label for="showEextent">Show geographic extent</label>
</div>
<div>
<input type="checkbox" id="showCenter" name="showCenter" />
<label for="showCenter">Show projection's origin point(s)</label>
</div>
</fieldset>
</div>
<img id="help" src="figures/help.png" height="22" align="left" title="Help">
<div id="dialog" class="dialogtext" title="Projection Wizard">
<img src="figures/CartoLogo.png" align="right">
<h3>About this Tool</h3>
<p><i>Projection Wizard</i> is a web application that helps cartographers select an appropriate projection for their map. Depending on the extent and the distortion property of the map, the application returns a list of proposed map projections with additional projection parameters if necessary. There are PROJ and WKT links next to each projection that open a popup window with a <a target="_blank" href="https://proj.org/">PROJ</a> or <a target="_blank" href="http://docs.opengeospatial.org/is/12-063r5/12-063r5.html">Well-Known Text</a> string available for copying to the clipboard. Both strings are used in many cartographic and GIS applications. <i>Projection Wizard</i> displays a map preview on the right side of the list with a suggested projection. The preview shows how the projected data will look using <a target="_blank" href="http://d3js.org/">D3</a>.</p>
<p>This tool is based on <a target="_blank" href="https://doi.org/10.3133/pp1395">John P. Snyder’s selection guideline</a> and on <a target="_blank" href="https://link.springer.com/chapter/10.1007/978-3-319-51835-0_9">the extension to this guideline for world and hemisphere maps</a> written by the Cartography and Geovisualization Group at Oregon State University. <i>Projection Wizard v2.0</i> also takes into account the results of a study published by <a target="_blank" href="https://www.tandfonline.com/doi/full/10.1080/15230406.2015.1014425">Šavrič <i>et al</i>. in 2015</a>. All publications related to <i>Projection Wizard</i> are listed at the bottom of this page.</p>
<p>When you publish a scholarly article that uses <i>Projection Wizard</i> or discusses its functionality, you are kindly asked to cite the following article: Šavrič, B., Jenny, B. and Jenny, H. (2016). Projection Wizard – An online map projection selection tool. The Cartographic Journal, 53–2, p. 177–185. Doi: <a target="_blank" href="http://dx.doi.org/10.1080/00087041.2015.1131938">10.1080/00087041.2015.1131938</a>.</p><br>
<h3>How to Use this Tool?</h3>
<p>Using <i>Projection Wizard</i> is easy and requires only two steps:</p>
<p><span class="step-circle">1</span> From the radio button list, select the distortion property of the map.</p>
<p><span class="step-circle">2</span> Select the geographic extent by using the input boxes on the left side of the map or by changing the rectangle on the map.</p>
<p>The anchors at the corners of the rectangle allow it to be resized. The rectangle can also be dragged around the map. Any change to the rectangle is reflected in the input boxes and vice versa. Changes to the rectangle or distortion property interactively update the list of proposed map projections and the map preview below the web map.</p>
<p><img src="figures/UI.png" border=0.5 alt="User Interface" style="float:center" width="100%"></p>
<p><span class="ui-circle">a</span> The <i>Select Currently Visible Area</i> button adjusts the rectangle size to the current map view, selecting approximately 80% of the visible map.</p>
<p><span class="ui-circle">b</span> The <i>Select Entire World</i> button sets the rectangle size to the full extent.</p>
<p><span class="ui-circle">c</span> The <i>Show Entire World</i> button zooms out to the full extent.</p>
<p><span class="ui-circle">d</span> The <i>Customize</i> button opens the <i>Projection Wizard Options</i> dialog, which allows the user to modify the tool.</p><br>
<img src="figures/options.png" border=0.5 alt="Projection Wizard Options" style="float:right" width="230px">
<h3>Customizing this Tool</h3>
<p>The <i>Projection Wizard Options</i> dialog allows you to modify the tool to better fit your needs. The options affect the projection parameters, elements in the PROJ and WKT strings, and the map preview. You can:</p>
<p><span class="ui-circle">A</span> toggle between decimal degrees and DMS formats for angular units,</p>
<p><span class="ui-circle">B</span> round the central meridian value to the nearest degree,</p>
<p><span class="ui-circle">C</span> select a system of geographic coordinates for the output strings,</p>
<p><span class="ui-circle">D</span> select between meters and international feet for linear units in the strings, and</p>
<p><span class="ui-circle">E</span> display the selected extent and/or the projection's origin point(s) in the map preview.</p><br>
<h3>Selection Criteria Derived from the Geographic Extent</h3>
<p><b>The extent of the geographic area:</b>
<br><i>World map</i> – shows at least two-thirds of the full extent
<br><i>Map showing a hemisphere</i> – shows between one-sixth and two-thirds of the full extent
<br><i>Map showing a continent or smaller areas</i> – shows less than one-sixth of the full extent</p>
<p><b>The predominant extent and the orientation of the area shown on the map:</b>
<br><i>An east-west extent, resulting in a landscape-oriented map</i> – the ratio between the central meridian and the longest parallel lengths is less than 0.8
<br><i>A north-south extent, resulting in a portrait-oriented map</i> – the ratio between the central meridian and the longest parallel lengths is more than 1.25
<br><i>An equal extent, resulting in a square-shaped map</i> – other ratio values</p>
<p><b>The latitude of the mapped area of a square-shaped map:</b>
<br><i>Center at pole</i> – the central latitude is more than 75º N or 75º S
<br><i>Center along equator</i> – the central latitude is between 15º N and 15º S and extent crosses equator
<br><i>Center away from pole or equator</i> – all other central latitude values</p>
<p><b>The latitude of the mapped area of a landscape-oriented map:</b>
<br><i>Center at pole</i> – the central latitude is more than 70º N or 70º S, or geographic area in a conic projection would otherwise expose an opening at a pole.
<br><i>Center along equator</i> – the central latitude is between 15º N and 15º S, or geographic area is within 23.43665º N and 23.43665º S for maps showing a hemisphere.
<br><i>Center away from pole or equator</i> – all other central latitude values</p><br>
<h3>Additional Notes and Tips</h3>
<p class="outputText"><b>For world maps:</b></p>
<ul class="outputText">
<li>Conformal projections are not useful for world maps because they deform the shapes of the continents in a way that map readers are not used to seeing.</li>
<li>Rectangular projections are not generally recommended for most world maps. However, there are some rare phenomena based on longitude that are best represented by a map with straight meridians, such as a map showing world time zones.</li>
<li>Small-scale world maps usually represent the world over a continuous space without interruptions. When cartographers map only land phenomena or only ocean phenomena, an interrupted projection is a possible choice. Interruption can be applied to most equal-area and compromise world map projections. Depending on the purpose of the map (i.e., whether showing land or ocean), the locations of intersections and central meridians are adjusted.</li>
</ul>
<p class="outputText"><br><b>For maps showing a hemisphere:</b></p>
<ul class="dialogtext">
<li>Conformal projections are not useful for hemisphere maps since they grossly distort shape and area along the border of the projected hemisphere. Preserving angles is rarely needed for hemisphere maps.</li>
</ul>
<p class="outputText"><br><b>For maps showing a continent or smaller areas:</b></p>
<ul class="dialogtext">
<li>Compromise projections are not useful for maps showing a continent or a smaller area.</li>
<li>To reduce overall area distortion for the conformal projections, one can also apply a scale factor <i>k</i>. Various values for <i>k</i> are applied and the area distortion patterns along the center and at the border of the map are compared.</li>
<li>To reduce overall distortion for the equal-area projections (not for the azimuthal projections), one can also compress the map in the north-south direction (with a factor <i>s</i>) and expand the map in the east-west direction (with a factor 1 / <i>s</i>). The factor <i>s</i> can be determined with a trial-and-error approach, comparing the distortion patterns along the center and at the border of the map.</li>
<li>In some rare cases, it is useful to retain scale along great circles in regional and large-scale maps. Map readers can make precise measurements along these lines that retain scale. It is important to remember that no projection is able to correctly display all distances and that only some distances are retained correctly by these "equidistant" projections.</li>
<li>When mapping a specific country or state, the cartographer can also use the state's official projection. Often this projection not only minimizes the distortion of the mapped area, but it may also simplify the cartographer's work. A majority of the state's base data is available with the official projection. Most countries use a conformal projection for their official large-scale maps, which is preferred for surveying, navigation, and military use. One can search for official projections by area of interest in the <a target="_blank" href="https://epsg.org/">EPSG Geodetic Parameter Dataset</a>.</li>
</ul><br><br>
<h3>Update History</h3>
<p class="outputText"><b>Projection Wizard 2.1</b> (November, 2024)</p>
<ul class="dialogtext">
<li>Equatorial case for square-shaped maps is now limited to extents that cross the equator.</li>
<li>Calculation of a standard parallel parameter for cylindrical projections has been fixed.</li>
<li>Central meridian parameter is now normalized to the range of [-180, 180].</li>
<li>Lambert azimuthal equal area's name has been corrected.</li>
<li>The third-party libraries, web links, and help content were updated.</li>
</ul>
<p class="outputText"><br><b>Projection Wizard 2.0</b> (June, 2020)</p>
<ul class="dialogtext">
<li>The extent of the geographic area is determined based on spherical surface equations.</li>
<li>The predominant extent is computed with the ratio between the central meridian and the longest parallel lengths on a sphere.</li>
<li>Updated criteria for the latitude of the mapped area of a landscape-oriented map.</li>
<li><i>Projection for showing the tropics</i> category was added for hemisphere maps when geographic area is within 23.43665º N and 23.43665º S.</li>
<li>Additional suggestions were added to the list of appropriate map projections for the conformal property at very large map scales.</li>
<li>The Cassini projection was added to the list of appropriate map projections for the equdistant property and portrait-oriented maps.</li>
<li>The Plate Carrée projection was replaced with the equdistant cylindrical for a landscape-oriented map and geographic area along the equator.</li>
<li>The Equal Earth projection was added to the list of equal-area world map projections.</li>
<li>Projections that excessively bulge outwards and interrupted projections were removed from the world lists.</li>
<li>The list of world equidistant projections is now given as a dropdown menu. For each projection in the menu, sliders (and radio buttons) were added next to the parameters, so user can now adjust arbitrary points.</li>
<li>Preview map updates were added when a user hovers over projection's name with the cursor on the world lists.</li>
<li>The preview map is now clipped to the exact geographic area selected by a user.</li>
<li>Projection parameters for world projection are now rounded to entire degrees, to half degrees, and to tenths of degrees depending on the size of the selected geographic area.</li>
<li>Projection parameters for maps showing a hemisphere and the tropics are now rounded to two decimal places.</li>
<li>PROJ string values were rounded to a maximum of seven decimal places and datum or ellipsoid information and linear unit were added to the string.</li>
<li>WKT strings are provided for each proposed projection.</li>
<li>A <i>Customize</i> button was added, which opens the <i>Projection Wizard Options</i> dialog. Users can now toggle between decimal degrees and DMS formats for angular units, round the central meridian value to the nearest degree, specify the geographic coordinate type for their output strings, select between meters and international feet for linear units, and display the geographic extent and the projection's origin point(s) in the map preview.</li>
<li>Continuous updates to the output, preview map, and extent inputs have been added during individual vertex or whole rectangle dragging.</li>
<li>The user interface, popup windows, preview maps, third-party libraries, and help content were updated.</li>
</ul>
<p>This update was prepared in collaboration with <a target="_blank" href="https://github.com/jwasilgeo">@jwasilgeo</a> and <a target="_blank" href="https://github.com/jgravois">@jgravois.</a></p>
<p class="outputText"><br><b>Projection Wizard 1.2</b> (May, 2017)</p>
<ul class="dialogtext">
<li>PROJ code was fixed for the Lambert azimuthal projection.</li>
<li>The help content was updated.</li>
</ul>
<p class="outputText"><br><b>Projection Wizard 1.1.1</b> (February, 2016)</p>
<ul class="dialogtext">
<li>The help content was updated.</li>
<li>A list of publications and related articles about Projection Wizard was added.</li>
</ul>
<p class="outputText"><br><b>Projection Wizard 1.1</b> (December, 2015)</p>
<ul class="dialogtext">
<li>The Patterson projection was added to the list of compromise world map projections.</li>
<li>The help content was updated.</li>
</ul>
<p class="outputText"><br><b>Projection Wizard 1.0</b> (October, 2014)</p>
<ul class="dialogtext">
<li>Map preview added to the list of appropriate map projections.</li>
<li>Selection criteria for a hemisphere map updated on one-sixth of the full geographic extent.</li>
<li>Updated criteria for the latitude of the mapped area of a landscape-oriented map. The map has a center at pole when the central latitude is more than 70º N or 70º S, or more than 67.5º N or 67.5º S for showing between one sixth and one eighth of the full geographic extent.</li>
</ul>
<p class="outputText"><br><b>Map Projection Selection Tool</b> (June, 2013)</p>
<ul class="outputText">
<li>Original web application</li>
</ul><br><br>
<h3>Publications and Related Articles</h3>
<p>Jenny, B., Šavrič, B., Arnold, N. D., Marston, B. E. and Preppernau, C. A. (2017). A guide to selecting map projections for world and hemisphere maps. In: M. Lapaine and E. L. Usery (eds), <a target="_blank" href="https://link.springer.com/book/10.1007%2F978-3-319-51835-0">Choosing a Map Projection</a>, Lecture Notes in Geoinformation and Cartography (pp. 213–228). Berlin, Heidelberg, New York: Springer. Doi: <a target="_blank" href="https://link.springer.com/chapter/10.1007/978-3-319-51835-0_9">10.1007/978-3-319-51835-0_9</a></p>
<p>Šavrič, B., Jenny, B. and Jenny, H. (2016). Projection Wizard – An online map projection selection tool. </br>The Cartographic Journal, 53–2, p. 177–185. Doi: <a target="_blank" href="http://dx.doi.org/10.1080/00087041.2015.1131938">10.1080/00087041.2015.1131938</a></p>
<p>Šavrič, B. (2016). Projection Wizard: A free web application for selecting a map projection. </br>ISPRS SC Newsletter, 9–4. p. 5. Available online: <a target="_blank" href="http://www.isprs-sc.org/material/isprs_sc_vol9_no4.pdf#page=7">http://www.isprs-sc.org/material/isprs_sc_vol9_no4.pdf</a></p>
<p>Šavrič, B., Jenny, B., White, D. and Strebe D. R. (2015). User preferences for world map projections. </br>Cartography and Geographic Information Science, 42–5, p. 398–409. Doi: <a target="_blank" href="http://dx.doi.org/10.1080/15230406.2015.1014425">10.1080/15230406.2015.1014425</a></p>
<p>Šavrič, B., Jenny, B. and Jenny, H. (2014). <a target="_blank" href="https://www.researchgate.net/publication/281067096_Projection_Wizard_Map_Projection_Selection_Tool">Map projection selection tool</a>. </br>Presentation at the 34th Annual Meeting NACIS 2014, Pittsburgh, Pennsylvania, October 8–11.</p>
<p>Snyder, J. P. (1987). Map Projections – A Working Manual. Professional Paper 1395. </br>Washington, DC: US Geological Survey. Doi: <a target="_blank" href="https://doi.org/10.3133/pp1395">10.3133/pp1395</a></p>
<p>Featured by <a target="_blank" href="https://www.geographyrealm.com/map-projection-tool/">Geography Realm (GIS Lounge)</a>, <a target="_blank" href="http://googlemapsmania.blogspot.com/2015/06/the-magnificent-maps-of-week.html">Maps Mania</a> and <a target="_blank" href="https://freetech4teach.teachermade.com/2023/03/projection-wizard-see-how-maps-distort/">TeacherMade</a>.</p><br>
</div>
<div class="inputUI">
<div id="title">Projection Wizard</div>
<form id="distortion" onchange="makeOutput()">
<h4 class="inputSection">Distortion Property</h4>
<input type="radio" name="distortion" id="Equalarea" value="Equalarea" checked="checked"/>
<label for="Equalarea">Equal-area<br></label>
<input type="radio" name="distortion" id="Conformal" value="Conformal"/>
<label id="Label2" for="Conformal">Conformal<br></label>
<input type="radio" name="distortion" id="Equidistant" value="Equidistant"/>
<label for="Equidistant">Equidistant<br></label>
<input type="radio" name="distortion" id="Compromise" value="Compromise"/>
<label id="Label4" for="Compromise">Compromise</label>
</form>
<h4 class="inputSection">Geographic Extent</h4>
<label class="extent" for="latmax">North: </label>
<input class="inputBox" type="text" id="latmax" value="45.000" onchange="changeInput()" size="18"/>
<label class="extent" for="latmin">South: </label>
<input class="inputBox" type="text" id="latmin" value="-45.000" onchange="changeInput()" size="18"/>
<label class="extent" for="lonmax">East: </label>
<input class="inputBox" type="text" id="lonmax" value="90.000" onchange="changeInput()" size="18"/>
<label class="extent" for="lonmin">West: </label>
<input class="inputBox" type="text" id="lonmin" value="-90.000" onchange="changeInput()" size="18"/>
<div id="buttons">
<button id="fit" title="Select Currently Visible Area"><img src="figures/FitArea.png" height="19" align="center">
</button>
<button id="reset" title="Select Entire World"><img src="figures/SelectAll.png" height="19" align="center">
</button>
<button id="view" title="Show Entire World"><img src="figures/GlobeView.png" height="19" align="center">
</button>
</div>
<div id="credits">
© 2024 <a target="_blank" href="https://bojansavric.projectionwizard.org">Bojan Šavrič</a><br>
Maps created with <a href="http://leafletjs.com/">Leaflet</a> and <a href="http://d3js.org/">D3</a>. Tiles: © Esri.
</div>
</div>
<div id="map"></div>
</div>
<div id="output">
<div id="printout"></div>
<div id="result" class="results"></div>
<div id="previewMap">
<canvas></canvas>
<div id="projectionName"></div>
</div>
<div id="PROJ" class="dialogtext" title="PROJ string"></div>
<div id="WKT" class="dialogtext" title="Well-Known Text"></div>
</div>
</div>
</body>
</html>