The Light Source Metaphor Revisited—Bringing an Old Concept for Teaching Map Projections to the Modern Web

International Journal of Geo-Information

Article The Light Source Metaphor Revisited—Bringing an Old Concept for Teaching Map Projections to the Modern Web

Magnus Heitzler 1,* , Hans-Rudolf Bär 1, Roland Schenkel 2 and Lorenz Hurni 1

1 Institute of Cartography and Geoinformation, ETH Zurich, 8049 Zurich, Switzerland; [email protected] (H.-R.B.); [email protected] (L.H.) 2 ESRI Switzerland, 8005 Zurich, Switzerland; [email protected] * Correspondence: [email protected]

Received: 28 February 2019; Accepted: 24 March 2019; Published: 28 March 2019

Abstract: Map projections are one of the foundations of geographic information science and cartography. An understanding of the diﬀerent projection variants and properties is critical when creating maps or carrying out geospatial analyses. The common way of teaching map projections in text books makes use of the light source (or light bulb) metaphor, which draws a comparison between the construction of a map projection and the way light rays travel from the light source to the projection surface. Although conceptually plausible, such explanations were created for the static instructions in textbooks. Modern web technologies may provide a more comprehensive learning experience by allowing the student to interactively explore (in guided or unguided mode) the way map projections can be constructed following the light source metaphor. The implementation of this approach, however, is not trivial as it requires detailed knowledge of map projections and computer graphics. Therefore, this paper describes the underlying computational methods and presents a prototype as an example of how this concept can be applied in practice. The prototype will be integrated into the Geographic Information Technology Training Alliance (GITTA) platform to complement the lesson on map projections.

Keywords: map projections; computer graphics; visualization; 3D; education; teaching; multimedia; open educational resources

1. Introduction Map projections are a key concept in cartography and geographic information science. Choosing an inappropriate map projection may cause severely flawed results when carrying out geospatial analyses (e.g., when buffering in an inappropriate projected coordinate system [1]) or may distort a map reader’s view on the world when exploring a thematic or topographic map. Hence, a thorough understanding of the construction process and map properties is important. Mapping software typically implements the projection process as a set of equations that can be applied to a point in geographic coordinates to obtain its projected coordinates. Examples for this approach can be found in kartograph.js [2], d3.js [3], or Flex Projector [4]. However, educational resources tend to follow a more figurative approach to explain the underlying geometrical meaning of the projection process. This construction process typically starts with a projection center that can be imagined as a light source (or light bulb) placed in the proximity of (or within) the globe and emitting light in all directions. In the simplest case, the light source has the shape of a point, but other geometries exist as well. Light rays pass through the globe, casting the colors at their intersection points on the globe’s surface onto the projection surface (usually a plane, cone or cylinder).

ISPRS Int. J. Geo-Inf. 2019, 8, 162; doi:10.3390/ijgi8040162 www.mdpi.com/journal/ijgi ISPRS Int. J. Geo-Inf. 2019, 8, 162 2 of 10 ISPRS Int. J. Geo-Inf. 2019, 8, 162 2 of 10

Figure1 1 shows shows threethree examplesexamples ofof howhow mapmap projectionsprojections maymay bebe constructedconstructed thisthis way.way. FigureFigure1 A1A explains the construction of the gnomonic azimuthal projection by depicting light rays from the light source inin all directions (indicated(indicated byby arrows)arrows) toto hithit the projection plane.plane. The resulting map is depicted below, showingshowing distorteddistorted shapesshapes ofof landland areas.areas. Figure1 1BB depicts depictsthe theconstruction construction of ofthe thecentral centralconic conic projectionprojection byby indicatingindicating a projection conecone touchingtouching the globe with the resulting unrolled map shown below. Figure1 1CC intendsintends toto illustrateillustrate thethe didifferentﬀerent positionspositions ofof thethe parallels for the central cylindrical and the Mercator projection implying that an additionaladditional non-linear scaling is required to realize the desired projection.projection. ThereThere are are numerous numerous resources resources that that show show similar similar depictions, depictions, either either on the on web the (e.g.,web References(e.g., References [5,6]) [5,6]) or in printedor in printed textbooks textbooks (e.g., References(e.g., References [7,8]). [7,8]).

Figure 1. ExamplesExamples for for educational educational resources resources following following the the light light source source metaphor metaphor when when explaining explaining map mapprojections: projections: (A) gnomonic (A) gnomonic azimuthal azimuthal projection ( projectionhttps://commons.wikimedia.org/wiki/File:Comparison (https://commons.wikimedia.org/wiki/File: Comparison_azimuthal_projections.svg_azimuthal_projections.svg, CC BY-SA 3.0,, CCaccessed BY-SA 15.02.2019); 3.0, accessed (B) central 15.02.2019); conic projection (B) central (Weisstein, conic projectionEric W. (Weisstein,“Conic EricProjection.” W. “Conic Projection.”From MathWorld—A From MathWorld—A Wolfram Wolfram Web Web Resource.Resource. http:http://mathworld.wolfram.com/ConicProjection.html,//mathworld.wolfram.com/ConicProjection.html ©, © 1999–20191999–2019 Wolfram Wolfram Research, Inc., accessedaccessed 15.03.2019);15.03.2019); ( C)) central central cylindrical cylindrical projection projection and and Mercator Mercator projection projection (https://commons.wikimedia.org/ (https://commons.wikimedia.org / wikiwiki/File:Mercator_and_central_cylindrical.p/File:Mercator_and_central_cylindrical.pngng, Public, Public Domain, Domain, accessed accessed 15.02.2019). 15.02.2019).

These illustrations have several limitations. Firstl Firstly,y, each illustration shows only snapshots of the construction process. There is still considerableconsiderable mental work involved to understandunderstand thethe transitiontransition fromfrom thethe projectionprojection concept concept to to the the resulting resulting map. map. Secondly, Secondly, static static images images only only provide provide one one view view on theon constructionthe construction process. process. It is not It possibleis not possible to obtain dito ffobtainerent views different to get views a comprehensive to get a comprehensive understanding ofunderstanding the mapping of process. the mapping Thirdly, process. exploring Thirdly, diff erentexploring configurations different configurations of these objects of isthese not objects possible is asnot this possible would as require this would interactive require adjustments interactive ofadju thestments light source, of the projectionlight source, surface, projection basemap, surface, etc. Webasemap, argue thatetc. suchWe argue interactivity that such allows interactivity improving allows the understandingimproving the ofunderstanding how different of map how projections different relatemap projections to each other. relate The to each authors other. are The not authors aware of are any not interactive aware of any visualization interactive tool, visualization which allows tool, constructingwhich allows map constructing projections map following projections an implementation following an of theimplementation light source metaphor. of the light source metaphor.These limitations can be overcome if interactive visualization methods are provided. The computationalThese limitations concepts can be and overcome how they if caninteract be implementedive visualization to createmethods a fully are functionalprovided. webThe applicationcomputational are theconcepts main contributions and how they of this can paper. be im Theplemented concepts areto applicablecreate a fully for projections, functional which web canapplication be constructed are the by main simple contributions geometric means of this (i.e., pape mapr. The projections concepts that are can applicable be manually for constructedprojections, withwhich ruler can and be constructed compasses and by dosimple not requiregeometric the usemean ofs formulas) (i.e., map by projections using diff erentthat configurationscan be manually of theconstructed projection with surface ruler and and the compasses light source. and Furthermore, do not require the resultingthe use of map formulas) projections by using may bedifferent scaled inconfigurations a non-linear wayof the to approximateprojection surface variants and such th ase thelight Mercator source. projection.Furthermore, the resulting map projectionsIt is recommended may be scaled to tryin outa non-linear the prototype way showcasingto approximate the concepts variants described such as the in this Mercator paper directlyprojection. in the browser: https://gevian.github.io/GITTA-MP. Note that the prototype accessible at this URLIt may is recommended change in the futureto try asout new the versions prototype of theshowcasing prototype the are concepts released. described The prototype in this version paper describeddirectly in in the this browser: paper ishttps://gevian.github.io/GITTA available as a zip archive and as-MP. tag Note v1.0.0-light-source-metaphor that the prototype accessible at the at code this repositoryURL may change at https: in// github.comthe future as/gevian new versions/GITTA-MP of the. prototype are released. The prototype version describedThe prototype in this paper is open-source is available software as a zip (GPLv3) archive and and depends as tag v1.0.0-light-source-metaphor only on other open-source projects at the (D3.js,code repository three.js). at As https://github.com/gevian/GITTA-MP. such, it can be freely used in education and will be integrated into the open The prototype is open-source software (GPLv3) and depends only on other open-source projects (D3.js, three.js). As such, it can be freely used in education and will be integrated into the open

ISPRS Int. J. Geo-Inf. 2019, 8, 162 3 of 10 ISPRS Int. J. Geo-Inf. 2019, 8, 162 3 of 10 education platform Geographic Information Technology Training Alliance (GITTA) to make it easily educationavailable to platform a wide range Geographic of learners. Information GITTA Technologyis accessible Trainingat http://www.gitta.info/. Alliance (GITTA) to make it easily available to a wide range of learners. GITTA is accessible at http://www.gitta.info/. 2. Concept 2. Concept Providing an integrated experience for the construction process of map projections led to three requirements.Providing Firstly, an integrated each construction experiencefor step the shou constructionld be easily process traceable of map and, projections hence, improve led to three the requirements.intellectual comprehension Firstly, each construction of the entire step process. should beSeco easilyndly, traceable it should and, be hence,possible improve to manually the intellectual change comprehensionthe parameters ofof the each entire construction process. Secondly, step to foster it should the beunderstanding possible to manually of the consequences change the parameters that these of eachchanges construction may have step on to the foster final the map. understanding Thirdly, the of user the consequences should optionally that these be guided changes through may have each on theconstruction final map. step Thirdly, by providing the user should tailored optionally paramete berizations guided throughfor common each map construction projections step or by interesting providing tailoredconfigurations. parameterizations This is advantageous for common since map projectionsallowing an or unguided interesting exploration configurations. of parameters This is advantageous bears the sincerisk that allowing meaningful an unguided configurations exploration may of be parameters difficult bearsto find. the These risk that requiremen meaningfults necessitate configurations a highly may beinteractive difficult toapplication find. These that requirements not only allows necessitate changing a highly each interactive parameter application in real-time, that but not also only requires allows changingcontinuously each depicting parameter the in real-time,transition but between also requires two configurations continuously depictingsuch as unrolling the transition the map, between scaling two configurationsit, or setting parameters such as unrolling to default the values. map, scaling The basi it,c or objects setting that parameters comprise to the default light values.source metaphor The basic objectsremain thatthe comprisesame as depicted the light in source Figure metaphor 2. remain the same as depicted in Figure2.

Figure 2.2. AnAn interactive interactive visualization visualization following following the lightthe sourcelight source metaphor metaphor to construct to construct a map projection. a map Theprojection. yellow The sphere yellow represents sphere therepresents point light the sourcepoint light as the source projection as the center. projection Illustrated center. is Illustrated an example is projectionan example line, projection intersecting line, theintersecting globe in Cyprusthe globe and in “drawing” Cyprus and the “drawing” respective the color respective on the projection color on surfacethe projection (a disc). surface (a disc).

The high-level stepssteps ofof thethe constructionconstruction process process and and the the transitions transitions between between them them are are depicted depicted in Figurein Figure3. In 3. the In first,the first, initial initial state state (“rolled”), (“rolled”), the basic the projectionbasic projection properties properti suches as such the typeas the of surfacetype of andsurface the and position the position of the light of the source light are source defined. are defined. This already This allowsalready creating allows creating a limited a set limited of possible set of plane-basedpossible plane-based projections, projections, such as the such stereographic as the stereographic azimuthal azimuthal or the gnomonic or the azimuthalgnomonic projections.azimuthal Cylinder-projections. and Cylinder- cone-based and projections, cone-based however, projections, need ho towever, be flattened need to to be form flattened the actual to form map. the There actual are numerousmap. There projections are numerous that can projections be obtained that this can way, be ob suchtained as Lambert’s this way, equal such areaas Lambert’s projection equal or Braun’s area stereographicprojection or Braun’s projection. stereographic However, many projection. projections Howe cannotver, many be obtained projections this way cannot such be as obtained the Mercator this projection,way such as which the Mercator requires aprojection, non-linear which scaling. requires A scaled a non-linear map cannot scaling. be directly A scaled rolled map again cannot as thebe introduceddirectly rolled distortions again as maythe introduced not be geometrically distortions reconstructed. may not be geometrically Therefore, the reconstructed. scaling operation Therefore, needs tothe be scaling undone operation to obtain needs a rollable to be map.undone to obtain a rollable map.

ISPRS Int. J. Geo-Inf. 2019, 8, 162 4 of 10 ISPRS Int. J. Geo-Inf. 2019, 8, 162 4 of 10

Figure 3. Major states of the interactive visualization pr processocess to construct different diﬀerent map projections. Arrows indicateindicate transitionstransitions betweenbetween thethe states,states, whichwhich areare generallygenerally realizedrealized asas smoothsmooth animations.animations.

Allowing retracing the whole process of the construction step in a continuous manner makes it necessary to use a single three-dimensional (3D) view, in which the three mainmain objectsobjects (globe,(globe, light source, andand projectionprojection surface) surface) are are displayed displayed (Figure (Figure2). 2). Any Any parameter parameter change change has has a direct a direct impact impact on aton least at least one one object object displayed displayed in this in this 3D 3D view. view.

3. Projection Surface 3. Projection Surface Using a single 3D view to visualize the whole construction process has specific implications Using a single 3D view to visualize the whole construction process has specific implications for for the projection surface as it undergoes several geometrical transformations until the final map is the projection surface as it undergoes several geometrical transformations until the final map is obtained (Figure4). A single mesh is used to form all projection surfaces. Initially, this mesh structure obtained (Figure 4). A single mesh is used to form all projection surfaces. Initially, this mesh structure is constructed in the form of a cylinder based on quads with each quad consisting of two triangles is constructed in the form of a cylinder based on quads with each quad consisting of two triangles (Figure4A). By reducing one of the two cylinder radii, a (frustum of a) cone can be constructed (Figure 4A). By reducing one of the two cylinder radii, a (frustum of a) cone can be constructed (Figure4B); by subsequently reducing the cylinder axis length, a flat disc is constructed representing (Figure 4B); by subsequently reducing the cylinder axis length, a flat disc is constructed representing the plane (Figure4C). the plane (Figure 4C). Unrolling is achieved by separating the mesh into a sequence of stripes, where each stripe consists Unrolling is achieved by separating the mesh into a sequence of stripes, where each stripe of a set of stacked quads. In Figure4D, the first stripe is highlighted in yellow. All subsequent stripes consists of a set of stacked quads. In Figure 4D, the first stripe is highlighted in yellow. All subsequent are iteratively rotated until they reside in the plane defined by the first stripe. For the second stripe, stripes are iteratively rotated until they reside in the plane defined by the first stripe. For the second this is done as follows: firstly, the angle and the axis of rotation need to be found. The axis of rotation stripe, this is done as follows: firstly, the angle and the axis of rotation need to be found. The axis of is defined by the common edge between the first and the second stripe. The angle by which each rotation is defined by the common edge between the first and the second stripe. The angle by which stripe is to be rotated is equal to the angle between the normals of the two stripes. The rotation is then each stripe is to be rotated is equal to the angle between the normals of the two stripes. The rotation applied to the second stripe and all subsequent stripes. As a consequence, the second stripe lies in the is then applied to the second stripe and all subsequent stripes. As a consequence, the second stripe reference plane, while all following stripes are rotated toward the reference plane (but are not there lies in the reference plane, while all following stripes are rotated toward the reference plane (but are yet).not there When yet). the When process the isprocess repeated is repeated for the third for the stripe, thirdit stripe, will end it will up end in the up referencein the reference plane, plane, while allwhile remaining all remaining stripes stripes will be will somewhat be somewhat closer to closer it. The to processit. The isprocess repeated is repeated until all stripesuntil all reside stripes in thereside reference in the plane.reference An plane. intermediate An intermediate result of thisresult process of this for process a cylinder for a is cylinder displayed is indisplayed Figure4 D.in TheFigure ultimate 4D. The result ultimate exemplified result exemplifie for a coned is for displayed a cone is in displayed Figure4E. in Figure 4E. Once flattened,flattened, thethe meshmesh cancan bebe scaledscaled to to obtain obtain specific specific properties. properties. Scaling Scaling is is realized realized by by using using a functiona function that that maps maps each each vertex vertex position position to to a newa new position position along along the the vertical vertical axis axis the the vertex vertex belongs belongs to. Into. theIn examplesthe examples given given in Figure in Figure4, the vertical4, the vertic axesal coincide axes coincide with the with meridians. the meridians. The scaling The function scaling canfunction be either can providedbe either explicitlyprovided toexplicitly create a desiredto create map a desired projection map or canprojection be defined or can manually, be defined e.g., usingmanually, splines. e.g., A using scaled splines. variant A ofscaled a flattened variant cone of a isflattened depicted cone in Figure is depicted4F. in Figure 4F. This way of moving vertices to new positions in order to obtain a desired map projection based on scalingscaling aa given given map map projection projection only only yields yields an approximation.an approximation. In fact, In fact, the image the image at the at moved the moved vertex positionsvertex positions will be will mapped be mapped exactly, exactly, while positions while positi betweenons between vertices vertices will be will slightly be slightly inaccurate inaccurate due to interpolation.due to interpolation. It is, therefore, It is, therefore, important important to construct to construct a mesh with a mesh a high with number a high of number vertices of to vertices minimize to inaccurateminimize inaccurate mappings. mappings. In practice, In 50 practice, quads per 50 quads stripe provedper stripe to beproved sufficient to be to sufficient reduce these to reduce deviations these todeviations a negligible to a level. negligible In addition, level. In we addition, want to we emphasize want to thatemphasize this way that of scalingthis way is notof scaling trivial asis thenot underlyingtrivial as the formulas underlying may formulas make use may of complicated make use trigonometricof complicated functions, trigonometric which functions, cannot be which easily reconstructedcannot be easily by reconstructed simple geometric by simple means. geometric means.

ISPRS Int. J. Geo-Inf. 2019, 8, 162 5 of 10 ISPRS Int. J. Geo-Inf. 2019, 8, 162 5 of 10

Figure 4. Different ways of how the mesh is modified to represent different states of the projection Figuresurface: 4.4. ( ADifferentDifferent) a cylinder; ways ways of( Bof) how ahow cone; the the mesh ( Cmesh) a is plane modifiedis modified (disc); torepresent (toD )represent an intermediate different different states stat ofstatese the during projectionof the a projectionflattening surface: (process;surface:A) a cylinder; (AE)) aa flattened (cylinder;B) a cone; cone;(B (C) )a a(cone;F plane) a scaled (C (disc);) a planeflattened (D) an(disc); intermediate cone. (D The) an referenceintermediate state during stripe astat flatteningise indicated during process; a inflattening yellow. (E) a flattenedForprocess; readability, cone;(E) a (flattenedF )a a mesh scaled cone; with flattened (aF )low a cone. scaled resolution The flattened reference is depicted cone. stripe The is (30 indicated reference radial inand stripe yellow. 10 verticalis For indicated readability, segments). in yellow. a mesh To withreduceFor readability, a low graphical resolution a artefacts, mesh is depicted with a mesh a (30low radialwith resolution a and higher 10 verticalis resolutiondepicted segments). (30is recommended radial To reduce and 10 graphical (e.g.,vertical 100 artefacts, segments). radial aand mesh To50 withverticalreduce a higher graphicalsegments). resolution artefacts, is recommended a mesh with (e.g.,a higher 100 radialresolution and 50 is verticalrecommended segments). (e.g., 100 radial and 50 vertical segments). 4. Light Source 4. Light Source 4. LightThe Source projection center is the second dynamic object when constructing projections following the The projection center is the second dynamic object when constructing projections following the light source metaphor. The simplest shape of a light source is that of a point, in which case, light is light Thesource projection metaphor. center The is simplest the second shape dynamic of a light obje sourcect when is constructing that of a point, projections in which following case, light the is emitted equally in all directions. This configuration is required for many simple map projections such emittedlight source equally metaphor. in all directions. The simplest This shapeconfiguration of a light is requiredsource is forthat many of a point,simple in map which projections case, light such is as the stereographic and gnomonic azimuthal or the central cylindrical and central conical projections. asemitted the stereographicequally in all directions. and gnomonic This configuration azimuthal isor required the central for many cylindrical simple mapand projectionscentral conical such It can be simply visualized as a glowing sphere (Figure5A). Other projections may require di fferent projections.as the stereographic It can be simplyand gnomonic visualized azimuthal as a glowing or the sphere central (Figure cylindrical 5A). Other and projectionscentral conical may shapes of the light source. The orthographic azimuthal projection, as a simple example, assumes that requireprojections. different It can shapes be simply of the visualized light source. as a Theglowing orthographic sphere (Figure azimuthal 5A). prOtherojection, projections as a simple may the projection is carried out orthogonally on the plane. There are several possibilities to visualize example,require different assumes shapes that the of projectionthe light source.is carried The out orthographic orthogonally azimuthal on the plane. projection, There asare a severalsimple this arrangement, for example, by modeling the light source as a glowing plane. However, a simpler possibilitiesexample, assumes to visualize that the this projection arrangement, is carried for ex ample,out orthogonally by modeling on thethe lightplane. source There as are a glowing several solution is to place the point light source infinitely distant from the projection surface, which yields plane.possibilities However, to visualize a simpler this solutionarrangement, is to placefor ex ample,the point by lightmodeling source the infinitely light source distant as a from glowing the parallel rays of light. Projection lines (red lines in Figure5) can be added to help indicate how a specific projectionplane. However, surface, a whichsimpler yields solution parallel is torays place of lighthet. point Projection light linessource (red infinitely lines in distantFigure 5)from can the be point on the projection surface obtains its color (In the application, projection lines can be added by addedprojection to helpsurface, indicate which how yields a specificparallel rayspoint of on ligh thet. Projectionprojection lines surface (red obtainslines in itsFigure color 5) (Incan the be pressing shift and then left-clicking on the globe). application,added to help projection indicate lines how can a bespecific added point by pressing on the shift projection and then surface left-clicking obtains on its the color globe). (In the application, projection lines can be added by pressing shift and then left-clicking on the globe).

Figure 5.5. TwoTwo conﬁgurationsconfigurations of of the the light light source: source: (A )(A point) point light light source source placed placed in the in center the center of the of globe; the (globe;FigureB) circular ( B5.) Twocircular light configurations source light source representing ofrepresenting the multiplelight source: multiple varying (A varying) positionspoint light positions of source the lightof placedthe source light in source depending the center depending onof the longitude.onglobe; the (longitude.B) circular The light The light rays light source used rays torepresenting used draw to speciﬁc draw multiple specif pointsic varying onpoints the projectionon positions the projecti surfaceof theon lightsurface are highlightedsource are highlighted depending in red. inon red. the longitude. The light rays used to draw specific points on the projection surface are highlighted in red.

ISPRS Int. J. Geo-Inf. 2019, 8, 162 6 of 10

There is a set of map projections which cannot be realized by a simple point light source model. For example, the construction of Braun’s stereographic cylindrical projection assumes light rays originating from a circular ring and passing the globe’s surface before being cast onto the projection plane. Another special case with respect to the light source is Lambert’s cylindrical equal-area projection which requires light rays laying in parallel planes. This corresponds to a bar-shaped light source. A consequence would be that the basic light bulb metaphor can no longer be retained. In order to cover all abovementioned cases, a light source needs to be of type (a) a point, (b) a straight line, (c) a circular line, and (d) a circular area. The latter type enables a parallel light source without the need to place a point light source at inﬁnity. Conceptually, the introduction of diﬀerent types of light sources undermines the neat light bulb metaphor. What is missing is a single versatile light source, analogous to the projection plane whose basic mesh construction enables forming planar, conical and cylindrical shapes. A candidate shape for such a light source would be a scalable torus. Its parameters, the radius from the shape’s center to the center line of the tube and the radius of the tube itself along with the scaling, enable creating all shapes such as spheres, discs, bars, and tori.

5. Rendering Correctly rendering features of the earth’s surface on the projection surface requires adapting the 3D real-time rendering pipeline as supported by common 3D application programming interfaces (APIs) such as OpenGL/WebGL or Direct3D. The output of each rendering operation is the set of pixels that are to be depicted on the computer screen. Hence, to accurately determine the color of a pixel that covers the projection surface requires the following steps:

1. Determine the pixel’s location in 3D space as if the projection surface was in the “rolled” state. 2. Construct a projection line between the pixel’s 3D location and the light source’s 3D location. 3. Compute the intersection with the globe. 4. Determine the color of the globe at the intersection point (if there is any). 5. Assign the determined color to the respective pixel on the screen.

A more detailed explanation of these steps is given below. Changing the mesh of the projection surface is carried out either by modifying the local position vertices vl of these triangles (e.g., by reducing one of the radii) or by modifying the mesh’s linear transformation matrix (e.g., by changing the orientation of the surface). The latter is typically referred to as the model matrix MM and is used to transform the vl with respect to the local coordinates of the projection surface into global position vertices vg with respect to the center of the 3D scene. In the next step, the so-called view matrix MV is used to transform the vg into the view coordinates vv with respect to the position of the 3D camera pointing to the scene. Afterward, the projection matrix Mp is used to carry out the perspective distortion of the vv into the perspectively distorted vertices vp. The transformed triangles consisting of vp are finally rasterized according to a given resolution, typically that of the screen. The result of this process is the two-dimensional (2D) image I, which is shown to the user. Generally, image I can contain pixels of other objects as well. For the sake of simplicity, we assume that it only contains pixels that originate from the projection surface. As explained above, it is required to construct a line (or arcs, in some cases) between the projection center and a point on the projection surface. The color of the point on the projection surface is then equal to the color of the globe where it is intersected by the line. In the continuous case, there is an infinite number of points for which these colors have to be determined. However, since I is discrete (the screen pixels), it suffices to carry out the projection process for each of these pixels. This requires providing each pixel with its global position vg, which can be stored as an additional attribute for each triangle vertex. By default, each of these attributes is interpolated during rasterization and, thus, can be accessed when calculating the color of each pixel in I. ISPRS Int. J. Geo-Inf. 2019, 8, 162 7 of 10

ISPRS Int. J. Geo-Inf. 2019, 8, 162 7 of 10 The straight projection line can be constructed given vg and the projection center c. To calculate theReference intersection [9] is used. between In the the case line of and two the intersection globe (modeleds, the position as a sphere), closest theto the equation projection provided surface by is Referencechosen; in [the9] is case used. of no In theintersection, case of two the intersections, pixel is colored the gray. position closest to the projection surface is chosen;Determining in the case the of nopixel intersection, color based the on pixel the isposition colored of gray. the intersection is carried out by sampling a texture,Determining i.e., an image the pixel that color can basedbe referenced on the position using the of the 2D intersection normalized is coordinates carried out u, by v sampling ∈ [0, 1]. aProbably texture, the i.e., simplest an image way that to canretrieve be referenced such normaliz usinged thecoordinates 2D normalized based on coordinates an intersection u, v point[0, 1].is ∈ Probablyas follows: the firstly, simplest the way3D coordinates to retrieve suchwith normalized x, y, z ∈ [− coordinates1, 1] of the basedintersection on an intersectionpoint have pointto be isconverted as follows: into firstly, 3D spherical the 3D coordinates coordinates with with inclination x, y, z [ θ1, ∈ 1][0,of π], the azimuth intersection φ ∈ [−π point, π], haveand radius to be ∈ − convertedr = 1. Normalizing into 3D sphericalboth, θ and coordinates φ, to the withrange inclination [0, 1] yieldsθ an[0, exπact], azimuth mappingϕ to [theπ ,requiredπ], and radius texture r ∈ ∈ − =coordinates1. Normalizing u, v. This both, directθ and mappingϕ, to the of range spherica [0, 1]l coordinates yields an exact to Cartesian mapping coordinates to the required requires texture the coordinatestexture to depict u, v. the This earth direct in the mapping equirectangular of spherical projection. coordinates Sampling to Cartesian is carried coordinates out using requires anisotropic the texturefiltering to to depict ensure the a crisp earth image in the equirectangular(see, e.g., Reference projection. [10] for Samplingmore details). is carried A texture out using can contain anisotropic any filteringinformation to ensure of interest, a crisp such image as the (see, globe’s e.g., Reference topography, [10] the for moregeographic details). grid, A textureor Tissot’s can indicatrices. contain any informationOverlaying different of interest, textures such ascan the be globe’s achieved topography, by blending the the geographic colors from grid, each or texture Tissot’s sample. indicatrices. OverlayingFlattening diff erentand scaling textures the can projection be achieved surface by blendingeffectively the changes colors fromthe global each texturevertex positions sample. and, hence,Flattening the projection and scaling procedure the projection using v surfacel will lead effectively to undesirable changes theresults. global Therefore, vertex positions before and, flattening hence, thethe projectionsurface, the procedure local coordinates using vl will vl are lead saved to undesirable as an auxiliary results. attribute Therefore, vlr, which before consequently flattening the remains surface, theunchanged local coordinates when thev surfacel are saved is flattened as an auxiliary and scaled. attribute Thev calculationlr, which consequently of the intersection remains point unchanged is then whencarried the out surface using is v flattenedgr, which and is calculated scaled. The by calculation applying ofM theM on intersection vlr. Since v pointgr is known is then carriedin all states, out using it is vpossiblegr, which to is investigate calculated bythe applying effects ofM aM modifiedon vlr. Since lightv grsourceis known even in if all the states, surface it is is possible already to flattened investigate or thescaled. effects of a modified light source even if the surface is already flattened or scaled.

