Geospatial Information Systems (GIS) is an area of cartography and information technology concerned with the storage, manipulation, analysis, and presentation of geographic and spatial data. You are probably most familiar with GIS services that produce dynamic, two-dimensional tile maps which have been prominent on the web since the days of MapQuest.
Note: The CodePen examples embedded in this post are best viewed on CodePen directly.
Geometry & 3D
Distance and Measurement
It is especially useful to have small, focused libraries that perform distance measurement, and conversion operations, such as finding the area of a geo-fence or converting miles to kilometers. The following libraries work with GeoJSON formatted objects representing geographic space.
- Geolib provides distance (and estimated time) calculations between two latitude-latitude coordinates. A handy feature of Geolib is order by distance, which sorts a list or array by distance. The library also supports elevation.
- Turf.js, which is described in the next section, also provides a distance function to calculate the great-circle distance between two points. Additionally, Turf.js calculates area, distance along a path, and the midpoint between points.
While the above libraries work well for 2D projections of geography, three-dimensional GIS is an exciting and expansive field—which is natural because we live 3D space. Fortunately, WebGL and the HTML5 canvas have also opened up new 3D techniques for web developers.
- The OSM Buildings project allows the map designer to represent buildings as 3D objects on a 2D map. The project uses OpenLayers and Leaflet. This can be used to great effect, for example Tom Holderness used OSM Buildings to map London.
Here’s an example of how to display GeoJSON Features on a 3D object: