Share
Many of the tools Iâll discuss are built in cooperation with Mapbox, CloudMade and MapZen. However, I specifically want to talk about simple tools for specific goals, not products or platforms. Mapboxâs superb new library, Turf, covers many of these topics, but there are plenty of other libraries that provide the same features and more. These tools can be added as packages to Node or used for analysis in a web browser. Data visualisation libraries, such as D3.js and Processing, are invaluable for displaying and interacting with the results of these GIS functions. Leaflet also has excellent libraries for cartography and map presentation.â©
Here, then, is my list of the best of these GIS libraries and what they achieve. You can find working examples of all of them at http://codepen.io/stevepepple/blog/javascript-geospatial-examplesâ©
3D and geometryâ©
Three.js (http://threejs.org)â©
Three is a JavaScript library for geometric and mesh objects with WebGL. Three GeoJSON provides a simple way to render GeoJSON objects on 3D planes and spheres. (GeoJSON is a format for encoding a variety of geographic data structures.)â©
OSM Buildings (http://osmbuildings.org/)â©
The OSM Buildings project allows the map designer to represent buildings as 3D objects on a 2D map. The project uses OpenLayers and Leaflet.â©
Sylvester (http://sylvester.jcoglan.com)â©
Sylvester is a library for geometry, vector, and matrix maths in JavaScript, including modelling infinite lines in 3D space.â©
Distance and measurementâ©
Geolib (https://github.com/manuelbieh/Geolib)â©
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, which is described in the next section, also provides a distance function to calculate the great-circle distance between points. Additionally, Turf calculates area, distance along a path and the midpoint between points.â©
Geo features and pointsâ©
Leaflet.js (http://leafletjs.com)â©
Leaflet is simply the best option for working with the display of points, symbols, and all types of features on web and mobile devices. The library supports rectangles, circles, polygons, points, custom markers, and a wide variety of layers. It performs quickly, handles a variety of formats and makes the styling of map features easy. The library also has a rich ecosystem of third-party plug-ins. â©
Turf.js (http://turfjs.org)â©
Turf is a library from Mapbox for geospatial analysis. One of its best features is the ability to create a collection of features and then spatially analyse, modify (geoprocess), and simplify it before using Leaflet to present the data.â©
Both Geolib and Turf can calculate the path length, feature centre and points inside a feature. â©
Simple Map D3 (http://code.minnpost.com/simple-map-d3/)â©
There is a slight learning curve to Turf and Leaflet, as they are powerful and flexible tools. An even simpler tool for creating choropleth maps is Simple Map D3. With just a few lines of code, the library creates choropleths and other symbology by simply defining a GeoJSON object and data attribute. â©
Pointsâ©
Marker Cluster for Leaflet (https://github.com/Leaflet/Leaflet.markercluster)â©
Leaflet.js is great for visualising the results from Turf or a collection of points that is large, being able to handle hundreds of points. However, there are plugins, such as Marker Cluster and Mask Canvas, that you can use if you need to handle hundreds of thousands of points.â©
Heat for Leaflet (https://github.com/Leaflet/Leaflet.heat)â©
If you want to create a heat map from point data, thereâs a Leaflet plugin call Heat. This library creates a dynamic heat map from thousands of points. â©
Geocodingâ©
The HTML5 Geolocation API provides a simple method getting a deviceâs GPS location (with the userâs permission). Location-aware web applications can use Turf spatial analysis methods for advanced techniques such as geofencing a location inside or outside a map feature. Turf is also indispensable for searching a local database or collection of objects, as it has a filter function that finds a feature matching a name or value.â©
GeoSearch for Leaflet (http://smeijer.github.io/GeoSearch/)â©
GeoSeach is a Leaflet plug-in for geocoding using the ArcGIS, Google or OpenStreetMaps geocoders. Once the control is added to the base map, it will automatically use the select geocoder to show the best search result on the map. The library is designed to be extensible to other third-party services.â©
Geo for Node.js (https://github.com/feliperazeek/geonode)â©
Felipe Oliveiraâs Geo for Node.js uses Googleâs Geocode API for geocoding and reverse geocoding. It additionally supports the Geohash system for URL encoding of latitude-longitude coordinates.â©
Routingâ©
MapZen OSRM (https://mapzen.com/blog/osrm-services)â©
MapZenâs Open Source Routing Machine (OSRM) provides a free service for routing cars, bicycles and pedestrians.â©
Networks and spatial analysisâ©
JSNetworkX (http://felix-kling.de/JSNetworkX/) and D3 (http://d3js.org) â©
D3 is a JavaScript library for manipulating documents based on data and Mike Dewarâs book, Getting Started with D3, includes a number of examples of using D3 with maps and spatial analysis. One of the more interesting examples is the creation of a directed graph of the New York Metro by analysing the Google Transit specification for MTA with JSNetworkX.â©
Turf.js (http://turfjs.org)â©
Turf provides a number of spatial analysis functions, including buffers, classification, interpolation, and triangulated irregular networks (TINs). One really nice feature is the ability to join data spatially using the tag method. Turf also provides geoprocessing tools for clipping data, merging data, dissolving data, and returning the intersection or union of two datasets. In addition, it can manipulate and invert features. â©
Simplify.js (http://mourner.github.io/simplify-js)â©
Turf uses Vladimir Agafonkinâs Simplify to perform polyline simplification. The library can be used to process files online or offline. â©
d3 Geo Exploder (http://bsouthga.github.io/d3-exploder/)â©
Ben Southgateâs d3.geo.exploder enables you to move and resize GeoJSON features to other shapes, such as a grid or a scatter plot.â©
Steve Pepple is a designer and programmer (@stevepepple)