6. Prototype The proposed visualization conceptconcept was implemented in a prototypicalprototypical educational tool to allow unguided andand guided guided exploration exploration of theof mapthe constructionmap construction process process in a comprehensive in a comprehensive and interactive and manner.interactive Its manner. central 3DIts central view shows 3D view the shows arrangement the arrangement of the required of the objects:required the objects: projection the projection surface, thesurface, light the source, light andsource, the and globe. the Figureglobe.6 Figure shows 6 theshows prototype the prototype in the final in the “scaled” final “scaled” state. Thisstate. state This wasstate constructed was constructed by first by creating first creating the central the cylindricalcentral cylindrical projection projection in the “rolled” in the state,“rolled” then state, unrolling then theunrolling surface the to surface obtain theto obtain “flattened” the “flattened” state, and finallystate, and by manuallyfinally by scalingmanually the scaling flattened the surface flattened to approximatesurface to approximate the Mercator the projection, Mercator projec representingtion, representing the “scaled” the state. “scaled” state.

Figure 6.6.The The prototype prototype allowing allowing for anfor interactive an interactive understanding understanding on the construction on the construction of map projections. of map Aprojections. flattened central A flattened cylindrical central projection cylindrical was manuallyprojection scaled was manually in such a way scaled that in the such Mercator a way projection that the couldMercator be approximated. projection could Tissot’s be indicatricesapproximated. were addedTissot’s to indicatrices visualize the conformitywere added property. to visualizeLeft: userthe interfaceconformity elements property. to explore Left: diuserfferent interface configurations elements of mapto explor projections.e differentCenter configurations: the three-dimensional of map (3D)projections. view containing Center: the the three-dimensional relevant 3D objects (3D) to construct view containi map projections.ng the relevantRight 3D: exampleobjects to page construct of the tutorialmap projections. with explanations Right: example on the Mercatorpage of the projection. tutorial with explanations on the Mercator projection.

