Skip to main content

ETH: WC-02x Introduction to Web Cartography: Part 2

Week 1

  • Map Projection: Basically, it says how to bring coordinates from the real world (assumed as a sphere or ellipsoid) to a map (a flat surface). More precisely: Transforms coordinates from a geographic coordinate system (based on a sphere, so for example 47.376° N, 8.548° E) to a projected coordinate system, called Euclidean coordinates (based on a flat two-dimensional surface), with x- and y-axis. See here: desktop.arcgis.com/en/arcmap/10.3/guide-books/map-projections/about-projected-coordinate-systems.htm.
  • Robinson projection: a special projection only used for world maps. It does not base on a mathematical formula, but on empirically defined and projected points. It has distortions everywhere, but they mostly are small. Due to this, such a world map is pleasing to the eye. See more here: http://desktop.arcgis.com/en/arcmap/10.3/guide-books/map-projections/robinson.htm
  • conformal projection: that’s a map projection with which every angle on the real world (approximated as a sphere or an ellipsoid) is the same angle on the map. The Tissot’s Indicatrix of a map in conformal projection is a circle.
  • Tissot’s indicatrix: this is an indicator that shows the distortion properties of the map projection. It shows how a circle on earth is shown on the map. Because a map is not equally distorted everywhere, you mostly find several Tissot’s indicatrix on a world map to show the variations. See here https://www.esri.com/arcgis-blog/products/product/mapping/tissots-indicatrix-helps-illustrate-map-projection-distortion/
  • cylindrical projection: a very common type of projection. An example is the Mercator projection. Imagine placing a cylinder around the globe and unravelling it. Note that on a map with cylindrical projection where the earth touches the cylinder in the equator, polar regions get much bigger, and the earth’s poles are actually infinitely far away on the map. See here: https://gisgeography.com/cylindrical-projection/
  • Mercator projection: A type of cylindrical projection. It is popular because any straight line on the map is a line of constant direction (that is: azimuth) in the real world, called loxodrome. Also here, features close to the poles become very big. The poles cannot be shown, they would be infinitely far away. This means that the map is cut off at some latitude.
  • Web Mercator: a type of Mercator projection widely used in web maps, for example Google Maps or Open Street Maps. It differs only slightly from the standard Mercator projection (Web Mercator assumes the earth as a sphere, Mercator as an ellipsoid), meaning that it is not conformal. See here: https://gis.stackexchange.com/questions/120616/mercator-vs-web-mercator-for-large-scale-topographic-maps
  • Map Tiles: In web map services as Open Street Maps, the content is saved in map tiles. A tile is a part of the map, usually 256*256 pixels big, and has a certain zoom level. Because a map is divided in tiles, you don’t need to download the whole map again when zooming in, but only the needed areas (tiles). The number of tiles grows exponentially with larger scales.
  • JPEG: this is a commonly used method to compress digital images, while losing image information (and reducing storage space needed). You can compress an image from a modern camera 10 times, and usually still don’t notice the difference.
  • GIF (graphics interchange format): a lossless image format very popular in the web. It supports animations and transparency of images.
  • PNG (portable network graphics): lossless image compression format for the web. It supports transparency of images.
  • Mapping library: This is a predefined collection of functions that are useful for web map programming. Using a mapping library will save you a lot of effort otherwise needed to program every function. Many libraries are free and available online. Examples are Leaflet or OpenLayers. You can download and use these for your own map project.
  • OpenLayers: an open source JavaScript library that allows you to display geodata in the browser. It provides many predefined functions (i.e. buttons for zooming), so that you can build maps with an interface looking similar to Google Maps, for example. Requires more code than when using Leaflet, but offers more functions.
  • Leaflet: an open source JavaScript library to present geodata in the browser on a map. Offers less functionality than OpenLayers, but needs less code and is easier to read.
  • relative path: a relative path does not start at the root of the directory (that would be an absolute path, for example: C:\Program Files\internet explorer), but the path starts from a given working directory. For scripts and stylesheets, we often use a path relative to the HTML file.
  • plug-in: an extension to a given software, gives additional functionality. Can’t be used without the main program. For example, a plug-in can be a library extending the functionality of Leaflet, another library.
  • thematic map: That is simply a map that is designed specifically to show a certain theme, for example the population density of the states of the US. Have a look at this page for many examples: https://www.e-education.psu.edu/geog160/c3_p14.html
  • Apache: an open-source web server program. More than 40% of all websites run on an Apache server. It does not use JavaScript as a scripting language (but PHP).
  • node.js: an open-source web server program. It uses JavaScript on the server. See here: https://www.w3schools.com/nodejs/nodejs_intro.asp. Check here if you’re interested in the differences to Apache: https://www.quora.com/What-are-the-pros-and-cons-of-Node-js-versus-Apache-web-server
  • Node package manager: allows to extend the functionality of node.js.
  • command line: a very basic way of giving input to a software, most often with text.
  • local server: simulates a web server locally on your computer. Like this, you can access your website or webmap in a browser as you normally would, but the content is saved locally and not in the internet.
  • Choropleth map: a thematic map in which areas have a certain color or pattern in proportion to the statistical values displayed on the map. (See here: https://datavizcatalogue.com/methods/choropleth.html
  • constructor: used in programming to create new objects in object-oriented programming. Takes some arguments as input. It has the same name as the class name.

Week 2

  • shape file: a file format for geodata, widely used today for example in GIS software. It describes vector data (points, lines, polygons). A shape file consists of a .shp-file (feature geometry itself), a .shx-file (index of the geometry features), and a .dbf-file (for the attributes of the data).
  • SVG: One of the 2 methods we use to draw graphics in the browser (along with Canvas 2D). It outputs vector graphics, meaning that a lossless zoom is possible. Every SVG drawing has a connection to the DOM, meaning that you can interact with it with DOM-methods. SVG is XML-based. If a part of the image should be changed, you can simply add or remove the element via the DOM.
  • JSON: JavaScript Object Notation. A JavaScript syntax used to save data in structured way, and exchange it. Read more here: https://www.w3schools.com/js/js_json_intro.asp
  • indentation: for easier readability by humans, some lines of code (that are in lower hierarchical levels) are indented (shifted) to the right a bit.
  • XMLHttpRequest: a JavaScript object that can be used to receive any kind of data from an URL, and is thus a basic element of modern web browsers. See here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
  • cache: a very fast data storage with small capacity. With caching frequently used data, you can prevent reading the same data again and again from a slow storage medium, losing a lot of time.
  • bug: any mistake or error in a program code, causing it to crash or deliver wrong outputs.
  • GeoJSON: a vector data format to store geodata. You can use it to save points, lines and polygons (as well as multipoint, multiline and multipolygon). It bases on JSON, so it uses JavaScript syntax. Does not support or use topology. This site shows examples: http://leafletjs.com/examples/geojson/
  • polygon: An area bordered by lines. Is one of the three types of geodata (together with points and lines)
  • WGS84: a geodetic reference system describing how to unambiguously state coordinates of any place on the earth. It gives a location of any place with degrees of longitude and latitude. Here is further information: https://confluence.qps.nl/qinsy/en/world-geodetic-system-1984-wgs84-29855173.html
  • WGS84 reference ellipsoid: every reference system needs a definition of the earth’s ellipsoid. The WGS84 reference ellipsoid is a definition of semi-major and semi-minor axis of the ellipsoid, the gravitational constant and a definition for the rotation speed.
  • topology: for maps and geodata, it describes the neighbourhood of objects. In the contrary, non-topological geodata has no spatial relationship implemented and can have the same arc saved several times.
  • TopoJSON: an extension of GeoJSON that can make use of topology. This prevents redundancy and saves storage space. It uses arcs: All geometries are stiched together from (shared) line segments that are called arcs. Every arc is saved only once, but is used several times. Here you can find examples: https://github.com/topojson/topojson/wiki/Introduction
  • arc: a sequence of points used for TopoJSON. Lines and polygons are sequences of arcs.

Week 3

  • D3 (data-driven documents): This is an open source library that can be used to draw any kind of graphics. It’s interesting for us because it can be used to display thematic data on charts or maps. You can even create dynamic graphics that can change over time, and you can interact with them. For this, D3 manipulates the DOM. When using D3, the user selects some DOM nodes and uses operators to manipulate them. D3 supports JSON and GeoJSON data. Here you find some examples: https://www.safaribooksonline.com/blog/2013/11/18/intro-to-d3-a-data-visualization-primer/
  • data binding: It’s for binding our data input to DOM elements. Without it, you just have DOM elements without any data. It is done with the function d3.enter(). This is a very good explanation: http://alignedleft.com/tutorials/d3/binding-data
  • function chaining: this allows to perform many functions in one single line of code. This works because JavaScript doesn’t read line breaks. It saves you a lot of code. An example is: d3.select("body").append("p").text("New paragraph!"); This may look messy, but you can also write each function on a new line: 
d3.select("body")
    .append("p")
    .text("New paragraph!");

See here for a good explanation: http://alignedleft.com/tutorials/d3/chaining-methods

  • enter-function (D3): The method .enter() checks the DOM, and then the data being handed to it. If there are more data values than corresponding DOM elements, then .enter() returns an enter-selection that represents the elements that need to be added to the DOM (so: The enter selection contains all data elements that have not yet been bound to an existing DOM element.). Usually it is followed by .append() to add the elements to the DOM. Here you find more info: http://d3indepth.com/enterexit/ and http://alignedleft.com/tutorials/d3/binding-data.
  • exit-function (D3): The opposite of the enter-function. If there are less data values than corresponding DOM elements, then .exit() returns the elements that need to be removed from the DOM. Usually followed by .remove() to actually remove the surplus elements. This link can help: http://d3indepth.com/enterexit/
  • key function (D3): The key function tells D3 how to join the data to the elements. If you don’t supply a key function, the default key function is used, so the indices of the array (0, 1, 2, …). Work through the detailed explanation on this link to understand the key function: https://stackoverflow.com/questions/24175624/d3-key-function
  • antimeridian problem: This problem arises because when you want to display the spherical earth on a flat map using a projection, you must cut the globe once. Many world maps are centered around the prime meridian (going through Greenwich, London) and thus cut at the antemeridian (180° longitude). Representing a line passing over the 180° meridian is therefore not so easy. The solution is presented at the end of this: https://macwright.org/2016/09/26/the-180th-meridian.html. It is recommended for a line going over 180° longitude to split it up in 2 parts, so that no part crosses the antimeridian.
  • spherical topology: the topology on a sphere, meaning it is closed, has no boundary and no holes.
  • great circle: You can imagine a great circle as an intersection of a sphere with a plane passing through the center of the sphere. This means that the diameter of the great circle equals the diameter of the sphere. The shortest distance on the sphere between any 2 points on the sphere (so the path a plane should fly) is a great circle. This is why a plane travelling between North America and Europe goes so far North – because it roughly follows the great circle.

Week 4

  • perspective view: a non-orthographic view, meaning that you see the space not straight down (like it would be the case on a map), but in an oblique angle.
  • block diagram: a map-related representation (so not a map in itself). Often used in geology. This shows an example: http://valvehome.us/block-diagram-geology/block-diagram-geology-geology-lab-final-geology-with-yihun-oklahoma-state-college/
  • map-related representations: Such a thing shows spatial information like a map does, but is not a map in itself. Examples are block diagrams, (virtual) globes or panoramas. A map is orthographic, whereas map-related representations are non-orthographic.
  • virtual globe: an interactive, three-dimensional software representation of the earth. The user can virtually move around by zooming or changing the camera angle. The most famous virtual globe today is Google Maps.
  • GPU: stands for graphics processing unit. This is a processing unit in computers that is specialised in the calculation of graphics. Its strength is the big number of small processors, so that it can run several calculations in parallel.
  • OpenGL: Open Graphics Library. This is a programming interface independent of a programming language or platform. It can be used to develop programs that use 3D graphics. It is used to communicate with the GPU.
  • WebGL: This is a graphics library that enables an allowes the use of animated 3D graphics or web maps in the web. It is a JavaScript API. It is the browser version of OpenGL. It is hard to use as it is very close to the hardware.
  • three.js: a WebGL-based JavaScript library used to display (animated) 3D graphics in the browser. It uses the GPU for displaying the graphics. Keep a movie scene in mind: For three.js you need a scene, a camera and some light source. This basic video shows what you can do with three.js: https://www.youtube.com/watch?v=ABV1mK1CGOY. This shows some easy code examples: https://aerotwist.com/tutorials/getting-started-with-three-js/
  • render: in computer graphics, this means the creation of an image starting from raw data. During rendering, the computer must find out, which objects are visible from the viewer and how the surfaces are looking like (depending on material properties like colour or reflectivity).
  • wireframe: the representation of a 3D object as a “grid” of lines (there’s a line at every edge of the object). See a wireframe model of a teapot here: http://caig.cs.nctu.edu.tw/course/CG2007/images/ex1_wireframe.jpg. You can assign a wireframe model a material, and then render it to deliver a realistic image. 
  • mesh: similar to a wireframe, but with some texture: It is a collection of vertices, edges and surfaces  that define the surface of a 3D object. The faces are often triangles. This image shows a triangle mesh of a dolphin: https://en.wikipedia.org/wiki/Polygon_mesh#/media/File:Dolphin_triangle_mesh.png
  • triangulated surface: a mesh can be a result of a surface triangulation. A triangulated surface consists of many triangles that together form the object. There are algorithms that determine how the triangulation is done. For example, the triangles should not be too long and narrow. This is an example of a triangulated surface: https://en.wikipedia.org/wiki/Surface_triangulation#/media/File:Triang-cyl-sph4.svg
  • Cartesian coordinate system: Probably the simplest coordinate system you can imagine. The coordinates are the distances from the perpendicular coordinate axes. It looks like this in the 2D case: https://upload.wikimedia.org/wikipedia/commons/0/0e/Cartesian-coordinate-system.svg
  • equirectangular / plate-carree map projection: This projection maps meridians to vertical straight lines with constant distance in between them. The circles of latitude are mapped to horizontal lines. So it’s a grid of equal rectangles. It’s not an equal area projection, and also not conformal.  This shows a short summary: http://desktop.arcgis.com/en/arcmap/10.3/guide-books/map-projections/plate-carr-e.htm This world map is in equirectangular projection: https://upload.wikimedia.org/wikipedia/commons/1/17/Plate_Carr%C3%A9e_with_Tissot%27s_Indicatrices_of_Distortion.svg
  • texture: this is an image that shall be mapped on a surface of a 3D object. This means that every surface vertex is assigned a colour. Note that the accuracy of the geometry is not getting higher. But the 3D model still looks more detailed, thanks to the colour information.
  • Lambertian model: This model is used for a shading of an object. It mostly fits for a matte object, because in the Lambertian model, light is reflected in all directions (so unlike a mirror). This picture shows this diffuse reflection: https://en.wikipedia.org/wiki/Diffuse_reflection#/media/File:Lambert2.gif
  • Phong model: This picture shows the 3 steps of the Phong illumination model: https://de.wikipedia.org/wiki/Phong-Beleuchtungsmodell#/media/File:Phong_components_version_4.png. This model can be used for smooth, plastic-like surfaces. This means that it combines the diffuse reflection (of a rough surface) with the specular reflection (of a smooth surface).
  • Blender: a free 3D graphics software. It is a very powerful program, but a bit hard to learn for beginners. You can model 3D objects and create realistic images and animations. If you want to see the program in action, have a quick look at this video, that shows how to create a 3D coffee cup in Blender: https://www.youtube.com/watch?v=y__uzGKmxt8
  • Cinema 4D: another 3D graphics software, that is not free, but used even for professional 3D animations.
  • Collada: an XML-based open exchange format for data between different 3D programs, like for example Blender or Cinema 4D. File ending .dae.
  • glTF: short for GL transmission format. A file format for the exchange of 3D scenes (like the “JPEG in 3D”). Similar to Collada, but a bit more recent and advanced.
  • proprietary application: a non-open-source program (so not for free), for which the publisher or developer retains copyright over the source code. Often the number of installations is limited, or there is an online product activation or activation code.
  • open source software: a program that is free to use. Anyone has the right to view the source code, change it or send it to others.
  • Cesium: an open source library to develop virtual 3D globe web apps. You can create a globe with only one div element. Download it here: https://cesiumjs.org. Many  globes are already included (i.e. Mapbox street map, or a nighttime globe). You can also display animations. Thematic data can of course also be visualised.
  • instance (programming): An instance is a specific object of a class. For example (taken from here: https://stackoverflow.com/questions/20461907/what-is-meaning-of-instance-in-programming), a class may be “cars”, and it says that every car object must have a model name and production year. But if you want to store your personal car, you must create an object (or instance) of the class, where you actually store your car’s information.
  • oblique view: In an oblique view of the earth, you see the earth from an angle, and not straight down. This is an example: https://nssdc.gsfc.nasa.gov/imgcat/hires/a17_h_148_22718.gif
  • orthographic view: In this view, you see the earth from the top straight down. In an orthographic projection, the sphere is projected onto a tangent plane. The earth always appears as a half circle. This is an example: https://en.wikipedia.org/wiki/Orthographic_projection_in_cartography#/media/File:Orthographic_projection_SW.jpg
  • prism map: A prism map is a thematic 3D map displaying some thematic data. The height of the terrain is raised according to some data values. This is an example: https://d3svfn6as6o5bl.cloudfront.net/mpt/howto/prism_log_map.png. It shows the population per US county (on a logarithmic scale, hence the small differences in prism height).

Week 5

  • Vue.js: This is an open-source DOM-based JavaScript framework with which you can build User Interfaces (for interactivity in web applications) much more easily than if you construct all by yourself. It allows you to create nice interfaces already with little learning effort. It is a lightweight framework with good performance. If you are really interested in the topic, you can watch this 1-hour video: https://www.youtube.com/watch?v=z6hQqgvGI4Y
  • user interface: This is where the interaction between human and machine occurs. Humans give commands to the machines, and the machine returns information that is interesting for the user. In programming, we are often talking about graphical user interfaces (GUI) with buttons, sliders etc.
  • event handler: Event handlers are added inside the HTML tags, not in <script>…</script>. Examples for JavaScript event handlers are the ones used for clicking (onclick), or after an element has finished loading (onload). This link explains it more: http://www.javascriptkit.com/javatutors/event1.shtml
  • dynamic list: A list that can change during the course of the program, for example, a new element is added or an old one is deleted. This is a code example: https://memorynotfound.com/dynamically-addremove-items-list-javascript/
  • ul-element (HTML): an unordered list, so for example with bullet points. This shows the difference to an ordered list (ol-element): https://www.w3schools.com/html/html_lists.asp
  • li-element (HTML): a list element, can either belong to an ordered or to an unordered list. If you’re still confused about ol, ul and li, then check this out: https://www.w3schools.com/tags/tag_li.asp
  • watcher (Vue): this is a useful property of Vue; it allows you to react to changes in data. A watcher listens whenever the assigned data values change. So with a watcher, you can – for example – analyse the data entered into a text box while the user is still typing. On this page (at the bottom) there is an example: https://www.w3schools.com/tags/tag_li.asp
  • Integrated Development Environments (IDE): This is a program that makes programming of software easier and more comfortable compared to just using a text editor. Some advantages are automatic code completion, a debugging function, syntax highlighting, or the support of code versions. Some IDE can be used with several programming languages, some others only with one.
  • WebStorm: This is an IDE for programming in JavaScript, and can thus be used for programming of web apps. Vue.js can be used in WebStorm.
  • NetBeans: This is a free IDE, that can be used for coding in Java, C, C++ and JavaScript. It is similar to the popular Eclipse IDE.
  • hot module replacement: With this technique, you can change modules in a running application (for example add or remove them) without fully reloading the page. It’s still in experimental state, so it should not be used for productive programs. Here you find further information: https://stackoverflow.com/questions/24581873/what-exactly-is-hot-module-replacement-in-webpack
  • Webpack: This is an open-source JavaScript software that can be used for module bundling. This means that all modules of your program are packed into one bundle, based on a dependency graph that Webpack creates.
  • syntax highlighting: This is a functionality of many text editors or IDEs. According to the category of the terms or statements, they are marked in different colours. The compiler doesn’t care about these colours, they are only to allow us humans to read the code more easily and find mistakes more quickly. See an example here: https://en.wikipedia.org/wiki/Syntax_highlighting#/media/File:HTML_source_code_example.svg
  • indentation: Every code you write should be properly indented, to increase readability by humans. Indentation shows the hierarchy of the code. Usually, each indentation step is two to four spaces. This is some properly indented Java code: https://nullprogram.com/img/emacs/visual-indentation-mode-java.png
  • block structure: A block is a collection of zero or several lines of code, that are grouped together (in JavaScript with curly braces). An example of a block is all the code lines that are repeatedly processed in a for- or while-loop.
  • monospace font: A monospace (or non-proportional) font is a font where every character has the same width. They are preferably used for coding in editors or IDEs.
  • proportional font: This is a font where every character takes the amount of space that is actually needed. This means that every character has got a different width (the “i” is very narrow, for example).
  • block comment (JavaScript): a comment starting with /* and ending with */. Everything in between is a comment (even when stretching over several lines). The different sorts of comments are explained here: https://www.w3schools.com/js/js_comments.asp
  • inline comment (JavaScript): Inline (or single-line) comments start with // and they end with the end of the line. The different sorts of comments are explained here: https://www.w3schools.com/js/js_comments.asp