Global

Members

altPressed :Boolean

Whether the alt key (Option or ⌥ on macOS) has been held down.
Type:
  • Boolean
Source:

(constant) animSong :String

Animation song URL.
Type:
  • String
Source:

(constant) animate

Define an animation loop.

Step 0.5° ⇒ 60 fps = 30°/s ⇒ 360° in 12s
Source:
See:

(constant) aspect :Number

Canvas aspect ratio: width / heigth.
Type:
  • Number
Source:

(constant) audio :Audio

Audio object for playing song from a given url link.
Type:
  • Audio
Source:

axis :String

Rotation axis.
Type:
  • String
Source:

axisBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

axisColorBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) axisColors :Float32Array

Colors for creating the axes.
Type:
  • Float32Array
Source:

(constant) axisVertices :Float32Array

Vertex coordinates for creating the axes.
Type:
  • Float32Array
Source:

(constant) canvas :HTMLCanvasElement

Canvas element and its tooltip.

Canvas is used for drawing the globe and its tooltip is used for displaying the GCS coordinates (longitude and latitude) on the globe when pointer is moved upon.

Canvas is a bitmap element that can be used to draw graphics on the fly via scripting (usually JavaScript). It is a part of the HTML5 specification and is supported by all modern browsers.

Tooltip is a small pop-up box that appears when the user hovers over an element. It is used to provide additional information about the element, such as its coordinates.

Both canvas and tooltip are used to provide a better user experience by allowing the user to interact with the globe and see its coordinates.

Type:
  • HTMLCanvasElement
Source:

(constant) canvastip :HTMLElement

Tooltip element for displaying GCS coordinates on the globe.

Tooltip is a small pop-up box that appears when the user hovers over an element. It is used to provide additional information about the element, such as its coordinates.

Tooltip is used to provide a better user experience by allowing the user to interact with the globe and see its coordinates.

Type:
  • HTMLElement
Source:

(constant) cities :Object

Object with arrays of city names ordered by different keys.
Type:
  • Object
Properties:
Name Type Description
byLongitude Array.<String> city names ordered by longitude.
byDate Array.<String> city names ordered by date.
current Array.<String> current city names.
previous String previous city name.
timeline Array.<Number> list of city years.
longitude Array.<Number> list of city longitudes.
country Array.<String> city names in the selected country.
nameToDate Array.<{String, Number}> map of city names to dates.
nameToLongitude Array.<{String, Number}> map of city names to longitudes.
Source:

colorBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

colorShader :WebGLShader

Handle to the compiled shader program on the GPU.
Type:
  • WebGLShader
Source:

(constant) colorTable :Object.<String, (Array.<Number>|String)>

Color table used in the shader for different path types. The keys of the table are the path types and the values are the corresponding RGBA or HTML5 color values.
    ------- lines -----------------
  • loxodrome: [1,0,1,1] // magenta
  • meridian: [1,0,0,1] // red
  • great_circle: [0,1,1,1] // cyan
  • normal: [1,1,0,1] // yellow
    • ------- points --------------
  • unknown: [0,0,1] // blue
  • null: [0,0,0], // black
  • poiAD: [1,0,0] // red
  • poiBC: [1,1,0] // yellow
    • ------- HTML5 -------------
  • rhumb: "magenta"
  • mer: "red"
  • gc: "cyan"
  • un: "blue"
  • nu: "black"
  • ad: "red"
  • bc: "yellow"
Type:
  • Object.<String, (Array.<Number>|String)>
Source:

controlPressed :Boolean

Whether the control key has been held down.
Type:
  • Boolean
Source:

country :String

Increment/decrement currentLocation only for locations in country.
Type:
  • String
Source:

culling :Boolean

Toggle back face culling on/off.
Type:
  • Boolean
Source:
See:

currentLocation :String

Name of the current city location.
Type:
  • String
Source:

(constant) currentMeridian :GCS

Current meridian onto globe.
Type:
Source:

cursorPosition :Object.<{x:Number, y:Number}>

Current cursor position onto globe.
Type:
  • Object.<{x:Number, y:Number}>
Source:

(constant) dr :Number

Scaling factor applied to a radius so a line or a point is rendered on top of its textured surface.
Type:
  • Number
Source:

(constant) earthRadius :Number

Radius of the earth in kilometers.
Type:
  • Number
Source:

(constant) element :Object

HTML elements in the interface.
Type:
  • Object
Properties:
Name Type Description
mesh HTMLInputElement checkbox
axes HTMLInputElement radio
equator HTMLInputElement checkbox
hws HTMLInputElement checkbox
fix_uv HTMLInputElement checkbox
merc HTMLInputElement checkbox
cull HTMLInputElement checkbox
texture HTMLInputElement checkbox
textures HTMLSelectElement select
models HTMLSelectElement select
textimg HTMLImageElement img
tooltip HTMLInputElement checkbox
tip HTMLInputElement checkbox
php HTMLInputElement checkbox
print HTMLInputElement button
screenshot HTMLInputElement checkbox
closest HTMLButtonElement button
animation HTMLButtonElement button
byDate HTMLInputElement checkbox
locations HTMLInputElement checkbox
timeline HTMLInputElement range
lblTimeline HTMLLabelElement label
steplist HTMLDataListElement list
country HTMLSelectElement select
loxodrome HTMLInputElement checkbox
canvasimg HTMLCanvasElement canvas
latitude HTMLInputElement input
longitude HTMLInputElement input
locInfo HTMLDivElement div
search HTMLInputElement div
city HTMLSelectElement select
Source:
See:

(constant) eye :vec3

Camera position.
Type:
Source:

fixuv :Boolean

Whether uv spherical coordinates should be "fixed", when converted from cartesian (seamless).
Type:
  • Boolean
Source:
See:

(constant) forwardVector :vec3

Current forward vector (0,0,1) or (-90°,0°) in GCS coordinates, which corresponds to the z-axis in the intrinsic frame and where the phong highlight position is set on the globe.

Each time the model is rotated towards the camera, this vector is updated to its new position in the extrinsic frame.
Type:
Source:

gl :WebGL2RenderingContext

The OpenGL context.
Type:
  • WebGL2RenderingContext
Source:

globeRadius :Number

Current radius of the globe.
Type:
  • Number
Source:

gpsCoordinates :Object.<location:String, attributes:Object>

A set of world locations given by their GPS coordinates.

These locations are read from a json file.
Type:
  • Object.<location:String, attributes:Object>
Properties:
Name Type Description
location String name of the site, e.g., "Paris".
attributes Object
Properties
Name Type Description
country String site's country.
remarkable String site's historical figure.
longitude Number site's longitude.
latitude Number site's latitude.
Source:

image :HTMLImageElement

Texture image.
Type:
  • HTMLImageElement
Source:
See:

(constant) imageFilename :Array.<String>

Array holding image file names to create textures from.
Type:
  • Array.<String>
Source:

indexBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) isIOS :Boolean

Test if running in IOS.
Type:
  • Boolean
Source:

isMap :Boolean

Whether the texture represents a map.
Type:
  • Boolean
Source:

(constant) isSafari :Boolean

Test if running in Safari.
Type:
  • Boolean
Source:

(constant) lightPosition :Array.<Number>

Light Position.

Phong illumination model will highlight the projection of this position on the current model.

In the case of a sphere, it will trace the equator, if no other rotation is applied by the user.

Type:
  • Array.<Number>
Source:

(constant) lightPropElements :Object.<String:Float32Array>

Light properties.

Ambient, diffuse and specular.

Remember this is column major.

Type:
  • Object.<String:Float32Array>
Source:

lightingShader :WebGLShader

Handle to the compiled shader program on the GPU.
Type:
  • WebGLShader
Source:

lineBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) lineWidth :Number

Meridian / Parallel width.
Type:
  • Number
Source:

lines :Float32Array

Array with edges end points.
Type:
  • Float32Array
Source:

locationsBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

loxodrome :Boolean

Whether to plot loxodromes.
Type:
  • Boolean
Source:

mat3 :glMatrix.mat3

3x3 Matrix
Type:
  • glMatrix.mat3
Source:
See:

mat4 :glMatrix.mat4

4x4 Matrix
Type:
  • glMatrix.mat4
Source:
See:

(constant) matPropElements :Object.<String:Float32Array>

Material properties.

Ambient, diffuse and specular.

Remember this is column major.

Type:
  • Object.<String:Float32Array>
Source:
See:

(constant) maxLatitude :Number

Maximum latitude for Mercator projection.

  • tan-1(sinh(π)) in degrees
Type:
  • Number
Source:

maxSubdivisions :Number

Maximum Number of subdivisions to turn a polyhedron into a sphere.
Type:
  • Number
Source:

mercator :Boolean

Whether to use a Mercator projection.
Type:
  • Boolean
Source:
See:

mercatorVertices :Array.<Object>

Vertex coordinates for creating a great circle in the Mercator map.
Type:
  • Array.<Object>
Source:

meridianBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) mobile :Boolean

Test for mobile devices.
Type:
  • Boolean
Source:

(constant) modelM :mat4

Model matrix for rotating the model towards the camera around the forward vector.

Used only for displaying a location at the center of the globe.
Type:
Source:
See:

modelMatrix :mat4

Model matrix.

Transforms from model coordinates to world coordinates.

Used only when rotating the model around the coordinate axes (intrinsic or extrinsic rotations) or along a meridian.

A rotation along a parallel corresponds to an intrinsic rotation around the y-axis.

Type:
Source:
See:

(constant) monitorTable :Array.<Array.<Number>>

Monitor resolution table.
  1. 96 - standard CSS pixel density (1024X768) 13.3" (CRT)
  2. 96.42 - Sansung Syncmaster (1280X1024) 17" (HD)
  3. 117.5 - Dell U2515H, (2560x1440) 25" (QHD/2K)
  4. 127.68 - MacBook air 2017, (1440x900) 13.3"
  5. 141.21 - Inspiron 15 5848, (1920x1080) 15.6" (Full HD)
  6. 141.21 - LG Flatron E2350, (1920x1080) 23" (Full HD)
  7. 163.18 - Dell Plus (3840x2160) 27" (4K UHD)
  8. 326 - iPhone SE, (320x568) 4" DPR=2 (retina)
  9. 401 - iPhone 7+, (414x736) 5.5" DPR=3 (retina)
  10. 326 - iPhone 8, (375x667) 4.7" DPR=2 (retina)
  11. 326 - iPhone 11, (414x896) 6.1" DPR=2 (retina)
  12. 460 - iPhone 13, (390x844) 6.1" DPR=3 (retina)
  13. 326 - iPad mini 5, (768x1024) 7.9" DPR=2 (retina)
Type:
  • Array.<Array.<Number>>
Source:
See:

mscale :Number

Scale applied to a model to make its size adequate for rendering.
Type:
  • Number
Source:

noTexture :Boolean

Indicates whether not use the texture from the model.
Type:
  • Boolean
Source:

normal :Float32Array

Array with normal end points.
Type:
  • Float32Array
Source:

normalBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

numSubdivisions :Number

Number of subdivisions to turn a polyhedron into a sphere.
Type:
  • Number
Source:

parallelBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) phongHighlight :vec2

Phong highlight position on screen.
Type:
Source:

(constant) pixelRatio :Number

Device Pixel Ratio (DPR).

The ratio of physical pixels to CSS pixels, e.g.:
  • 1.0 for standard displays
  • 2.0 for retina screens
Type:
  • Number
Source:

(constant) pointRadius :Number

Radius of a point location on chart.
Type:
  • Number
Source:

(constant) pointSize :Number

Size of a point location on globe.
Type:
  • Number
Source:

previousLocation :gpsCoordinates

Attributes of the previous city location.
Type:
Source:

(constant) projection :mat4

Projection matrix.
Type:
Source:

(constant) readFileNames :Promise.<Array.<String>>

Promise for returning an array with all file names in directory './textures'.

Since php runs on the server, and javascript on the browser, a php script is invoked asynchronously via ajax, because Javascript doesn't have access to the filesystem.

The JavaScript Fetch API provides a modern, promise-based interface for making network requests, such as fetching data from an API. It is designed to replace older methods like XMLHttpRequest and offers a more streamlined way to handle asynchronous operations.

The Response object provides methods to parse the response body in various formats, such as json(), text(), blob(), arrayBuffer(), and formData().
Type:
  • Promise.<Array.<String>>
Source:
See:

(constant) rotMatrix :Object

Rotation matrix for the three axes.

The rotation matrices are created at compile (loading) time, so that they can be reused in each frame without recalculating them. The rotation matrices are used to rotate the model around the x, y, or z-axis, depending on the axis chosen. The rotation is done by multiplying the model matrix with the rotation matrix, either on the left (extrinsic rotation) or on the right (intrinsic rotation).
Type:
  • Object
Properties:
Name Type Description
x mat4 rotation matrix around the x-axis.
y mat4 rotation matrix around the y-axis.
z mat4 rotation matrix around the z-axis.
Source:

(constant) rotationMatrix :mat4

Rotation matrix for rotating the model towards the camera.

Type:
Source:

rotator :SimpleRotator

Arcball.
Type:
Source:

searchPredicate :function

Search predicate: by city, country, remarkable or anything.
Type:
  • function
Source:

searchResult :Array.<String>

Search result.
Type:
  • Array.<String>
Source:

(constant) selector :Object

Turn display status of the model on/off.
Type:
  • Object
Properties:
Name Type Description
lines Boolean mesh and normals.
texture Boolean lines x texture.
axes Boolean coordinate axes.
paused Boolean Arcball x rotation.
intrinsic Boolean rotation around global x local axes.
equator Boolean parallel and meridian of the current location.
hws Boolean model's triangulation algorithm source: three.js x hws.
tootip Boolean location information.
cities Boolean sequential location traversal order.
locations Boolean location points.
Source:

(constant) shininess :Array.<Number>

Specular term exponent used in the Phong reflection model.

One entry for each material property.
Type:
  • Array.<Number>
Source:

(constant) sphereRadius :Number

Radius of the sphere.

Subdivision sphere is a unit sphere and therefore the current globe radius must be restored to this value.
Type:
  • Number
Source:

(constant) teapotModel :modelData

An IFS of the famous teapot, about 20 units big.
Type:
Source:

texCoordBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

textureCnt :Number

Current texture index.
Type:
  • Number
Source:

textureHandle :WebGLTexture

Handle to the texture object on the GPU.
Type:
  • WebGLTexture
Source:
See:

theModel :modelData

Current model data.
Type:
Source:

unit :String

Distance unit: 0: km, 1: mi, 2: nm
Type:
  • String
Source:

vec2 :glMatrix.vec2

gl-matrix 2 Dimensional Vector.
Type:
  • glMatrix.vec2
Source:

vec3 :glMatrix.vec3

gl-matrix 3 Dimensional Vector.
Type:
  • glMatrix.vec3
Source:

vec4 :glMatrix.vec4

gl-matrix 4 Dimensional Vector.
Type:
  • glMatrix.vec4
Source:

vertexBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

vertexNormalBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) viewMatrix :mat4

View matrix.
Type:
Source:
See:

yNorth :Boolean

Sets the North to be the y-axis, so the z-axis points outside the screen.
Type:
  • Boolean
Source:

zoomPressed :Boolean

Whether the zoom key has been held down.
Type:
  • Boolean
Source:

Methods

UV2Conical(uv, mercopt) → {Array.<{Number, Number, Number, Number}>}

Convert from UV coordinates (s, t) to conical coordinates.
Parameters:
Name Type Attributes Default Description
uv Object.<{s: Number, t:Number}> ∈ [0,1].
merc Boolean <optional>
 mercator apply mercator transformation if true.
Source:
Returns:
conical coordinates: [r, h, θ, y].
Type
Array.<{Number, Number, Number, Number}>

UV2Cylindrical(uv, mercopt) → {Array.<{Number, Number, Number}>}

Convert from UV coordinates (s, t) to cylindrical coordinates.
Parameters:
Name Type Attributes Default Description
uv Object.<{s: Number, t:Number}> ∈ [0,1].
merc Boolean <optional>
 mercator apply mercator transformation if true.
Source:
Returns:
cylindrical coordinates: [r, θ, y].
Type
Array.<{Number, Number, Number}>

UV2Spherical(uv) → {Array.<{Number, Number}>}

Convert from UV coordinates (s, t) to spherical coordinates.
Parameters:
Name Type Description
uv Object.<{s: Number, t:Number}> ∈ [0,1].
Source:
Returns:
spherical coordinates ∈ [0,2π] x [0,π].
Type
Array.<{Number, Number}>

addGroup(group)

Add a group for directories, mercator and equirectangular charts.
Parameters:
Name Type Description
group String description.
Source:
See:

addListeners()

Appends event listeners to HTML elements.

Also appends event listeners to the rot and mode input radio buttons.

Source:
See:

addSymbolInCountry(c, str)

Adds an emoji symbol to all countries in a given array.

If the symbol is empty, the first symbol of all countries is removed.
Parameters:
Name Type Description
c Array.<String> country array.
str String symbol.
Source:

antimeridianCrossing(deltaLongitude, degrees) → {Number}

Handle longitudinal crossing of anti-meridian for getting the shortest arc.

return Math.abs(deltaLongitude) > Math.PI ? 2 * Math.PI - Math.abs(deltaLongitude) : Math.abs(deltaLongitude);
Parameters:
Name Type Default Description
deltaLongitude Number difference between two longitudes in radians.
degrees Boolean false whether the input is in degrees or radians (default: false).
Source:
See:
  • Conjugate (explementary) angles.
Returns:
adjusted difference (an arc less than 180 degrees).
Type
Number

bearingAngle(gcs1, gcs2) → {Number}

Calculate the bearing angle between two GCS coordinates.

A bearing (or azimuth) angle is a horizontal, clockwise angle measured from North (000°) to determine direction in navigation and surveying. It is represented using three figures (e.g., 045° for Northeast) in the range [000°, 360°). 
Formula:   Δψ = ln( tan(π/4 + φ2/2) / tan(π/4 + φ1/2) )
           θ = atan2(Δλ, Δψ)

where:     φ is geodetic latitude, ψ is isometric latitude, λ is longitude,
           Δλ is taking shortest route (<180°), R is the earth’s radius,
           ln is natural log

note:  if the two locations are on the same parallel (Δφ = 0),
       the bearing angle is either 90° or 270°
       atan2(±y, 0) is ±π/2, which corresponds to -90° or 90° in degrees.
       atan2(0,0) is 0, which corresponds to 0° in degrees.
Parameters:
Name Type Description
gcs1 GCS first pair of gcs coordinates.
gcs2 GCS second pair of gcs coordinates.
Source:
See:
Returns:
bearing angle in degrees from gcs1 to gcs2.
Type
Number

bearingAngleAndDistance(gcs1, gcs2, Ropt) → {Object.<{bearing: Number, distance: Number}>}

