Web development / design — popular JavaScript libraries supporting interactive maps

This page provides some popular mab based JavaScript (JS) libraries and map services.

(Click here to go back to the main page for web development related concepts and techniques.)

Leaflet is a widely used open source JavaScript library used to build web mapping applications. First released in 2011, it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Along with OpenLayers, and the Google Maps API, it is one of the most popular JavaScript mapping libraries and is used by major web sites such as FourSquarePinterest and Flickr.

Leaflet allows developers without a GIS background to very easily display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

DigitalGlobe  Maps API + Leaflet.js example (Edit the example in JSFiddle)

See here for a collection of D3 tutorials and examples I collected for you.

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework. In contrast to many other libraries, D3.js allows great control over the final visual result. Its development was noted in 2011, as version 2.0.0 was released in August 2011.

D3.js is used on hundreds of thousands of websites. Some popular uses include creating interactive graphics for online news websites, information dashboards for viewing data, and producing maps from GIS map making data. In addition, the exportable nature of SVG enables graphics created by D3 to be used in print publications.  

Mapbox is a large provider of custom online maps for websites such as FoursquarePinterestEvernote, the Financial Times, The Weather Channel and Uber Technologies. The data in MapBox are taken both from open data sources, such as OpenStreetMap and NASA, and from proprietary data sources, such as DigitalGlobe. The technology is based on Node.jsCouchDBMapnikGDAL, and Leafletjs.

Mapbox GL JS is a JavaScript library that uses WebGL (in particular, Mapbox GL) to render interactive maps from vector tiles and Mapbox styles. It’s an open source library that’s free to use.

Turf.js is a modular geo-spatial engine written in JavaScript, that helps create spatial analysis in browser. Although many examples of using Turf.js use the Mapbox API, it can be used with Leaflet or OpenLayers too. Another good thing is that Turf speaks GeoJSON natively. 

Getting started with Turf.js

Analyze data with Turf.js and Mapbox GL JS

Intro to Turf.js (Online Slides)

Spatial analysis with Turf.js

 To use Turf.js via web browser:

  <script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"> </script> 

  <script> var bufferedPoint = turf.buffer(myPoint, 5, 'miles'); </script>

     To use Turf.js in Node:

npm install turf 

//or npm install turf-buffer 

var turf = require('turf'); 

//or var buffer = require('turf-buffer');

Note: Turf.js is not dependent on Mapbox.js or access token (i.e., Turf.js does not require Mapbox map or Mapbox access token). I was initially confused with the documentation, but it works fine with plain leaflet.js.

Interactive maps for data visualizations. Bundled into a single Javascript file.

Datamaps is intended to provide some data visualizations based on geographical data. It’s SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library.