(Click here to go back to the main page for web development related concepts and techniques.)
- Leaflet http://leafletjs.com (Leaflet Tutorials, Leaflet API reference, Leaflet Plugins, Leaflet.js sandbox (i.e., we can learn Leaflet.js in their online editor)
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.
- D3.js (Data-Driven Documents.js) (GitHub repo, API Reference, D3 Gallery, D3 examples) https://d3js.org/
See here for a collection of D3 tutorials and examples I collected for you.
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 Foursquare, Pinterest, Evernote, 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.js, CouchDB, Mapnik, GDAL, and Leafletjs.
- Mapbox Education (sign up free for students and teachers.)
- mapbox blog (Here you can find many interesting posts about applications using mapbox, see this post for some I selected)
- Mapbox Studio (mapbox studio intro)
- Mapbox tutorials and examples
- Mapbox.js Examples
- DigitalGlobe Maps API + Mapbox.js example (Edit the example in JSFiddle)
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.
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.