On the left side, a control panel allows changing the configuration in the 3D view and toggling the transition from one state (see Figure 3) to another. The initial state is “rolled”. The available

ISPRS Int. J. Geo-Inf. 2019, 8, 162 8 of 10

On the left side, a control panel allows changing the configuration in the 3D view and toggling the transition from one state (see Figure3) to another. The initial state is “rolled”. The available options during this state primarily consist of controls to modify the shape of the projection surface (“geometry”) and to change its orientation in respect to the globe (“orientation”), as well as buttons to create the default gnomonic azimuthal projection by pushing the “reset” button and to remove projection lines using the “remove line” button. To trigger the transformation state, the “flatten” button will result in an animated flattening. At the end of this animation, the state “flattened” is obtained. The button formerly labeled “flatten” will change to “roll”, allowing to move back from the “flattened” state to the “rolled” state. The “scaled” state can be obtained by pushing the “start editing” button, which allows manually scaling the flat map using Bézier curves. More Bézier curves can be added by left-clicking into the widget. They can be removed by right-clicking them. Returning to the “flattened” state requires resetting any applied scaling using the “reset” button below the scaling widget. For all states, the “light source” and “layers” controls are available as their changes can be directly propagated through all states without any limitations. It is, however, advisable to use them primarily in the “rolled” state as this gives a better visual impression on their effects. These controls provide high flexibility in exploring different map projections. Guided exploration is supported via the tutorial on the right side of the application. The textual explanations are complemented with buttons that dynamically adapt the control options on the left (and, thus, the objects in the 3D view) to showcase important aspects. These buttons are enabled/disabled according to the state in which they actually make sense. For example, scaling to the Mercator projection only makes sense when the application is in the “flattened” or “scaled” state. As such it is disabled in the “rolled” state. Additionally, a (non-comprehensive) list of map projections is provided in the tutorial, which allows automatically creating the respective arrangements of the light source and the projection surface. The prototype was implemented using common web technologies HTML, CSS, JavaScript and the libraries three.js for the 3D view and D3.js for the scaling widget. The rendering procedure was implemented in GLSL.

7. Discussion The prototype illustrates that the proposed way of constructing map projections based on a real-time implementation of the light source metaphor is feasible and, as such, complements the more conventional approach of existing libraries based on tailored formulas. Although it is believed that this approach can bring great benefits specifically in high-school and academic undergraduate teaching, quantitative evidence for this assumption is still missing and would require a thorough study. The number of different parameters that need to be adapted to obtain a specific map projection can be overwhelming and might even increase if more map projections should be supported. Hence, it might be necessary to simplify the user interface to make it more approachable, especially for younger students. At the time of writing, a first basic version simplifying the user interface is available at https://gevian.github.io/GITTA-MP/basic.html. Another limitation is the number of supported features. For example, some popular map projections require projection arcs rather than projection lines (e.g., Plate Carrée or Lambert’s azimuthal equal area projection). The scaling is limited to the vertical stripe axis. Some interesting map projections (such as those of the pseudo-cylindrical family) require more complex scaling operations. Both features require some effort to be implemented, but are considered worthy additions, especially to support projections such as the novel Equal Earth projection [11]. Relatively exotic map projections (e.g., Myriahedral [12]) have specific requirements such as multiple interruptions, which would require more advanced mesh manipulation instruments. Yet, the rendering mechanism can be applied to arbitrary geometrical surfaces, which should make the integration of such projections feasible. One fundamental advantage of the proposed solution is the possibility to explore different configurations of the light source and the projection surface, as well as subsequently applying scaling functions. This allows interactively investigating uncommon configurations and, thus, potentially ISPRS Int. J. Geo-Inf. 2019, 8, 162 9 of 10 discovering entirely new map projections. A major caveat of this approach lies in the issue that the underlying formulas (and, thus, the distortion properties) cannot be directly provided by the application. Rather, the user would need to reconstruct the projection formulas based on the visualization and settings as there is currently no mechanism that automatically derives the analytical projection formulas. When able to arbitrarily shape light sources, the question arises if light sources can be formed in such a way as to avoid a final scaling step. This question cannot be answered right away and needs further investigation; however, being able to show as many projections as possible using the light source metaphor would further underline the usefulness of this interactive map projection instruction tool.

8. Conclusions Allowing interactively constructing map projections in a 3D environment as provided by the described projection tool goes beyond the common static approaches provided by conventional educational resources. As such, it is believed that it can contribute to the understanding of map projections, especially for undergraduate and high-school students. In addition, it can bring beneﬁts to cartography experts as it allows an easy way to recapitulate common map projections and to investigate uncommon conﬁgurations, eventually leading to the discovery of new map projections. Several limitations (e.g., uniaxial scaling, no projection arcs) currently restrict the number of constructible map projections supported by the described prototype. It is aimed to gradually address these limitations to include the majority of common map projections and, thus, to provide a comprehensive demonstration tool that is freely and easily accessible to a wide range of academic institutions.

Author Contributions: Author Contributions: For research articles with several authors, a short paragraph specifying their individual contributions must be provided. Conceptualization, Magnus Heitzler, Hans-Rudolf Bär and Roland Schenkel; methodology, Magnus Heitzler and Hans-Rudolf Bär; software, Magnus Heitzler; writing—Original draft, Magnus Heitzler and Hans-Rudolf Bär; writing—Review and editing, Magnus Heitzler, Hans-Rudolf Bär, Roland Schenkel and Lorenz Hurni. Funding: The project received funding from the GITTA association. Conﬂicts of Interest: The authors declare no conﬂict of interest.

References

1. Flater, D. Understanding Geodesic Buffering—Correctly use the Buffer tool in ArcGIS. 2019. Available online: https://www.esri.com/news/arcuser/0111/geodesic.html (accessed on 27 February 2019). 2. Aisch, G. Kartograph. 2018. Available online: https://kartograph.org/ (accessed on 27 August 2018). 3. Bostock, M.; Ogievetsky, V.; Heer, J. D3 Data-Driven Documents. IEEE Trans. Vis. Comput. Graph. 2011, 17, 2301–2309. [CrossRef][PubMed] 4. Jenny, B.; Patterson, T.; Hurni, L. Flex Projector—Interactive Software for Designing World Map Projections. Cartograph. Perspect. 2008, 59, 12–27. [CrossRef] 5. Kippers, R. Map Projections. 2019. Available online: https://kartoweb.itc.nl/geometrics/Mapprojections/body. htm (accessed on 27 February 2019). 6. Wiki.GIS.com – The GIS Encyclopedia contributors. Map Projection. 2019. Available online: http: //wiki.gis.com/wiki/index.php/Map_projection (accessed on 27 February 2019). 7. Iliffe, J.; Lott, R. Datums and Map Projections: For Remote Sensing, GIS and Surveying; Whittles Publishing: Dunbeath, UK, 2008. 8. Fenna, D. Cartographic Science—A Compendium of Map Projections, with Distortions; CRC Press/Taylor & Francis Group: Boca Raton, FL, USA; London, UK; New York, NY, USA, 2007. 9. Eberly, D.H. 3D Game Engine Design: A Practical Approach to Real-Time Computer Graphics, 2nd ed.; Morgan Kaufman/Elsevier: Amsterdam, The Netherlands; Boston, MA, USA; Heidelberg, Germany; London, UK; New York, NY, USA; Oxford, UK; Paris, France; San Diego, CA, USA; San Francisco, CA, USA; Singapore; Sydney, Australia; Tokyo, Japan, 2007. 10. Akenine-Möller, T.; Haines, E.; Hoffman, N. Real-Time Rendering, 3rd ed.; AK Peters, Ltd.: Wellesley, MA, USA, 2008. ISPRS Int. J. Geo-Inf. 2019, 8, 162 10 of 10

11. Šavriˇc,B.; Patterson, T.; Jenny, B. The Equal Earth map projection. Int. J. Geogr. Inf. Sci. 2018, 33, 1–12. [CrossRef] 12. Van Wijk, J. Unfolding the Earth: Myriahedral Projections. Cartogr. J. 2008, 45, 22–42. [CrossRef]

© 2019 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY) license (http://creativecommons.org/licenses/by/4.0/).