Returns the bearing angle (azimuth) and distance between two points on a loxodrome (rhumb line).

  • Δlat (Difference of Latitude): the north-south distance between the departure and destination points, measured in minutes of arc or nautical miles (1' = 1 NM).
  • Bearing (θ): the constant angle (course) between the meridian and the path of the vessel.
  • Departure (Δlat * tan(bearing)): the east-west distance in nautical miles, which changes depending on the latitude (narrowing towards the poles).
  • Distance (D): the length of the loxodrome, calculated as:
    • dLat = lat2 - lat1, in radians
    • dLon = lon2 - lon1, in radians
    • nautical miles = minutes of arc along a meridian (1' = 1 NM)
    • sin(90-bearing) = cos(bearing)
    • dLat = nm * sin(90-bearing) = nm * cos(bearing)
    • D = R * |dLat| * sec (bearing), if dLat != 0
    • D = R * |dLon| * cos (lat1), if dLat == 0
Parameters:
Name Type Attributes Default Description
gcs1 GCS latitude and longitude of the first point in degrees.
gcs2 GCS latitude and longitude of the second point in degrees.
R number <optional>
 earthRadius radius of the Earth in kilometers (default: 6371 km).
Source:
See:
Returns:
bearing angle from gcs1 to gcs2 and distance.
Type
Object.<{bearing: Number, distance: Number}>

bearingAngleAndDistanceCyl(gcs1, gcs2, Ropt) → {Object.<{bearing: Number, distance: Number}>}

Calculates the bearing angle (course) and distance between two points on a cylinder using the loxodrome path.

Parameters:
Name Type Attributes Default Description
gcs1 GCS latitude and longitude of the first point in degrees.
gcs2 GCS latitude and longitude of the second point in degrees.
R Number <optional>
 earthRadius radius of the Earth in kilometers (default: 6371 km).
Source:
Returns:
bearing angle from gcs1 to gcs2 and distance.
Type
Object.<{bearing: Number, distance: Number}>

binarySearch(arr, target) → {Number}

Performs a binary search on a sorted array to find the index of a target in O(log(n)).

Parameters:
Name Type Description
arr Array the sorted array to search.
target String | Number the value to search for.
Source:
See:
Returns:
the index of the target value or -1, if not found.
Type
Number

calculateLoxodromeDistance(lat1, lon1, lat2, lon2, Ropt) → {number}

Calculates loxodromic (rhumb line) distance between two points.

Formula:   Δψ = ln( tan(π/4 + φ2/2) / tan(π/4 + φ1/2) )
           q = Δφ / Δψ (or cosφ for E-W line)
           d = √(Δφ² + q²⋅Δλ²) ⋅ R 	(Pythagoras)

where:     φ is geodetic latitude, ψ is isometric latitude, λ is longitude,
           Δλ is taking shortest route (<180°), R is the earth’s radius,
           ln is natural log
Parameters:
Name Type Attributes Default Description
lat1 number latitude of first point in degrees.
lon1 number longitude of first point in degrees.
lat2 number latitude of second point in degrees.
lon2 number longitude of second point in degrees.
R number <optional>
 earthRadius radius of the Earth in kilometers (default: 6371 km).
Source:
See:
Returns:
distance in kilometers.
Type
number

calculateLoxodromeDistanceCyl(lat1, lon1, lat2, lon2, Ropt) → {number}

Calculates loxodromic (rhumb line) distance between two points on cylinder.

Loxodromes appear as straight lines on a Mercator chart, but their length on the map is generally larger than their actual shorter length on the spherical surface. Calculations show that a loxodrome spanning latitudes (e.g., 55°S to 55°N) can measure significantly more on the map compared to its actual length on the sphere.

For example, the length of the loxodrome between Syracuse, New York and Moscow with the assumed Earth’s radius is 8,283.2 km. The distance between Syracuse and Moscow on a map drawn in the Mercator projection is 12,820.7 km. This is the length of the loxodrome image on the map, which is significantly different from the length of the loxodrome on the sphere.

   Syracuse, NY (lat1 = 43°00'00" N, lon1 = 76°00'00" W)  (43.046944, -76.144444)
   Moscow       (lat2 = 55°45'00" N, lon2 = 37°37'00" E)  (55.751244, 37.618423)
   R = 6370 km                                             R = 6371 km
   On chart = 12,820.7 km                                  On chart = 12,838 km
   On globe = 8,283.2 km                                   On globe = 8,290 km
  • Δlat (Difference of Latitude): the north-south distance between the departure and destination points,
    measured in minutes of arc or nautical miles (1' = 1 NM).
  • Δlon (Difference of Longitude): the east-west distance between the departure and destination points.
  • Distance (D): the length of the loxodrome, calculated as:
    • dLat = lat2 - lat1, in radians
    • dLon = lon2 - lon1, in radians
    • D = √ (R * dLat) 2 + (R * dLon) 2
      • ---------------- Area ------------------
    • Sphere = 4πR²
    • Equator = 2πR
    • Chart Equirect = 2πR x πR = 2π²R²
    • Chart Mercator = 2πR x 2πR = 4π²R²
    • Cylinder = 2πRH = 2πR x πR = 2π²R² (2x1 aspect)
      • ----------- Area x Length -------------
    • Area(C) = Area(CE) > Area(S)
    • Loxodrome(C) = Loxodrome(CE) ≥ Loxodrome(S)
Parameters:
Name Type Attributes Default Description
lat1 number latitude of first point in degrees.
lon1 number longitude of first point in degrees.
lat2 number latitude of second point in degrees.
lon2 number longitude of second point in degrees.
R number <optional>
 earthRadius radius of the Earth in kilometers (default: 6371 km).
Source:
See:
Returns:
distance in kilometers.
Type
number

calculatePPI(widthPixels, heightPixels, diagonalInches) → {Number}

Returns the monitor pixel density given its screen resolution and diagonal length.

Parameters:
Name Type Description
widthPixels Number horizontal resolution.
heightPixels Number vertical resolution.
diagonalInches Number diagonal length of the screen.
Source:
Returns:
pixels per inch.
Type
Number

chartBackground(canvasopt)

Draws the texture image on a canvas as a background.

This allows the texture to be used as a background for the WebGL rendering.
Parameters:
Name Type Attributes Default Description
canvas HTMLCanvasElement <optional>
 element.canvasimg the canvas element to draw on.
Source:
See:

checkForMapTexture(filename) → {Boolean}

Checks if the given texture file name represents a map. It looks for the substrings "map", "earth", "ndvi" or "ocean" in the file name. The check is case insensitive.
Parameters:
Name Type Description
filename String texture fine name.
Source:
Returns:
whether the texture represents a map.
Type
Boolean

clamp(value, min, max) → {Number}

Clamp a value between a minimum and maximum value.
Parameters:
Name Type Description
value Number value to be clamped.
min Number minimum value.
max Number maximum value.
Source:
Returns:
clamped value.
Type
Number

cleanLocation(location) → {String}

Cleans the location name by removing the text in parentheses and the parentheses themselves.
Parameters:
Name Type Description
location String name of the location.
Source:
Returns:
cleaned location name.
Type
String

closestSite(position) → {Object.<site:String, distance:Number>}

Returns the closest site to the given GCS position (latitude, longitude).

An exaustive search is performed by iterating over all the sites and calculating the distance to each site using the haversine formula. The site with the smallest distance is returned as the closest site.

Note that the "Unknown" site is skipped in the search.

 let minDist = Infinity;
 for (const site of cities.current) {
   if (site !== "Unknown") {
     // Skip Unknown elements
     const distance = haversine(position, gpsCoordinates[site]).m;
     if (distance < minDist) {
       closest = site;
       minDist = distance;
     }
   }
 }
 return minDist;

Alternatively, the closest site could be found using the reduce method of arrays.

Parameters:
Name Type Description
position GCS GCS coordinates.
Source:
See:
Returns:
closest site name and distance.
Type
Object.<site:String, distance:Number>

coterminalAngle(n, degreesopt) → {Number}

Convert an angle to its coterminal angle in the range [0°, 360°).

Negative angles and angles greater than a full revolution are more awkward to work with than those in the range of 0° to 360°, or 0 to 2π. It would be convenient to replace those out-of-range angles with a corresponding angle within the range of a single revolution.
Parameters:
Name Type Attributes Default Description
n Number angle in degrees.
degrees Boolean <optional>
 true whether the angle is in degrees (true) or radians (false).
Source:
See:
Returns:
coterminal angle in the range [0°, 360°) or [0, 2π).
Type
Number

createEvent(key) → {KeyboardEvent}

Returns a new keyboard event that can be passed to handleKeyPress.
Parameters:
Name Type Description
key String char code.
Source:
Returns:
a keyboard event.
Type
KeyboardEvent

createModel(model) → {modelData|module:polyhedron~polyData}

Sets up all buffers for the given (triangulated) model (shape).

Uses the webgl vertex buffer, normal buffer, texture buffer and index buffer, created in startForReal.
Then, binds each one of them as an array buffer and copies the corresponding shape array data to them.

Also, the Euler characteristic for the model is:

  • χ = 2 − 2g − b
for a surface with g handles and b boundaries.

The number of triangles must be even for a valid triangulation of the sphere:

Parameters:
Name Type Description
model Object model descriptor.
Properties:
Name Type Default Description
model.shape modelData a BREP model given as an IFS.
model.name String "" model name.
model.chi Number | null 2 model Euler Characteristic.
model.poly Number 0 initial polyhedron for subdivision:
0 - dodecahedron,
1 - icosahedron,
2 - octahedron,
3 - tetrahedron.
model.fix_uv Boolean false whether to change uv texture coordinates.
Source:
See:
Returns:
shape.
Type
modelData | module:polyhedron~polyData

createProgram(gl, vshader, fshader) → {WebGLProgram}

Create the linked program object
Parameters:
Name Type Description
gl WebGLRenderingContext GL context.
vshader String a vertex shader program.
fshader String a fragment shader program.
Source:
See:
Returns:
created program object, or null if the creation has failed.
Type
WebGLProgram

cube(side) → {modelData}

Create a model of a cube, centered at the origin.

This is not a particularly good format for a cube, since an IFS representation has a lot of redundancy.
Parameters:
Name Type Description
side Number the length of a side of the cube. If not given, the value will be 1.
Source:
Returns:
Type
modelData

dd2dms(dd, isLongitudeopt, dpopt) → {String}

Convert from decimal degrees to degrees, minutes and seconds.

The calculation is performed using dp decimal places to avoid numerical errors:
  • dd = Number(dd.toFixed(dp))
  • dd2dms(50) → 50° 0' 0.00" and not 49° 59' 60.00"
    • 49.99999999999999 → 50
  • minutes = (Math.abs(dd) % 1).toFixed(dp) * 60
  • dd2dms(65.35) → 65° 21' 0.00" and not 65° 20' 60.00"
    • Math.abs(65.35) % 1 → 0.3499999999999943
    • 0.35 * 60 = 21 and not 20.99999999999966
Parameters:
Name Type Attributes Default Description
dd Number decimal degrees.
isLongitude Boolean <optional>
 false whether the decimal degree represents longitude (true) or latitude (false).
dp Number <optional>
 5 number of decimal places to use – default 5 for d, 5 for m, 2 for s.
Source:
See:
Returns:
DMS string in the format `D° M' S"`.
Type
String

decomposeVector(v, w) → {Object.<vec3, vec3>}

Decomposes vector v into components parallel and perpendicular to w.

The projection and perpendicular component are given by:
  • proj𝑤(𝑣) = (𝑣⋅𝑤)/(𝑤⋅𝑤) 𝑤
  • perp𝑤(𝑣) = 𝑣 − proj𝑤(𝑣)
Parameters:
Name Type Description
v vec3 vector to be decomposed.
w vec3 vector to decompose upon.
Source:
See:
Returns:
{proj, perp} projection and perpendicular components of v onto w.
Type
Object.<vec3, vec3>

diffMercator(lat1, lat2) → {Number}

Convert a latitude difference in degrees to Mercator.

A latitude difference is the angular distance (in degrees) between them, measured north or south of the Equator.

Note that logarithms transform divisions in subtractions: log(a/b) = log(a) - log(b).

Parameters:
Name Type Description
lat1 Number first latitude in degrees.
lat2 Number second latitude in degrees.
Source:
See:
Returns:
(lat2-lat1) in Mercator coordinates.
Type
Number

displayLocations()

Load new points on the GPU corresponding to the selected country.

Then, triggers the animation to update the canvas.
Source:
See:

displayVersions(index)

Display GLSL and OpenGL versions, device pixel ratio, ppi and textimg length (cm) in the "options" element.

The standard css pixel length is 1/96 of an inch.
Parameters:
Name Type Description
index Number pixel density index.
Source:
See:

dms2dd(degrees, minutes, seconds, hemisphere) → {Number}

Convert from degrees, minutes and seconds to decimal degrees.

Parameters:
Name Type Description
degrees Number degrees.
minutes Number minutes.
seconds Number seconds.
hemisphere String ("S", "N", "E", "W").
Source:
Returns:
decimal degrees.
Type
Number

draw()

Code to actually render our geometry. Draws axes, applies texture, then draws lines.
Source:

drawAxes()

Draws the axes.

Uses the colorShader.
Source:

drawLines()

Draws the lines: mesh + normals.

Uses the colorShader with colors defined in a colorTable.

This code takes too long on mobile - too many API calls.

 // draw edges
 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 gl.vertexAttribPointer(positionIndex, 3, gl.FLOAT, false, 0, 0);
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 for (let i = 0; i < theModel.indices.length; i += 3) {
     // offset - two bytes per index (UNSIGNED_SHORT)
     gl.drawElements(gl.LINE_LOOP, 3, gl.UNSIGNED_SHORT, i * 2);
 }
The solution is having a single buffer with all lines, which was set in createModel.
Source:
See:

drawLinesOnImage(canvasimgopt) → {Number|null}

Draw the meridian and parallel lines at the currentLocation on the texture image, or the loxodrome and rhumb line if loxodrome is selected, plus the great circle projection.

The loxodrome is a straight line connecting the previous to the current location and its bearing angle is the angle it makes with the y-axis.
Parameters:
Name Type Attributes Default Description
canvasimg HTMLCanvasElement <optional>
 element.canvasimg the canvas element to draw on.
Source:
See:
  • Rhumb Line (red) - Great Circle (cyan)
    Sidney - Nuuk (16301 km, 52.53°)
Returns:
bearing angle in degrees ∈ [000°, 360°) or null, if loxodrome is false.
Type
Number | null

drawLocations()

Draws all location points on the globe.

Uses the colorShader.
Source:

drawLocationsOnImage(canvasimgopt)

Draw the gpsCoordinates locations on the texture image.
Parameters:
Name Type Attributes Default Description
canvasimg HTMLCanvasElement <optional>
 element.canvasimg the canvas element to draw on.
Source:

drawParallel()

Draws a parallel and a meridian.

Uses the colorShader with colors defined in a colorTable.
Source:

drawTexture()

Texture render the current model.

Uses the lightingShader.

If the attribute "a_TexCoord" is not defined in the vertex shader, texture coordinates will be calculated pixel by pixel in the fragment shader.

We can also set a uniform attribute (u_mercator) in the shader, for using a Mercator projection instead of an equirectangular projection.

Source:

equiLox(ctx, loc1, loc2, nopt) → {Number|null}

Draw the rhumb line (loxodrome is true), or the meridian and parallel lines otherwise, between two GCS locations on the texture image for the equirectangular cylindrical projection.

The loxodrome image will NOT be a straight line in the plane of the equidistant cylindrical projection, but another curve.

Note: for a Mercator projection, please use rhumbLine.

Parameters:
Name Type Attributes Default Description
ctx CanvasRenderingContext2D 2D rendering context of the canvas.
loc1 gpsCoordinates previous location.
loc2 gpsCoordinates current location.
n Number <optional>
 20 number of points to approximate the loxodrome.
Source:
See:
Returns:
bearing angle in degrees ∈ [000°, 360°) or null, if loxodrome is false.
Type
Number | null

fmtDistance(value, unit) → {String}

Format a distance according to a given unit.
Parameters:
Name Type Default Description
value Number distance.
unit String all "km", "mi", "nm", "all"
Source:
Returns:
distance in unit.
Type
String

fmtdeg(angle) → {String}

Object that enables language-sensitive number formatting.

The format() method of Intl.NumberFormat instances formats a number according to the locale and formatting options of this Intl.NumberFormat object.

This instance formats an angle in degrees to a string with the appropriate unit.

Parameters:
Name Type Description
angle Number in degrees.
Source:
See:
Returns:
formatted angle in degrees.
Type
String

fmtkm(distance) → {String}

Object that enables language-sensitive number formatting.

The format() method of Intl.NumberFormat instances formats a number according to the locale and formatting options of this Intl.NumberFormat object.

This instance formats a distance in kilometers to a string with the appropriate unit.

Parameters:
Name Type Description
distance Number in kilometers.
Source:
See:
Returns:
formatted distance in km.
Type
String

fmtmi(distance) → {Object}

Object that enables language-sensitive number formatting.

The format() method of Intl.NumberFormat instances formats a number according to the locale and formatting options of this Intl.NumberFormat object.

This instance formats a distance in miles to a string with the appropriate unit.

Parameters:
Name Type Description
distance Number in miles.
Source:
See:
Returns:
formatted distance in mi.
Type
Object

fmtnm(distance) → {Object}

Object that enables language-sensitive number formatting.

The format() method of Intl.NumberFormat instances formats a number according to the locale and formatting options of this Intl.NumberFormat object.

This instance formats a distance in miles to a string with the appropriate unit.

Parameters:
Name Type Description
distance Number in nautical miles.
Source:
See:
Returns:
formatted distance in nm.
Type
Object

formatNumberWithSign(num, decimals) → {String}

Format a number including a plus sign for positive numbers.
Parameters:
Name Type Description
num Number number.
decimals Number number of digits to appear after the decimal point.
Source:
Returns:
a string representing the given number using fixed-point notation.
Type
String

gcs2Screen(location, mercatorProjectionopt) → {Coordinates}

Convert from GCS (longitude, latitude) to screen coordinates.

This function uses the WebGL projection to convert the geographic coordinates to screen coordinates (pixels).
  • The projection can be either cylindrical, conical, spherical or Mercator.
  • The spherical projection is used for a globe, while the Mercator projection is used for a map.
Parameters:
Name Type Attributes Default Description
location GCS gcs coordinates.
mercatorProjection Boolean <optional>
 false whether to use Mercator projection.
Properties:
Name Type Description
Coordinates.screen Array.<{x:Number, y:Number}> screen coordinates.
Coordinates.cartesian vec3 cartesian coordinates.
Coordinates.uv Object.<{s:Number, t:Number}> spherical coordinates in UV space.
Coordinates.viewport Array.<Number> viewport dimensions.
Source:
Returns:
Type
Coordinates

gcs2UV(gcs) → {Object.<{s: Number, t: Number}>}

Convert from GCS (longitude, latitude) to UV coordinates.
Parameters:
Name Type Description
gcs GCS longitude ∈ [-180°,180°], latitude ∈ [-90°,90°].
Source:
Returns:
UV coordinates ∈ [0,1].
Type
Object.<{s: Number, t: Number}>

gcsForUnknownLocation(uv) → {gpsCoordinates}

Set GCS coordinates for the "Unknown" location, given its 'uv' coordinates.
Parameters:
Name Type Description
uv Object.<{s: Number, t:Number}> uv coordinates ∈ [0,1].
Source:
Returns:
new gps coordinates of "Unknown" location.
Type
gpsCoordinates

getAngleBetweenVectors(v1, v2) → {Number}

Calculate the angle in radians between two vectors.

  • θ = atan2(||v1 × v2||, v1 • v2))
    • or
  • θ = acos((v1 • v2) / (||v1|| ||v2||))
   const dotProduct = clamp(vec3.dot(v1, v2), -1, 1)/(vec3.length(v1)*vec3.length(v2));
   const angleInRadians = Math.acos(dotProduct);
Parameters:
Name Type Description
v1 vec3 first vector.
v2 vec3 second vector.
Source:
See:
Returns:
angle in radians between v1 and v2.
Type
Number

getAzimuthAndLoxodromeDistance(lat1, lon1, lat2, lon2) → {Object.<{bearing: Number, loxdist: Number, mp1: Number, mp2: Number}>}

Returns the azimuth and loxodromic distance between two GCS coordinates, by calculating their meridional parts found in navigation tables such as Bowditch's practical navigator and Norie's tables.

Azimuth is the clockwise angle between the north direction and the line connecting the two points and loxodromic distance is their distance along a loxodrome (rhumb line).

Since the calculation of the loxodromic distance relies on the difference of meridional parts, which is expressed in nautical miles, there is no need to pass the radius of the globe as a parameter to calculate it.
Parameters:
Name Type Description
lat1 Number latitude of the first point in degrees.
lon1 Number longitude of the first point in degrees.
lat2 Number latitude of the second point in degrees.
lon2 Number longitude of the second point in degrees.
Source:
See:
Returns:
bearing angle in degrees,
loxodromic distance in kilometers between (lat1, lon1) and (lat2, lon2) and
meridional parts mp1 and mp2.
Type
Object.<{bearing: Number, loxdist: Number, mp1: Number, mp2: Number}>

getChar(event) → {String|null}

Translate keydown events to strings.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
See:
Returns:
Type
String | null

getCitiesSelector() → {Array.<Number>}

Returns whether cities are selected by date or longitude.
Source:
Returns:
cities.byDate | cities.byLongitude.
Type
Array.<Number>

getConeParameters() → {Object.<r:Number, height:Number>}

Get cone parameters for plotting the current location on the cone.

Source:
Returns:
radius and height of the cone.
Type
Object.<r:Number, height:Number>

getCylinderParameters(mercopt) → {Object.<r:Number, height:Number>}

Get cylinder parameters for plotting the current location on the cylinder.

Parameters:
Name Type Attributes Default Description
merc Boolean <optional>
 mercator whether to use Mercator projection.
Source:
Returns:
radius and height of the cylinder.
Type
Object.<r:Number, height:Number>

getDate(v) → {Array.<Number>}

Return a location historical figure's last date mentioned and timeline.

In case it is a range of dates (first-second), it returns the first date.

I would like to return Date.parse(date). However, it does not work with BC dates (negative years).

Parameters:
Name Type Description
v String location name.
Source:
See:
Throws:
invalid or missing location date.
Type
RangeError
Returns:
year (negative for BC dates), month and day of the date.
Type
Array.<Number>

getDevicePixelRatio() → {Number}

Returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
Source:
See:
Returns:
device pixel ratio.
Type
Number

getIOSVersion() → {Number|null}

Returns the major IOS version (e.g., 16).

Note: returns 18 for IOS 26.
Source:
Returns:
ios version.
Type
Number | null

getLongitude(v) → {Array.<Number>}

Return a location historical figure's longitude.

Parameters:
Name Type Description
v String location name.
Source:
Returns:
longitude and latitude.
Type
Array.<Number>

getModelData(geom) → {modelData}

Given an instance of returns an object containing raw data for vertices, normal vectors, texture coordinates, and indices.

Polyhedra have no index.

Parameters:
Name Type Description
geom THREE.BufferGeometry THREE.BoxGeometry
THREE.CapsuleGeometry,
THREE.ConeGeometry,
THREE.CylinderGeometry,
THREE.PlaneGeometry,
THREE.RingGeometry,
THREE.SphereGeometry,
THREE.TorusGeometry,
THREE.TorusKnotGeometry,
THREE.DodecahedronGeometry,
THREE.IcosahedronGeometry,
THREE.OctahedronGeometry,
THREE.TetrahedronGeometry,
THREE.TeapotGeometry.
Source:
Returns:
Type
modelData

getModelMatrix() → {mat4}

Returns a new scale model matrix, which applies mscale.
Source:
Returns:
model matrix.
Type
mat4

getRealResolution(dpr) → {Object.<witdth:Number, height:Number>}

Returns the maximum device width and height in pixels.
Parameters:
Name Type Description
dpr Number device pixel ratio.
Source:
Returns:
Type
Object.<witdth:Number, height:Number>

getTextures(optionNames)

Get texture file names from an html <select> element identified by "textures".
Parameters:
Name Type Description
optionNames Array.<String> array of texture file names.
Source:

getWebGLContext(canvas, opt_debug) → {WebGL2RenderingContext}

Initialize and get the rendering context for WebGL. This will make any GL errors show up in your browser JavaScript console.
Parameters:
Name Type Description
canvas HTMLCanvasElement <canvas> element.
opt_debug Boolean flag to initialize the context for debugging.
Deprecated:
  • since WebGL2
Source:
See:
Returns:
the rendering context for WebGL.
Type
WebGL2RenderingContext

handleDMS()

Handle input of GCS coordinates.

The effect is similar to clicking an unknown location.
Source:

handleKeyPress(event) → {key_event}

Closure for keydown events.

Chooses a model and which axis to rotate around.
The subdivision level is limited for a chosen subdivision polyhedron.
When a new texture is selected, triggers callback image load event.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
Returns:
callback for handling a keyboard event.
Type
key_event

haversine(gcs1, gcs2, Ropt) → {Number}

Calculate distances on the globe using the Haversine Formula.

Haversine
formula:   a = sin²(Δφ/2) + cos φ1 ⋅ cos φ2 ⋅ sin²(Δλ/2)
           c = 2 ⋅ atan2( √a, √(1−a) )
           d = R ⋅ c

where:     φ is latitude, λ is longitude, R is earth’s radius (mean radius = 6,371km);
note:      angles need to be in radians to pass to trig functions!
Usage: 
 const distance = haversine(
       gpsCoordinates["Alexandria"],
       gpsCoordinates["Aswan"],
 );
 console.log(`Distance: ${Math.round(distance.m, 3)} m`);
 console.log(`Distance: ${Math.round(distance.km, 3)} km`);

 >> Distance: 843754 m
 >> Distance: 844 km
Parameters:
Name Type Attributes Default Description
gcs1 GCS first pair of gcs coordinates.
gcs2 GCS second pair of gcs coordinates.
R Number <optional>
 earthRadius radius of the globe in kilometers (default: 6371 km).
Source:
See:
Returns:
distance between gcs1 and gcs2.
Type
Number

initShaders(GL, vshader, fshader) → {Boolean}

Create a program object and make it current.
Parameters:
Name Type Description
GL WebGLRenderingContext context.
vshader String a vertex shader program.
fshader String a fragment shader program.
Source:
Returns:
true, if the program object was created and successfully made current.
Type
Boolean

isCardinalDirection(char) → {Boolean}

Check if the given character represents a cardinal direction (N, S, E, W).
Parameters:
Name Type Description
char String a character to check.
Source:
Returns:
true if the character is a cardinal direction, false otherwise.
Type
Boolean

isCone() → {Boolean}

Check if the current model is a cone.
Source:
Returns:
true if the current model is a cone, false otherwise.
Type
Boolean

isCylinder() → {Boolean}

Check if the current model is a cylinder.
Source:
Returns:
true if the current model is a cylinder, false otherwise.
Type
Boolean

isPowerOf2(value) → {Boolean}

Returns whether a given value is a power of two.
Parameters:
Name Type Description
value Number number to check.
Source:
Returns:
true if value is a power of two: value = 2n
Type
Boolean

isSphere() → {Boolean}

Check if the current model is a sphere.
Source:
Returns:
true if the current model is a sphere, false otherwise.
Type
Boolean

isTouchDevice() → {Boolean}

Checks if the device is a touch device.

It checks for the presence of touch events in the window object and the maximum number of touch points supported by the device. This is useful for determining if the application should use touch-specific features or fall back to mouse events.
Source:
See:
Returns:
true if the device is a touch device, false otherwise.
Type
Boolean

isZero(a, epsilon) → {Boolean}

Check if a given number is zero within a given tolerance.
Parameters:
Name Type Default Description
a Number given number.
epsilon Number 0.00001 a sufficient small tolerance.
Source:
Returns:
|a| < epsilon.
Type
Boolean

knotsTokmh(a) → {Number}

Convert knots to kilometers per hour.

The knot is a unit of speed equal to one nautical mile per hour, exactly 1.852 km/h

Captains in the 1700s tossed ropes overboard with knots spaced out at 50 ft and used a sand glass that measured half of a minute to approximate the speed of a ship in nautical miles per hour.

  • 50 ft / 0.5 min = 100 ft / 1 min × 1 nm / 6076 ft × 60 min / h = 0.9875 ≈ 1 nm / h
Parameters:
Name Type Description
a Number speed in knots.
Source:
See:
Returns:
speed in kilometers per hour.
Type
Number

labelForLocation(location, unit)

Updates the label (latitude, longitude, secant and meridional parts) to the information of the given location.

The label is updated in the element with attribute `for="equator"`:
  • sec(lat) is the secant of the latitude, which is the reciprocal of the cosine of the latitude.
  • mp(lat) is the meridional part, which is the distance in minutes of longitude from the equator to a given latitude on a Mercator chart.
Parameters:
Name Type Description
location String name of the location.
unit String "km", "mi", "nm", "all"
Source:

labelForTimeline(dat)

Updates the label of the timeline to the given date.
Parameters:
Name Type Description
dat Number date.
Source:

lineConeIntersection(o, p, ct, r, height) → {vec3|null}

Find point of intersection between a line and a cone.

The line is defined by its origin and an end point. The cone is defined by its center, radius and height.
Parameters:
Name Type Description
o vec3 ray origin.
p vec3 ray end point.
ct vec3 center of the cone.
r Number radius of the cone.
height Number height of the cone.
Source:
See:
Returns:
intersection point or null, if there is no intersection.
Type
vec3 | null

lineCylinderIntersection(o, p, ct, r, height) → {vec3|null}

Find point of intersection between a line and a cylinder.

The line is defined by its origin and an end point. The cylinder is defined by its center, radius and height.
Parameters:
Name Type Description
o vec3 ray origin.
p vec3 ray end point.
ct vec3 center of the cylinder.
r Number radius of the cylinder.
height Number height of the cylinder.
Source:
See:
Returns:
intersection point or null, if there is no intersection.
Type
vec3 | null

linePlaneIntersection(o, p, pt, normal) → {vec3|null}

Find point of intersection between a line and a plane.

The line is defined by its origin and an end point. The plane is defined by a point on it and its normal vector.
Parameters:
Name Type Description
o vec3 ray origin.
p vec3 ray end point.
pt vec3 point defining the plane position.
normal vec3 plane normal.
Source:
See:
Returns:
intersection point or null, if there is no intersection.
Type
vec3 | null

lineSphereIntersection(o, p, c, r) → {vec3|null}

Find point of intersection between a line and a sphere.

The line is defined by its origin and an end point. The sphere is defined by its center and radius.
Parameters:
Name Type Description
o vec3 ray origin.
p vec3 ray end point.
c vec3 center of the sphere.
r Number radius of the sphere.
Source:
See:
Returns:
intersection point or null, if there is no intersection.
Type
vec3 | null

loadShader(gl, type, source) → {WebGLShader}

Create a shader object
Parameters:
Name Type Description
gl WebGLRenderingContext GL context.
type gl.VERTEX_SHADER | gl.FRAGMENT_SHADER the type of the shader object to be created,
source DOMString shader program.
Source:
See:
Returns:
created shader object, or null if the creation has failed.
Type
WebGLShader

longitudeOnLoxodrome(lat0, long0, lat, bearing) → {Array.<Number, Number>}

Return the longitude on a loxodrome at latitude, lat, given the latitude, lat0, and longitude, long0, at the beginning of the line and its bearing angle.

A loxodrome is a curve that crosses all meridians at the same angle. On a Mercator projection, a loxodrome is a straight line, and this function uses this property to compute the longitude at the given latitude.

Note: this function is identical to longitudeOnRhumbLine

Parameters:
Name Type Description
lat0 Number gcs latitude of the starting point, in degrees.
long0 Number gcs longitude of the starting point, in degrees.
lat Number gcs latitude of the point to compute, in degrees.
bearing Number in degrees, with 0° being north and increasing clockwise.
Source:
See:
Returns:
longitude and latitude of the point on the loxodrome in radians.
Type
Array.<Number, Number>

longitudeOnRhumbLine(lat0, long0, lat, bearing) → {Array.<Number, Number>}

Parametrization of a loxodrome.

Return the longitude on a rhumb line at latitude, lat, given the latitude, lat0, and longitude, long0, at the beginning of the line and its bearing angle.

A rhumb line is a curve that crosses all meridians at the same angle.
  • tg(90°-θ) = cotg(θ) = 1 / tg(θ) = Δλ / Δψ
  • ℓα: (0,π) ⟶ 𝕊2
  • Z up
    • φ ↦ (r cos(θα(φ)) sin(φ), r sin(θα(φ)) sin(φ), r cos(φ))
  • Y up (north pole)
    • φ ↦ (r cos(θα(φ)) sin(φ), -r cos(φ), -r sin(θα(φ)) sin(φ))
  • θα(φ) = θ₀ + tan (α) [ln (cot (φ/2)) − ln (cot (φ₀/2))]
Parameters:
Name Type Description
lat0 Number gcs latitude of the starting point, in degrees.
long0 Number gcs longitude of the starting point, in degrees.
lat Number gcs latitude of the point to compute, in degrees.
bearing Number in degrees, with 0° being north and increasing clockwise.
Source:
See:
Returns:
longitude and latitude of the point on the loxodrome in radians.
Type
Array.<Number, Number>

lowerBound(arr, target) → {Number}

Returns the index of the first element in a sorted array that is greater or equal to a given target in O(log(n)).

If all elements are smaller than the target, then returns the array's length.
  • lowerBound([2, 3, 7, 10, 11, 11, 25], 9) → 3
  • lowerBound([2, 3, 7, 10, 11, 11, 25], 11) → 4
  • lowerBound([2, 3, 7, 10, 11, 11, 25], 100) → 7
Parameters:
Name Type Description
arr Array the sorted array to search.
target String | Number the value to search for.
Source:
See:
Returns:
first index of a value ≥ target or array's length.
Type
Number

lowerBoundLinear(arr, target) → {Number}

Returns the index of the first element in an array that is greater or equal to a given target in O(n).

If all elements are smaller than the target, then returns the array's length.
Parameters:
Name Type Description
arr Array the sorted array to search.
target String | Number the value to search for.
Source:
See:
Returns:
first index of a value ≥ target or array's length.
Type
Number

loxodromeDestination(loc1, theta, d, Ropt) → {gpsCoordinates}

Calculate the destination point given the starting point, bearing angle and distance to travel. 
Formula:   φ2 = φ1 + δ ⋅ cos θ
           Δψ = ln( tan(π/4 + φ2/2) / tan(π/4 + φ1/2) )
           q = Δφ / Δψ (or cos φ for E-W line)
           Δλ = δ ⋅ sin θ / q
           λ2 = λ1 + Δλ

where:     δ is angular distance,
           θ is the bearing angle
           φ is geodetic latitude,
           ψ is isometric latitude,
           λ is longitude,
           Δλ is taking shortest route (<180°),
           ln is natural log, R is the earth’s radius

Doolittle Raid = loxodromeDestination(
   { latitude: 37.77493, longitude: -122.41942 },
     268.1, 7621,
   ) => { longitude: 152.20187347778597, latitude: 35.502563605922944 } =
        { longitude: 152° 12' 6.75" E, latitude: 35° 30' 9.23" N }

Dover - Calais = loxodromeDestination(
   { latitude: 51.12556, longitude: 1.33806 },
     116.64, 40.23,
   ) => { longitude: 1.8524241637667456, latitude: 50.96333626077345 } =
        { longitude: 1° 51' 8.71" E, latitude: 50° 57' 48.02" N }
Parameters:
Name Type Attributes Default Description
loc1 gpsCoordinates starting location with latitude and longitude.
theta Number bearing angle.
d Number distance from loc1 in kilometers.
R Number <optional>
 earthRadius earth radius.
Source:
See:
Returns:
{longitude, latitude} of the destination point.
Type
gpsCoordinates

makeNormalMatrixElements(model, view) → {mat3}

Matrix for taking normals into eye space.

Return a matrix to transform normals, so they stay perpendicular to surfaces after a linear transformation.
Parameters:
Name Type Description
model mat4 model matrix.
view mat4 view matrix.
Source:
See:
Returns:
(𝑀–1)𝑇 - 3x3 normal matrix (transpose inverse) from the 4x4 modelview matrix.
Type
mat3

meridianMatrix(out, meridian, increment) → {mat4}

Returns a rotation matrix around the vector perpendicular to the given meridian, by the given increment.

Ensure longitude is in [0,180) range, so that the perpendicular vector does not change direction if longitude is in the western hemisphere.
Parameters:
Name Type Description
out mat4 the receiving matrix.
meridian GCS given meridian.
increment Number angle (in radians) to rotate around.
Source:
Returns:
out.
Type
mat4

meridianPerpVec(longitude) → {vec3}

Returns a vector perpendicular to the meridian at the given longitude. The meridian is the line of longitude at the given longitude, which is the angle from the prime meridian (0° longitude). The perpendicular vector is in the xz-plane, with y = 0.
Parameters:
Name Type Description
longitude Number meridian longitude.
Source:
Returns:
vector perpendicular to the meridian at the given longitude.
Type
vec3

meridionalParts(lat) → {Number}

Returns the distance in minutes of longitude from the equator to a given latitude on a Mercator chart (for a perfect sphere). 
   const gps = gpsCoordinates[location];
   const uv = gcs2UV(gps);
   const merc = spherical2Mercator(uv.s, uv.t);
   const mp = (merc.y * 2 - 1) * 10800;
                       or
   const mp = toDegrees(toMercator(toRadian(lat))) * 60;
Parameters:
Name Type Description
lat Number latitude in degrees.
Source:
See:
Returns:
meridional parts in minutes of longitude.
Type
Number

meta()

Whether the meta key (Command or ⌘ on macOS) has been held down.

  • On macOS, the meta key is the Command key (⌘).
  • On Windows and Linux, the meta key is the Control key (Ctrl).
Source:

mod(n, m) → {Number}

Modulo operation that handles negative numbers correctly.

Always takes the sign of the divisor, i.e., the result is always non-negative if the divisor is positive,

Parameters:
Name Type Description
n Number dividend.
m Number divisor.
Source:
Returns:
modulo of n mod m.
Type
Number

newTexture(image)

Creates a new texture from an image.

Uses the lightingShader.
Parameters:
Name Type Description
image HTMLImageElement texture.
Source:
See:

nextLevel()

Select next subdivision level and creates an event "m" for it.
Source:

nextLocation(inc, initialLocation, filter) → {Number}

Returns the next location starting at currentLocation.
Parameters:
Name Type Description
inc Number increment (-1, 0 or 1).
initialLocation Number initial location index.
filter String set of locations to look for.
Source:
Returns:
index of next location.
Type
Number

nextTexture()

Select next texture and creates an event "n" for it.
Source:

nmTokm(a) → {Number}

Convert nautical miles to kilometers.

It is the length of one minute of latitude at the equator.
Parameters:
Name Type Description
a Number distance in nautical miles.
Source:
See:
Returns:
distance in kilometers.
Type
Number

parseDMS(input) → {Number}

Parses a GCS coordinate either in DMS (degrees, minutes, seconds) or DD (decimal) format and converts it to decimal degrees.

Note that only the following characters get here:

    for latitude:
    • ' ° " . - SNsn 0-9

    for longitude:
    • ' ° " . - EWew 0-9

The input is then split in substrings starting with a digit, a letter, '.' or '-'
  • ".34 abs 123 ns" → Array [ ".34", "s", "123", "ns" ]
Parameters:
Name Type Description
input String DD or DMS string.
Source:
See:
Returns:
latitude or longitude in decimal degrees.
Type
Number

pixelRayIntersection(x, y) → {vec3|null}

Creates a ray through the pixel at (x, y) on the canvas, unprojects it, and returns its intersection against a quadric surface: cone, cylinder or sphere.
Parameters:
Name Type Description
x Number pixel x coordinate.
y Number pixel y coordinate.
Source:
Returns:
intersection point in world coordinates or null if no intersection.
Type
vec3 | null
Play a song from the given url link.
Parameters:
Name Type Description
url String song url.
Source:

pointsOnAllLocations(locopt) → {Array.<Float32Array>}

Return an array with points on all gpsCoordinates of the given locations.
Parameters:
Name Type Attributes Default Description
loc Array.<String> <optional>
 cities.current locations array.
Properties:
Name Type Description
0 Float32Array locations coordinate array.
1 Float32Array locations color array.
Source:
See:
Returns:
locations points and colors.
Type
Array.<Float32Array>

pointsOnConeMeridian(longitudeopt) → {Float32Array}

Return an array with 2 points on a conical meridian given its longitude.
Parameters:
Name Type Attributes Default Description
longitude Number <optional>
 0 distance east or west of the prime meridian: [-180°,180°]
Source:
Returns:
points on the meridian.
Type
Float32Array

pointsOnConeParallel(latitudeopt, nopt) → {Float32Array}

Return an array with n points on a conical parallel given its latitude.
Parameters:
Name Type Attributes Default Description
latitude Number <optional>
 0 distance north or south of the Equator: [-90°,90°].
n Number <optional>
 nsegments number of points.
Source:
Returns:
points on the parallel.
Type
Float32Array

pointsOnCylMeridian(longitudeopt) → {Float32Array}

Return an array with 2 points on a cylindrical meridian given its longitude.
Parameters:
Name Type Attributes Default Description
longitude Number <optional>
 0 distance east or west of the prime meridian: [-180°,180°]
Source:
Returns:
points on the meridian.
Type
Float32Array

pointsOnCylParallel(latitudeopt, nopt) → {Float32Array}

Return an array with n points on a cylindrical parallel given its latitude.
Parameters:
Name Type Attributes Default Description
latitude Number <optional>
 0 distance north or south of the Equator: [-90°,90°].
n Number <optional>
 nsegments number of points.
Source:
Returns:
points on the parallel.
Type
Float32Array

pointsOnGreatCircle(loc1, loc2, nsopt) → {Array.<Float32Array, Array>}

Return an array with ns points on an orthodrome (great circle) from loc1 to loc2.

The shortest path between two points on a sphere is the minor arc of the great circle passing through them, known as the geodesic. However, differently from a rhumb line, it is a curve when projected either onto an Equirectangular or Mercator map.
  • P(t) = C + R cos(t) u + R sin(t) v, t ∈ [0,θ]
  • R = globeRadius
  • C = (0, 0, 0)
where u and v are orthonormal vectors on the plane defined by the two points and the center of the sphere. If the two points are antipodal, then there are an infinite number of great circles that pass through them.
Parameters:
Name Type Attributes Default Description
loc1 gpsCoordinates first location with latitude and longitude.
loc2 gpsCoordinates second location with latitude and longitude.
ns Number <optional>
 nsegments number of points.
Properties:
Name Type Description
0 Float32Array points on the great circle.
1 Float32Array points in mercator coordinates.
Source:
See:
Returns:
two arrays with cartesian and mercator points.
Type
Array.<Float32Array, Array>

pointsOnLocations() → {Array.<Float32Array, Float32Array>}

Return an array with points on gpsCoordinates of the selected country.
Properties:
Name Type Description
0 Float32Array locations coordinate array.
1 Float32Array locations color array.
Source:
See:
Returns:
locations points and colors.
Type
Array.<Float32Array, Float32Array>

pointsOnLoxodrome(loc1, loc2, nopt) → {Float32Array}

Return an array with n points on a loxodrome (rhumb line) from loc1 to loc2, by using linear interpolation on the Mercator chart.

While a loxodrome is as a straight line on a Mercator projection, it is a non-linear, curved line on an Equirectangular projection.

Loxodromic interpolation follows a path of constant bearing (azimuth) and it crosses all meridians at the same angle.

When crossing the antimeridian, the longitude difference (Δλ) must represent the shortest angular distance. A possible approach is using longitude values outside the [-180,180] range.
  • E.g., a line with two points with longitude values 170 and -150 (210) should cross the antimeridian when rendered, because it is the shortest distance.

A loxodrome on a cylinder is the shortest distance (geodesic) between two points. This is because a cylinder is a developable surface (has a Gaussian curvature of zero), which means it can be "unrolled" into a flat 2D plane without any distortion. On a standard vertical cylinder of radius 'r', this path is a circular helix, which has constant curvature and constant torsion.

Parameters:
Name Type Attributes Default Description
loc1 gpsCoordinates first location with latitude and longitude.
loc2 gpsCoordinates second location with latitude and longitude.
n Number <optional>
 nsegments number of points.
Source:
See:
Returns:
points on the loxodrome.
Type
Float32Array

pointsOnLoxodrome2(loc1, loc2, nopt) → {Float32Array}

Return an array with n points on a loxodrome (rhumb line) from loc1 to loc2 on a sphere, by using a parametrization of the loxodrome.

The loxodrome path is calculated in 3D onto the sphere, and not using the planar chart. Therefore, the correct curve will be traced even for an equirectanguler cylindrical projection, as opposed to pointsOnLoxodrome, which is faster but intended to Mercator projections.
Parameters:
Name Type Attributes Default Description
loc1 gpsCoordinates first location with latitude and longitude.
loc2 gpsCoordinates second location with latitude and longitude.
n Number <optional>
 nsegments number of points.
Source:
See:
Returns:
array with cartesian coordinates.
Type
Float32Array

pointsOnLoxodrome3(loc1, angle, dist) → {Float32Array}

Calculate the cartesian coordinates of points on a loxodrome (rhumb line) given a starting point, an angle and distance.

Parameters:
Name Type Description
loc1 gpsCoordinates starting point.
angle Number bearing angle.
dist Number distance from loc1 in kilometers.
Source:
Returns:
array with cartesian coordinates.
Type
Float32Array

previousLevel()

Select previous subdivision level and creates an event "M" for it.
Source:

previousTexture()

Select previous texture and creates an event "N" for it.
Source:

project(out, vec, modelMatrix, viewMatrix, projectionMatrix, viewport) → {Array.<Number>}

Transforms object space coordinates into screen coordinates.

Parameters:
Name Type Description
out Array.<Number> the receiving vector.
vec vec3 3D vector of object coordinates.
modelMatrix mat4 model matrix.
viewMatrix mat4 view matrix.
projectionMatrix mat4 projection matrix.
viewport Array.<Number> the current viewport (as from a gl.getParameter call).
Source:
See:
Returns:
out.
Type
Array.<Number>

rhumbLine(ctx, loc1, loc2) → {Number|null}

Draw the rhumb line (loxodrome is true), or the meridian and parallel lines otherwise, between two GCS locations on the texture image for the Mercator projection.

The loxodrome image is a straight line in the projection plane.

Note: for an equirectangular cylindrical projection, please use equiLox.

Parameters:
Name Type Description
ctx CanvasRenderingContext2D 2D rendering context of the canvas.
loc1 gpsCoordinates previous location.
loc2 gpsCoordinates current location.
Source:
See:
  • Loxodrome (magenta) is a
    straight line
Returns:
bearing angle in degrees ∈ [000°, 360°) or null, if loxodrome is false.
Type
Number | null

ring(innerRadius, outerRadius, slices) → {modelData}

Creates a model of an annulus or disk lying in the xy plane, centered at the origin.

This is not a great representation, since all the normals are the same.
Parameters:
Name Type Description
innerRadius Number the radius of the hole in the radius; a value of zero will give a disk rather than a ring.
If ommited, the default value is 0.25.
outerRadius Number the radius of the ring, from the center to the outer edge. Must be greater than innerRadius.
If ommited, the default value is 2*innerRadius if innerRadius > 0 or 0.5 otherwise.
slices Number the number of radial subdivisions in the circular approximation of an annulus, minimum 3, default 32.
Source:
Returns:
Type
modelData

rotateGlobeAroundAxis(out, angle, axis) → {mat4}

Rotate the globe around a given axis by a given angle.
Parameters:
Name Type Description
out mat4 the receiving matrix.
angle Number angle in radians.
axis vec3 rotation axis.
Source:
Returns:
out.
Type
mat4

rotateModelTowardsCamera(out, modelPosition, modelForward) → {mat4}

Rotate the model towards a given (forward) vector.

This function returns a rotation matrix to align the model's position with the given forward vector. The globe will rotate around the axis perpendicular to both the model's position and the forward vector, and the angle between them determines the rotation amount.

As a consequence, the globe's north vector (0,1,0) in the intrinsic frame can be rotated so that the 'earth' looks upside down. However, the fix is simple and requires an additional rotation around the modelForward vector by calling setYUp to keep the standard orientation convention: Europe up and South America down.
Parameters:
Name Type Description
out mat4 the receiving matrix.
modelPosition vec3 a model's vector in world coordinates.
modelForward vec3 model's forward vector in world coordinates.
Source:
Returns:
out.
Type
mat4

saveLocations(filename)

Creates a JSON file with the GPS coordinates of the cities sorted by date or longitude.

The JSON file will have the following format: 
 {
   "Thermopylae": {
   "country": "Greece",
   "remarkable": [
      "Battle of Thermopylae, 8 September 480 BC"
   ],
   "latitude": 38.7999968,
   "longitude": 22.5333312
 },
 ...
Parameters:
Name Type Description
filename String name of the JSON file to be created.
Source:
See:

saveWebGLCanvasAsPNG(blob, filename)

Saves the current WebGL canvas content as a PNG image.

Ensure preserveDrawingBuffer is true if needed for capturing post-render content:
  • const gl = canvas.getContext('theCanvas', { preserveDrawingBuffer: true });
Parameters:
Name Type Description
blob Blob image blob.
filename String name of the file to save.
Source:
See:

scalarTripleProduct(a, b, c) → {Number}

Scalar triple product of three vectors.

The absolute value of the scalar triple product represents the volume of the parallelepiped formed by the three vectors a, b, and c when originating from the same point.

The sign of the result indicates the orientation of the vectors (whether they form a right-handed or left-handed system). If the scalar triple product is zero, it means the three vectors are coplanar (lie in the same plane).

Parameters:
Name Type Description
a vec3 first vector.
b vec3 second vector.
c vec3 third vector.
Source:
See:
Returns:
a⋅(b×c)
Type
Number

searchByAnything(c, str) → {Boolean}

Checks if a city name, city country or city remarkable site contains the search string.
Parameters:
Name Type Description
c String city name.
str String search string.
Source:
Returns:
true if the search string was found, or false otherwise.
Type
Boolean

searchByCity(c, str) → {Boolean}

Checks if a city name contains the search string.

Parameters:
Name Type Description
c String city name.
str String search string.
Source:
Returns:
true if the city name contains the search string, false otherwise.
Type
Boolean

searchByCountry(c, str) → {Boolean}

Checks if a city country contains the search string.
Parameters:
Name Type Description
c String city name.
str String search string.
Source:
Returns:
true if the city country contains the search string, false otherwise.
Type
Boolean

searchByRemarkable(c, str) → {Boolean}

Checks if a city has a remarkable site that contains the search string.
Parameters:
Name Type Description
c String city name.
str String search string.
Source:
Returns:
true if the city has a remarkable site that contains the search string, false otherwise.
Type
Boolean

selectModel()

Selects a model from a menu and creates an event for it.
Source:
See:

selectTexture(getCnt)

Closure for selecting a texture from the menu.

Tetrahedra and octahedra may need to be reloaded for getting appropriate texture coordinates:
  • mercator x equirectangular.
Parameters:
Name Type Description
getCnt Boolean indicates the need of getting textureCnt from <select> element in html.
Source:

setCanvasSize()

Set canvas dimensions.
Source:

setColor(elem1, elem2)

Set the color of two given GCS input elements and calls handleDMS when both latitude and longitude were entered.
Parameters:
Name Type Description
elem1 HTMLInputElement first element.
elem2 HTMLInputElement second element.
Source:

setCountryDescription(country) → {String}

Sets a description for the given country: its name in element #ncountry and number of cities in element #nsites.
Parameters:
Name Type Description
country String name of the country.
Source:
Returns:
description of the country.
Type
String

setNorth(vertices, normals)

Rotate the given model so the y-axis points North.

The variable yNorth must be true, otherwise this function has no effect:
  • if (yNorth) (x, y, z) → (-x, z , y)
Parameters:
Name Type Description
vertices Float32Array vertex array.
normals Float32Array normal array.
Source:

setPosition(location)

Load a new parallel and meridian, or a great circle and loxodrome, into the GPU corresponding to the given location.

In the case that a loxodrome is selected, the previous location is used as the starting point.
Parameters:
Name Type Description
location String a city name.
Source:
See:

setRangeTicks(optionNames)

Set range tick dates of an html <range> element identified by "steplist".
Parameters:
Name Type Description
optionNames Array.<Number> array of timeline dates.
Source:

setRangeTicks2(optionNames)

Set range tick dates of an html <range> element identified by "steplist" for Safari and mobiles.
Parameters:
Name Type Description
optionNames Array.<Number> array of timeline dates.
Source:

setTextures(optionNames)

Set texture file names of an html <select> element identified by "textures".
Parameters:
Name Type Description
optionNames Array.<String> array of texture file names.
Source:

setUVfix() → {UVfix}

A closure holding the type of the model.

Tarini's method does not work for objects like polyhedra.
It was meant for objects whose texture coordinates were set by using cylindrical or spherical uv-mappings.
For instance, a cube's face texture coordinates span from 0 to 1.

Therefore, we only use it for subdivision spheres.

Source:
See:
Returns:
Type
UVfix

setYUp(out, rotationMatrix, rotationAxis) → {mat4}

This function rotates the model around a given rotation axis (forward vector) after applying a given rotation matrix so its north vector (0,1,0) aligns with the screen y-axis (up vector).

The rotation prevents the globe from looking upside down by keeping the standard orientation convention: Europe up and South America down.

Because the coordinate system is intrinsic, the up vector is calculated by applying the inverse of the rotation matrix to the north vector.

Parameters:
Name Type Description
out mat4 the receiving matrix.
rotationMatrix mat4 transformation matrix applied to model.
rotationAxis vec3 rotation axis.
Source:
See:
Returns:
out.
Type
mat4

sortCities(dataopt)

Sort an array of gpsCoordinates by date and longitude.

The sorted arrays are stored in the cities object, which has the following properties:
  • byDate: an array of city names sorted by date.
  • byLongitude: an array of city names sorted by longitude.
  • timeline: an array of dates corresponding to the cities in byDate.
  • longitude: an array of longitudes corresponding to the cities in byLongitude.
  • nameToDate: a mapping from city names to their corresponding dates.
  • nameToLongitude: a mapping from city names to their corresponding longitudes.
Parameters:
Name Type Attributes Default Description
data Array.<gpsCoordinates> <optional>
 cities.byLongitude array of gpsCoordinates objects.
Source:
See:

sortCitiesByDate(dataopt) → {Array.<Array>}

Return cities ordered by date and the timeline.

  • location
    • Array(463) [ "Null Island", "Memphis", "Giza", "Luxor", "Thebes", "Aswan", "Troy", "Ionia (İzmir)", "Babylon", "Miletus", … ]
  • timeline
    • Array(463) [ -9007199254740991, -2670, -2613, -2051, -1400, -1279, -1183, -850, -605, -585, … ]
  • timemap
    • Object { "Null Island": -9007199254740991, "Memphis": -2670, "Giza": -2613, "Luxor": -2051, "Thebes": -1400, "Aswan": -1279, "Troy": -1183, "Ionia (İzmir)": -850, "Babylon": -605, "Miletus": -585, … }
Parameters:
Name Type Attributes Default Description
data Array.<gpsCoordinates> <optional>
 cities.byLongitude array of gpsCoordinates objects.
Properties:
Name Type Description
0 Array.<String> sort-value.location - list of names ordered by date.
1 Array.<Number> sort-value.timeline - list of corresponding years.
2 Object.<{String, Number}> sort-value.map - map associating city names to dates.
Source:
See:
Returns:
sort-value - array of location names, timeline and timemap.
Type
Array.<Array>

sortCitiesByLongitude(dataopt) → {Array.<Array>}

Return cities ordered by longitude and longitude list.
Parameters:
Name Type Attributes Default Description
data Array.<String> <optional>
 cities.byLongitude array of gpsCoordinates objects.
Properties:
Name Type Description
0 Array.<String> sort-value.location - list of names ordered by longitude.
1 Array.<Number> sort-value.longitude - list of corresponding longitudes.
2 Object.<{String, Number}> sort-value.map - map associating city names to longitudes.
Source:
See:
Returns:
sort-value - array of location names, longitudes and longmap.
Type
Array.<Array>

spherical2gcs(uv) → {Object.<{longitude: Number, latitude: Number}>}

Convert spherical coordinates to GCS (longitude, latitude).
Parameters:
Name Type Description
uv Object.<{s:Number, t:Number}> spherical coordinates ∈ [0,1]}.
Source:
Returns:
longitude ∈ [-180°,180°], latitude ∈ [-90°,90°].
Type
Object.<{longitude: Number, latitude: Number}>

startAnimation(delayopt) → {Number}

Sets up an interval to check for key presses every delay ms. This is useful for simulating key presses or for periodic updates. The interval will call the handleKeyPress function with a simulated event that has the key 'g' pressed, which is used to trigger the next location in the timeline. This is particularly useful for testing or for automatically cycling through locations.
Parameters:
Name Type Attributes Default Description
delay Number <optional>
 4000 The interval time in milliseconds. Defaults to 4000 milliseconds (4 seconds). This function will repeatedly call handleKeyPress with a simulated event that has the key 'g' pressed, effectively simulating a key press every delay ms.
Source:
See:
Returns:
The ID of the interval that can be used to clear it later. This ID can be passed to `clearInterval()` to stop the animation.
Type
Number

startForReal(image)

Creates a textured model, sets the canvas size and triggers the animation.

Basically this function does setup that "should" only have to be done once,
while draw() does things that have to be repeated each time the canvas is redrawn.
Parameters:
Name Type Description
image HTMLImageElement texture.
Source:
See:

toBlob(canvas) → {Promise.<Blob>}

Converts the content of a canvas to a Blob object.

This is useful for saving the canvas content as an image file.
Parameters:
Name Type Description
canvas HTMLCanvasElement the canvas element to convert.
Source:
See:
Returns:
a promise that resolves to a Blob object representing the canvas content.
Type
Promise.<Blob>

toDegrees(a) → {Number}

Convert radians to degrees.
Parameters:
Name Type Description
a Number angle in radians.
Source:
Returns:
angle in degrees.
Type
Number

toMercator(lat) → {Number}

Convert latitude in radians to Mercator latitude.

Latitude is clamped to the range of [-maxLatitude, maxLatitude] to avoid singularities at the poles.
  • φ = lat, -π/2 ≤ φ ≤ π/2
  • y = ln [tan (π/4 + φ/2)], -π ≤ y ≤ π
Parameters:
Name Type Description
lat Number latitude in radians ∈ [-π/2, π/2].
Source:
See:
Returns:
Mercator latitude coordinate ∈ [-π, π].
Type
Number

toMiles(a) → {Number}

Convert kilometers to miles.
Parameters:
Name Type Description
a Number distance in kilometers.
Source:
Returns:
distance in miles.
Type
Number

toNauticalMiles(a) → {Number}

Convert kilometers to nautical miles.

A nautical mile is a unit of measurement used in maritime and aviation contexts, defined as exactly 1.852 kilometers (or approximately 1.15078 miles). It is the length of one minute of latitude at the equator.

  • While one minute of latitude is consistently 1 NM, one minute of longitude only equals 1 NM at the equator.
  • As you move toward the poles, the distance between longitude lines decreases.
  • The International Hydrographic Organization adopted the "International Nautical Mile" in 1929 at exactly: 1 NM = 1,852 m.
  • Earth's circunference: 2 * π * earthRadius Km = 40030.1736 km
  • 40030 km / 360 / 60 = 1.8532407 km
Parameters:
Name Type Description
a Number distance in kilometers.
Source:
See:
Returns:
distance in nautical miles.
Type
Number

toRadian(a) → {Number}

Convert degrees to radians.
Parameters:
Name Type Description
a Number angle in degrees.
Source:
See:
Returns:
angle in radians.
Type
Number

toScreen(long, lat) → {Array.<Number, Number>}

Map a pair of (longitude, latitude) coordinates to screen coordinates in the range [0,canvasimg.width) x [0,canvasimg.height).
Parameters:
Name Type Description
long Number longitude in radians.
lat Numer latitude in radians.
Source:
Returns:
[x,y] in pixels.
Type
Array.<Number, Number>

toSpherical(y) → {Number}

Convert Mercator latitude in radians to spherical latitude.

  • y = lat, -π ≤ y ≤ π
  • φ = 2 atan (exp (y)) - π/2, -85.051129° ≤ φ ≤ 85.051129°
Parameters:
Name Type Description
y Number Mercator latitude in radians ∈ [-π, π].
Source:
See:
Returns:
spherical latitude coordinate ∈ [-π/2, π/2].
Type
Number

unproject(out, vec, modelMatrix, viewMatrix, projectionMatrix, viewport) → {Array.<Number>}

Transforms screen coordinates into object space coordinates.

Parameters:
Name Type Description
out Array.<Number> the receiving vector.
vec vec3 3D vector of screen coordinates.
modelMatrix mat4 model matrix.
viewMatrix mat4 view matrix.
projectionMatrix mat4 projection matrix.
viewport Array.<Number> the current viewport (as from a gl.getParameter call).
Source:
See:
Returns:
out.
Type
Array.<Number>

updateCurrentMeridian(x, y, setCurrentMeridian)

Updates the current meridian based on the given pixel position.

It calculates the intersection of the pixel ray with the sphere and converts the intersection point to spherical coordinates. If the intersection exists, it updates the currentMeridian variable and displays the coordinates in the canvastip element.

Note that there is no cursor position on touch devices.

Parameters:
Name Type Default Description
x Number pixel x coordinate.
y Number pixel y coordinate.
setCurrentMeridian Boolean true if true, updates the currentMeridian variable.
Source:
See:

updateLocation(inc, fixopt, prevopt)

Update the current and previous locations and set the position on the globe or map.

The previous location is updated only if it has not been set in the canvas or textimg listeners for pointer clicks.

Some models, (such as spheres and cylinders) with a texture that represents a map, are rotated towards the camera when the tooltip is on.
Parameters:
Name Type Attributes Default Description
inc Number increment to change the current location.
fix Boolean <optional>
 true whether to call setYUp.
prev Boolean <optional>
 true whether to update previousLocation.
Source:

uvCone(radius, height, slices, stacks, noBottom) → {modelData}

Defines a model of a cone.

The axis of the cone is the z-axis, and the center is at (0,0,0).
Parameters:
Name Type Description
radius Number the radius of the cone
height Number the height of the cone. The cone extends from -height/2 to height/2 along the z-axis, with the tip at (0,0,height/2).
slices Number the number of slices, like the slices of an orange, minimum 3, default 32.
stacks Number the number of stacks, like horizontal cuts of an orange, minimum 1, default 16.
noBottom Boolean if missing or false, the cone has a bottom; if set to true, the cone does not have a bottom.
The bottom is a disk at the wide end of the cone.
Source:
See:
Returns:
Type
modelData

uvCylinder(radius, height, slices, stacks, noTop, noBottom) → {modelData}

Defines a model of a cylinder.

The axis of the cylinder is the z-axis, and the center is at (0,0,0).
Parameters:
Name Type Description
radius Number the radius of the cylinder
height Number the height of the cylinder.
The cylinder extends from -height/2 to height/2 along the z-axis.
slices Number the number of slices, like the slices of an orange, minimum 3, default 32.
stacks Number the number of stacks, like horizontal cuts of an orange, minimum 1, default 16.
noTop Boolean if missing or false, the cylinder has a top; if set to true, the cylinder does not have a top.
The top is a disk at the positive end of the cylinder.
noBottom Boolean if missing or false, the cylinder has a bottom; if set to true, the cylinder does not have a bottom.
The bottom is a disk at the negative end of the cylinder.
Source:
See:
Returns:
Type
modelData

uvSphere(radius, slices, stacks) → {modelData}

Create a model of a sphere.

The z-axis is the axis of the sphere with the north pole on the positive z-axis and the center at (0,0,0).

The number of triangles is 2 * slices * stacks, e.g., 48 * 24 * 2 = 2304.

However, two rows and one column of vertices have been duplicated. Without vertex duplication, the number of triangles would be 48 * 23 * 2 = 2208.
In fact, this is topologically a cylinder whose vertices on the two borders have the same coordinates of the sphere north/south poles, respectively:

  • uvSphere(radius, slices, stack) ≍ uvCylinder(r, height, slices, stack, true, true)

Parameters:
Name Type Description
radius Number the radius of the sphere, default 0.5 if not specified.
slices Number the number of lines of longitude, minimum 3, default 32
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
(This is the number of vertical slices, bounded by lines of latitude, the north pole and the south pole.)
Source:
See:
Returns:
Type
modelData

uvSphereND(radius, slices, stacks) → {modelData}

Create a model of a sphere.

The z-axis is the axis of the sphere with the north pole on the positive z-axis and the center at (0,0,0).

This version does not duplicate vertices on the seam, but it does require Tarini's method when texturing.

Parameters:
Name Type Description
radius Number the radius of the sphere, default 0.5 if not specified.
slices Number the number of lines of longitude, minimum 3, default 32
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
(This is the number of vertical slices, bounded by lines of latitude, the north pole and the south pole.)
Source:
See:
Returns:
Type
modelData

uvTorus(outerRadius, innerRadius, slices, stacks) → {modelData}

Create a model of a torus (surface of a doughnut).

The z-axis goes through the doughnut hole, and the center of the torus is at (0,0,0).
Parameters:
Name Type Description
outerRadius Number the distance from the center to the outside of the tube, 0.5 if not specified.
innerRadius Number the distance from the center to the inside of the tube, outerRadius/3 if not specified.
(This is the radius of the doughnut hole.)
slices Number the number of lines of longitude, minimum 3, default 32.
These are slices parallel to the z-axis and go around the tube the short way (through the hole).
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
These lines are perpendicular to the z-axis and go around the tube the long way (around the hole).
Source:
See:
Returns:
Type
modelData

wrapLatitude(latitude) → {Number}

Wrap latitude to the range [-90°, 90°).

Latitudes are typically expressed in the range of -90° to 90°, where positive values indicate north of the Equator and negative values indicate south.

Wrapping latitude is slightly more complex than wrapping longitude because, unlike longitude which repeats every 360°, latitude "bounces" or reverses direction at the poles (90°) and (-90°).
Parameters:
Name Type Description
latitude Number in degrees.
Source:
See:
Returns:
wrapped latitude in the range [-90°, 90°).
Type
Number

wrapLongitude(longitude) → {Number}

Wrap longitude to the range [-180°, 180°).

Longitudes are typically expressed in the range of -180° to 180°, where positive values indicate east of the Prime Meridian and negative values indicate west.

Parameters:
Name Type Description
longitude Number in degrees.
Source:
See:
Returns:
wrapped longitude in the range [-180°, 180°).
Type
Number

zoomIn()

Increase zoom level and creates an event ↓ for it.
Source:

zoomOut()

Decrease zoom level and creates an event ↑ for it.
Source:

Type Definitions

GCS

A geographic coordinate system (GCS) is a spherical or geodetic coordinate system for measuring and communicating positions directly on Earth as latitude and longitude.
Properties:
Name Type Description
longitude Number a geographic coordinate ∈ [-180°,180°] that specifies the east-west position of a point on Earth.
latitude Number a geographic coordinate ∈ [-90°,90°] that specifies a location's north-south position on Earth.
Source:
See:

ImageLoadCallback()

Callback after a new texture image is loaded.

When called for the first time, it starts the animation. Otherwise, just loads a new texture.
Source:

UVfix(subModel)

Callback to decide whether to fix UV coordinates, based on the model type (subdivision or not), and if it is a textured model or not.
Parameters:
Name Type Description
subModel Boolean true: subdivision model,
false: normal model,
undefined: not known. Use the type saved in the closure.
Source:

frame()

Callback to keep drawing frames.
Source:
See:

handleWindowResize(dopt)

Fires when the document view (window) has been resized.

Also resizes the canvas and viewport taking into account its aspect ratio.
Parameters:
Name Type Attributes Default Description
d Boolean <optional>
 true whether to redraw the scene.
Source:
See:

key_event(event)

Handler for keydown events.

Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:

modelData

An object containing raw data for vertices, normal vectors, texture coordinates, and indices.

Polyhedra have no index.

Type:
  • Object
Properties:
Name Type Description
vertexPositions Float32Array vertex coordinates.
vertexNormals Float32Array vertex normals.
vertexTextureCoords Float32Array texture coordinates.
indices Uint16Array | Uint32Array index array.
Source:

Events

changeAxescheckBox

Executed when the axes checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeCitiescheckBox

Executed when the cities checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeCity

Executed when the city element is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeCountrySelect

Executed when the country <select> is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeCullcheckBox

Executed when the cull checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeEquatorcheckBox

Executed when the equator checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeFixUVcheckBox

Executed when the fix_uv checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeHwscheckBox

Executed when the hws checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeLatitudeValue

Executed when the country <select> is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

The previous location is set only when both a new latitude and new longitude are entered. Otherwise, the longitude input field is drawn in "red", so the user is warned for entering a new longitude.
Source:
See:

changeLocationscheckBox

Executed when the locations checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeLongitudeValue

Executed when the country <select> is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

The previous location is set only when both a new latitude and new longitude are entered. Otherwise, the latitude input field is drawn in "red", so the user is warned for entering a new latitude.
Source:
See:

changeLoxodromecheckBox

Executed when the loxodrome checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeMercatorcheckBox

Executed when the mercator checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeMeshcheckBox

Executed when the mesh checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeModeInputRadio

Executed when the mode input radio is checked (but not when unchecked).

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeModelsSelect

Executed when the models <select> is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeRotInputRadio

Executed when the rot input radio is checked (but not when unchecked).

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeScreenshot

Executed when the screenshot element is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeTextureSelect

Executed when the textures <select> is changed.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeTexturecheckBox

Executed when the texture checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeTooltipcheckBox

Executed when the tooltip checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeUnitInputRadio

Executed when the unit input radio is checked (but not when unchecked).

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

clickAnimation

Executed when the animation element is clicked.

Appends an event listener for events whose type attribute value is click.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

clickClosest

Executed when the closest element is clicked.

Appends an event listener for events whose type attribute value is click.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

contextmenu

No context menu when pressing the right mouse button.
Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

dblclick

Double click as right click.
Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

keydown

Appends an event listener for events whose type attribute value is keydown.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

keydownCountrySelect

Prevent country selection events whose type attribute value is keydown.

Appends an event listener for events whose type attribute value is keydown.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

keyup

Appends an event listener for events whose type attribute value is keyup.
The callback argument sets the callback that will be invoked when the event is dispatched.

Sets controlPressed, altPressed, and zoomPressed to false
Source:
See:

latitudeClipboardEvent

Paste on latitude input.

The previous location is set only when both a new latitude and new longitude are entered. Otherwise, the longitude input field is drawn in "red", so the user is warned for entering a new longitude.
Parameters:
Name Type Description
event ClipboardEvent paste event.
Source:
See:

latitudeKeydown

Stop the event from "bubbling" up.

We want to ignore keys pressed inside this input.
Parameters:
Name Type Description
event KeyboardEvent keydown event.
Source:
See:

load

Loads the texture image and gpsCoordinates asynchronously and defines its load callback function.

Type:
  • function
Parameters:
Name Type Description
event Event load event.
Source:
See:

longitudeClipboardEvent

Paste on longitude input.

The previous location is set only when both a new latitude and new longitude are entered. Otherwise, the latitude input field is drawn in "red", so the user is warned for entering a new latitude.
Parameters:
Name Type Description
event ClipboardEvent paste event.
Source:
See:

longitudeKeydown

Stop the event from "bubbling" up.

We want to ignore keys pressed inside this input.
Parameters:
Name Type Description
event KeyboardEvent keydown event.
Source:
See:

orientationchange

The orientationchange event is fired when the orientation of the device has changed.

This event is not cancelable and does not bubble.

The orientationchange event fires immediately, causing a race condition where the browser's innerWidth and innerHeight values haven't updated to the new screen dimensions. Implementing a delay gives the device viewport time to stabilize.

Deprecated:
  • Listen for the change event of the ScreenOrientation interface instead.
Source:
See:

pointerdown-textimg

Gets the latitude and longitude on the texture image when clicked upon and draws its position on the map.

The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerdown-theCanvas

Sets moving to false and clicked to true.

The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.

This behavior is different from mousedown events. When using a physical mouse, mousedown events fire whenever any button on a mouse is pressed down. pointerdown events fire only upon the first button press; subsequent button presses don't fire pointerdown events.

Note: it is necessary to apply a delay of 50ms for IOS version beyond 17, so the pointerup event is also fired.

Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointermove-textimg

Displays the u and v normalized coordinates on the texture image when pointer is moved upon, or longitude and latitude if the Alt key is also held down while moving.

If the Control key is held down, displays the closest site instead.

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. It's very similar to the mousemove event, but with more features.

These events happen whether or not any pointer buttons are pressed. They can fire at a very high rate, depends on how fast the user moves the pointer, how fast the machine is, what other tasks and processes are happening, etc.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointermove-theCanvas

Displays the GCS coordinates (longitude and latitude ) on the globe when pointer is moved upon or the closest site and distance if ctrl key is pressed while moving the pointer.

Sets moving to true if clicked is also true.

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. It's very similar to the mousemove event, but with more features.

These events happen whether or not any pointer buttons are pressed. They can fire at a very high rate, depends on how fast the user moves the pointer, how fast the machine is, what other tasks and processes are happening, etc.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerout-textimg

Remove the tooltip when pointer is outside the textimg element.

The pointerout event is fired for several reasons including:
  • pointing device is moved out of the hit test boundaries of an element;
  • firing the pointerup event for a device that does not support hover (see pointerup);
  • after firing the pointercancel event (see pointercancel);
  • when a pen stylus leaves the hover range detectable by the digitizer.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerup-theCanvas

Sets clicked to false and if moving is true, sets it to false and return, because we are moving the globe.
Otherwise, gets the latitude and longitude on the globe and draws its position on the map.

The pointerup event is fired when a pointer is no longer active. This behavior is different from mouseup events. When using a physical mouse, mouseup events fire whenever any button on a mouse is released. pointerup events fire only upon the last button release; previous button releases, while other buttons are held down, don't fire pointerup events.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

resize

The resize event fires when the document view (window) has been resized.

The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

screenOrientationChange

Each time the orientation of the screen changes, the change event of the ScreenOrientation interface is triggered.

The callback argument sets the callback that will be invoked when the event is dispatched.

In landscape mode the browser toolbar and tabs reduce the viewport considerably.
Source:
See:

searchInput

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox).

Erases the select search element if the current value is completely empty.
Source:
See:

searchKeydown

Handle search input for selecting cities.

The input is processed by a search predicate that filters the current set of cities. The effect is similar to clicking an unknown location.

The keydown event is fired when a key is pressed.

The callback argument sets the callback that will be invoked when the event is dispatched.

Parameters:
Name Type Description
event KeyboardEvent keydown event.
Source:
See:

timeline

Appends an event listener for events whose type attribute value is change.

Fired when a <input type="range"> is in the Range state (by clicking or using the keyboard).

The callback argument sets the callback that will be invoked when the event is dispatched.

Executed when the slider is changed.
Parameters:
Name Type Description
event Event a generic event.
Source:
See:

viewportResize

The resize event of the VisualViewport interface is fired when the visual viewport is resized. This allows you to position elements relative to the visual viewport as it is zoomed, which would normally be anchored to the layout viewport.

The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

wheel

In Firefox (even in macOS), Opera and Chrome, 'meta key + scroll mousewheel' also zooms in and out
Source: